Learning Xpages Part 47 : Using A View Control To List Locations

When displaying the list of location son
the home page I used a repeat control inside a table. This allowed me to
add additional features such as the hover effect on each row of the table
and gave the use the ability to click anywhere in the row due to it’s onClick
event. Another way to display information from a view in an Xpage is to
use a View Control. I’m going to use one here so you can see how to set
it up.

Lets open the content_locationAdmin
custom control. You should have a nice blank custom control containing
a single panel. Into this panel we’ll drag a View Control. You’ll find
it on the right side of your screen in the container controls section.

A picture named M2

When you release the mouse button a
helper dialog box will appear which will help you link the view control
to a data source. From the current database select the vw_Locations view.
you should see all the columns in that view appear below. You can unselect
any of the columns that you don’t want to appear on the Xpage.

A picture named M3

Once you click OK you’ll see your new
view control with a pager already built in. You can save your control and
preview it in the web browser to see your basic view.

A picture named M4

I’d like the phonebook editor to be
able to click on a location document from the view and have it automatically
be put into edit mode. I’d also like to add a checkbox to each row so that
the phonebook editor can select a number of documents for deletion. Click
on the first column of the view control, The properties will switch to
the columns properties and in the main area you’ll see some column options.

A picture named M5

I have simply turned on the ‘Checkbox’
and ‘Show As Links’ options. Now saving the xPage and previewing it makes
it look like this :

A picture named M6

To make sure the document opening in
the correct XPage go back to the overall View control properties and you
can tell it how you want to open the document

A picture named M7

I’d like to make my view control look
a bit nicer so I have added the following to my custom CSS file :

#phonebookvc,.phonebookvc
{
width:100%;
}

and for the properties of the view control
I have set this new style as the styleClass for the control and I have
reused the existing styleclass of phonebook for the data table section

A picture named M8

It now looks like this in the browser

A picture named M9

In the next part I will show you how
to link the checkboxes to the delete action button.

Tagged with: , , ,
Posted in None

Learning XPages Part 46 : Setting Up To Add Edit And Delete Locations

Our application is nearly complete on the
XPages side. A normal user can select a location, look at all the people
in that location, select a person and look at all the details for that
person.  A user with the PhonebookEditor role also has the ability
to create new person records, edit existing person records and deleted
person records. All that’s left is to give the phonebook editor a way to
add, edit and delete location documents.

There are a couple of things that need
to be done to our application, we need to create a list of the locations
that allows the PhonebookEditor the ability to select a location and instead
of being brought to a list of people within that location be brought to
an XPage that is linked to the location’s notes document so that they can
edit or delete it just like a person’s document. We’ll also need a ‘Create’
action to allow them to create a new document.

To add this functionality to the application
I have created two new XPages, one called LocationAdmin and the other called
LocationEdit. To create them I just made two copied of an existing XPage
and renamed them as required.  I then created two new custom controls
called content_LocationAdmin and content_LocationEdit. Currently the source
of the custom controls are pretty much blank containing a single panel
with the ‘lotusContent’ styleClass :

<?xml version="1.0"
encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"&gt;
       <xp:panel id="lotusContent"
styleClass="lotusContent">

       </xp:panel>
</xp:view>

Returning to the two new XPages I opened
each of them in turn and replaced their current content_ custom control
with the appropriate new custom control. By reusing code I had done to
create the other XPages in the application I was able to quickly create
the two new Xpages so that they would have the correct layout and look
and feel.

I also need to give the phonebook editor
a way to access the ‘Location Administration’ section of the application.
I had a couple of options here, I could create a whole new menu on the
left sidebar for ‘Administration’ or I could just add a link into the existing
menu. I have decided to go with the latter option so open up the sb_LocationList
custom control and I’ll show you how I added it.

Currently in the source view of sb_LocationList
the start of the menu looks like this

A picture named M2

I’m going to add the administration
link in just where the red line is so I’m going to drag in a new panel
and then switch back to the source view and make sure it is positioned
correctly. I have also given it a styleClass of ‘lotusMenuSection’ and
inside the panel I have added an unordered list with some placeholder text

A picture named M3

If we save and preview our XPage at
this stage we’ll see the new section in the menu

A picture named M4

Now I don’t want this section of menu
to appear unless the person has the PhonebookEditor role in the ACL so
select the the new panel we have created and in the properties click on
the diamond beside the ‘Visible’ property and select ‘compute value’.  In
here we will add in our JavaScript to see if the person has the role or
not.

NOTE : Replace { and } around PhonebookEditor
with square brackets if your coping the below code.

var s1 = context.getUser().getRoles();
var s2 = "{PhonebookEditor}";

if (@Contains(s1, s2) == @True())
{
       return true;
} else
{
       return false;
}

When you use the visible property on
the panel and it evaluates as false then the entire panel and it’s contents
are not sent to the browser. This is a great way of hiding entire sections
of web pages till they are needed.

Now we’ll drag in a link control form
the controls pane to where the palceholder text is. You can delete the
placeholder text also. I’ve given my link a lable of ‘Edit Locations’ and
in the link properties I’m goingto do a simple ‘Open Page’ and point it
to the ‘LocationAdmin’ XPage.

A picture named M5

If we now save the control and open
our Xpages application in the browser, making sure we are logged in with
the role we should see our new link.

A picture named M6

Clicking the link will bring us to the
LocationAdmin Xpage which should be blank right now. We’ll build that in
the next part.

Tagged with: , ,
Posted in None

Learning XPages Part 45 : Deleting A Document

Now that our phonebook editor has the ability
to create person documents how about we give them the ability to delete
person documents also.

For this I am going to create a new
action button on the content_Person custom control so open it up in your
domino designer. I could drag in a new link from the controls pane on the
right and give it all the required styleclasses etc but to save time I’m
going to reuse one of my existing action buttons. Select one of the existing
buttons and copy it to the clipboard and then position the cursor where
you’d like the new button and just paste in the clipboard contents. You
now have your basic button with all the correct styleclasses.

Select you new button and in it’s properties
give it a new name. I have called mine ‘Delete Person’.

A picture named M2

To make the button appear to the right
person and at the right time I have setup the visible properties to the
following computed code :

var s1 = context.getUser().getRoles();
var s2 = "honebookEditorquot;;

if (personDoc.isEditable())
{
       return false;
} else if (@Contains(s1, s2) == @True())
{
       return true;
} else
{
       return false;
}

If the document is already in edit mode
then the button will be hidden, if the document is not in edit mode and
the current user has the honebookEditorrole in the ACL then the button
will be shown otherwise the button is hidden.

The last bit we need to do is set the
action for the button. Switch to the events tab and look at the ‘onClick’
event. You’ll need to remove the current event that is there and then click
on the ‘Add Action’ button. This time we will select a document action
with the ‘Delete Document’ type.

A picture named M3

You will need to specify what XPage
you want to return to after the document is deleted and if you want you
can enter in some text that will be used to confirm the action.

Save and close the custom control and
preview your changes in the web browser. if you are logged in and have
the correct roles you should now see the edit button.

A picture named M4

And clicking on it will bring up your
confirmation text

A picture named M5

Clicking OK should bring you back to
the list of people in the last selected location ( thanks to the sessionScope.locationfilter
variable ) and the person you selected should now be gone.

Tagged with: , ,
Posted in None

Learning XPages Part 44 : Adding A Dropdown Combobox Lookup To A Field

In traditional notes client development
 our ‘location’ field would be a dropdown list of all the valid locations
created with a @dbColumn formula. In XPages we can duplicate this functionality
using the ‘ComboBox’ control.

Open your content_Person custom control
and drag in the ‘ComboBox’ control from the controls area on the right
, I’m going to put mine beside the ‘Location’ editbox control. First we
will set the ‘ReadOnly’ property to the exact same javascript code that
we used in the last part of the series so that you can only edit the field
if you are dealing with a new document.

On the data tab we will bind the control
to the ‘PersonDoc’ data source and the ‘Location’ field.

A picture named M2

We also have the ability to provide
a default value. I’ve decided to use the sessionScope.locationfilter variable
as that contains the value of the location we aere at when we clicked the
‘Create Person’ action button. It’s probably a good bet that the end user
went to the location of the person they wanted to create before clicking
that button. Click the diamond and enter ‘sessionScope.locationfilter()’
as the JavaScript to use.

In the properties for the combobox there
is a new property section called ‘Values’ and in here is where we specify
the different values that we want to appear in the dropdown box. You can
either hardcode in options using the ‘Add Item’ button or you can write
a formula using the ‘Add Formula Item’ button, You can even combine the
two if you want.

A picture named M3

For the formula item to work it needs
to return a string that consists of both labels and values that are separated
by a pipe | symbol and separated by a comma between each pair. Using your
knowledge of formula language we can very easily create this list.

In my lkp_Locations view I have created
a second column that displays the location name in the correct format with
the pipe symbol

A picture named M4

Then I simply clicked the ‘Add Formula
Item’ and entered in the following code :

@DbColumn("","lkp_Locations",2);

The first value of an empty string tells
the XPages processor that we are doing the lookup in the current database.
The second value is the name of the view that we are doing the lookup in
and the third value is the column number to return the values from start
at column number 1. In traditional formula language you could from 0 so
watch out for this slight change in the way the @DbColumn works.

Now saving our XPage and refreshing
shows us a nice dropdown list with it’s default value set to the current
location.

A picture named M5

Tagged with: , , , ,
Posted in None
Archives