Learning XPages Part 51 : Giving Function To The Search Bar

Now that we have designed the basics of
the search bar lets go ahead and give it some functionality. Open the layout_PlaceBar
custom control in your domino designer to get started,

The search function in the database
will only work if the database has been full text indexed so the first
thing I’m going to do is hide the entire search bar. To do this I can compute
the visibility of the panel that contains the search box. Select the panel
( which is much easier to do in the source view of the custom control )
and then click on the diamond beside the ‘Visible’ setting. Select the
option to compute the value and in the JavaScript entry dialog box enter
in ‘database.isFTIndexed()’. This simple function will return ‘true’ if
the database has a full text index and false if it doesn’t.

For the search Edit Box control I’d
like to provide a hint to the end user so that they know it’s a search
box, to do this I’ll add a default value of ‘Search…’ and then make that
default value disappear if they click inside the edit box.

Select the edit box in designer and
look at the ‘All properties’ setion. Under the ‘data’ category you’ll see
the property for filling in the default value.

A picture named M2

To make the default value disappear
we can make use of the ‘onFocus’ event. Switch to the events tab and find
the onFocus event. We want this event to run on the users web browser so
make sure you switch to the ‘Client Side’ and then enter in the following
JavaScript :

document.getElementById("#{id:mySearchValue}").value
= "";

Document referes to the current document
you have open in the web browser. getElementByID allows you to access the
element in the document by it’s ID name. Because we don’t know the ID name
of the element till runtime we use #{id:mySearchValue} to make the XPages
processor fill in the correct ID name for the end box ( which has the XPages
ID of mySearchValue ). The .value = "" just sets it to blank.

Now this bit of code is very simple,
if you click into the field anything in there is deleted by setting the
field to "". The one problem you might see is if you click into
the field, fill in a few characters and then click out of the field and
then click back in the characters you have entered will disappear. One
way of resolving this would be to use the following JavaScript for the
onFocus event.

var me = document.getElementById("#{id:mySearchValue}");

if (me.value === "Search…")
{
me.value = ""
}

This code only clears the field if it
still contains the default value that we setup for it. This seems like
a nicer experience for the end user.

So where do we store the value entered
by the user ? Lets put it into a scope variable. In the properties of the
Edit Box select the Data tab. We need to bind the edit box with something
for it to get and store it’s value. I’m going to store it in a viewScope
variable so click on the ‘Advanced’ radio button and select ‘Scoped Variable’
from the use dropdown box. Select the correct scope for the variable, in
this case a viewScope, and then give the variable a name. I’ve called mine
searchValue.

A picture named M3

The last functionality we need to do
is perform some sort of action when the user either presses the enter key
while typing in the search box. We’ll cover that bit tomorrow.

Tagged with: , , ,
Posted in None

Learning XPages Part 50 : Creating A Search Function

Right now our XPages phone book application
is finished and reaches the first objective that I had laid out for the
phone book. The other two objectives are not XPages related and won’t be
covered in this blog series. I could finish right here and release the
application to OpenNTF but there is one more function I want to add before
doing that…

I want to add a search function to my
XPages application, this will involve adding in an area to allow the user
to enter in the words they want to search for and a button to start the
search process. I’ve decided to add my search bar to the right side of
the placebar

A picture named M2

I could have added it to the titleBar
or even in the lefthand sidebar but I think that this location is the most
logical as the search function really doesn;t belong as part of the application
title and having it in the sidebar may confuse the user into thinking they
are searching the current set of data they are viewing. By having the search
bar above the main application area I hope that the user will know that
they are searching the entire application.

Lets add the search bar, Open your layout_PlaceBar
custom control and drag in a new panel control from the controls pane on
the right of your screen. Go in to the source view and move the panel up
to the top of the page so that it appears just under the opening DIV on
the page. I have given my panel a name and I’ve set the styleclass to ‘lotusRight’.

A picture named M3

Into this panel we need to drag in two
more controls. An Edit Box control and a Link control. For the Edit Box
control I have given it a name of mySearchValue and I have also specified
the width of the control to 200px.

A picture named M4

For the Link control I have removed
it’s label value and I have also given it a friendly name

A picture named M5

Because I don’t have a label value I
have specified an image. This is an image resource that I have imported
into the image resources section of my application.

A picture named M6

The source for the search bar’s layout
now looks like this :

A picture named M7

Note that I have also added a top and
righ margin to the overall panel control to move it into exactly the right
place.

In the next part I’ll add the events
that are needed to the controls.

Tagged with: , , ,
Posted in None

Learning XPages Part 49 : Building The LocationsEdit XPage

This is going to be a very short section
as we have covered most of this material already in part 22 and 23 of the
series. In the last few section we created a special page for the phonebook
editor so that they could create, edit and delete location documents from
the web interface.

Back in the content_LocationAdmin custom
control we had created a view control. For the first column in the view
control we specified that the values should be displayed as links.

A picture named M2

and in the overall view control properties
we had specified that opened documents should use the ‘LocationEdit’ XPage.

A picture named M3

We created the LocationEdit XPage in
part 46 but left it pretty much blank, containing the custom controls for
the layout and a custom control called content_locationEdit for the main
content. In this part we are going to complete this custom control so go
ahead and open the content_LocationEdit custom control in your designer
client.

The first thing we are going to need
is a data source so look at the main properties for the page and go to
the data section.  Add a new data source for a Notes Document and
give it the following values :

A picture named M4

Once we have added the data source you
can quickly create a table of labels and fields by using the data pane.
At the top of the controls pane on the right you should see the two down
arrows to switch to the data pane.

A picture named M5

You can now select all of the fields
available in the data source and drag them into your custom control.

A picture named M6

You can if you want revisit some of
the validation techniques that we covered in parts 33, 34 and 35 to add
some validation to this editbox controls on the form. An example could
be that you don’t want a location created with nothing in the ‘Location’
field.

All that’s left to do for this XPage
is to create the buttons to save new or edited documents. I have again
elected to save myself some time and just copy the action bar and buttons
that I have created for other parts of the application. I have copied the
action bar and buttons from my content_Person custom control and then just
left in the ‘Save’ and ‘Cancel’ buttons.

Once you save the custom control and
preview editing a location in your web browser you should now see your
action buttons and the fields.

A picture named M7

Tagged with: , ,
Posted in None

Learning XPages Part 48 : Linking Checkboxes To An Action

Our view control has a checkbox beside
each entry. In this part I’m going to link them to an button that will
delete all the selected documents. Lets open the content_LocationAdmin
custom control. The first thing we are going to need is an action bar with
a Delete Documents button on it. As I’ve already covered how to create
an action bar in a previous part here is the source code that I’ve built
for my action bar in this control.

<xp:panel id="panel1"
styleClass="lotusActionBar lotusBtnContainer">
<xp:link escape="true" text="New Location" id="link1"
outerStyleClass="lotusBtn lotusBtnAction lotusLeft">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:openPage name="/LocationEdit.xsp" target="newDocument"
/>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:link>
<xp:link escape="true" text="Delete Locations" id="link4"
outerStyleClass="lotusBtn lotusBtnAction lotusLeft" />
</xp:panel>

Paste this code into the source view
of the content_LocationAdmin above the view panel tags. When you switch
back to the design view you’ll see a new panel containing two links, the
first link is called ‘new Location’ and the second link is called ‘Delete
Locations’. I’ve already provided the code for the first link in the source
above so lets write the code for the second link.

A picture named M2

There are two ways we can figure out
what documents have been selected in the view so that we can delete them,
An ‘Simple Action’ way and a scripted way, lets look at both.

To use the simple action method click
on the ‘Delete Locations’ link and switch to the events tab. Select the
‘onClick’ event and in the simple actions section add a new action.

A picture named M3

I have selected a category of ‘Document’
and an action of ‘Delete Selected Documents’. You then need to tell the
action what view control you want to check for the checkboxes that are
ticked. In this case we only have one view control on the page. You can
optionally enter in a confirmation text that will be displayed to the user
when they click the button.

Save and test it in your web browser.

A picture named M4

And if there is nothing clicked you’ll
also see a standard message telling the user that they must have at least
one document selected.

A picture named M5

This functionality might be sufficient
for most applications but in some cases you may need to do a little more.
For example in a phonebook application you may have people listed at the
location your trying to delete so you may want to block the deletion until
there are no people left in the location or you may want to delete all
the people at that location also.

By using the scripted method to determine
the selected documents you have a lot more options.

To find out what documents have been
selected in the view control we use a method called .getSelectedIds() against
the name of the view control. This function will return an array of the
document IDs of all the selected entries and we can then loop through the
array and process the documents.

Select the ‘Delete Locations’ link in
your designer click and switch the the events tab. We are going to write
a server side javascript so on the onClick event select the option for
the script editor.



var viewPanel=getComponent("viewPanel1");

var docIDs=viewPanel.getSelectedIds();

for(i=0 ; i  <  docIDs.length
; i++){


var docId = docIDs{i};

var doc:NotesDocument = database.getDocumentByID(docId);

 // Process selected documents
here

}

NOTE : replace the { and } on docIDs{i}
above with square brackets.


The first line sets up access to the
view control by using the getComponent() function. This is a very powerful
function in advanced XPages design as it allows you to get and set a lot
of properties on controls at runtime. For example you could change the
number of rows displayed in a repeat at runtime using this function. In
our case we are getting the view control.

The second line creates the array of
document IDs by using the getSelectedIds() function against the variable
we setup in the first line. The third line then sets up the loop

The fourth line sets up a variable to
hold the DocID of the current entry in the loop and the fifth line then
gets the actual document from the notes database using the getDocumentByID()
function.

As you can see we are reusing a lot
of our Lotusscript skills inside of the javascript. if we just wanted to
delete our document right now we could put the line ‘doc.remove(true);’
inside the loop.

Deciding which method you want to use
to process the selected documents in the view control all depends on how
much control you need and if you just need a simple function or if you
need to do a lot more processing in the background.

Tagged with: , , ,
Posted in None
Archives