Learning XPages Part 30 : Creating An Action Bar And Buttons
Tags : Lotus Domino XPages
Bookmark :
If we are designing a read-only phonebook application then we are effectively finished and all that remains is a bit of tidyup and adjustments to the look and feel to make everything perfect however I'm going to extend the functionality to allow people be able to edit their own record in the phonebook or to allow somebody with a special role edit any document in the phonebook. Over the next few parts we will look at how to enabled editing of documents in XPages, designing a oneUI based 'action bar' and how to check a persons rights and roles to display and allow the actions.
To begin the process I have created a new field in the application configuration form that can turn on or off this feature. The reason for doing this is because the final version of the application will be available on OpenNTF and not everybody who uses it might want to grant their users this ability. By using a setting in the configuration document you'll be able to control the feature. I have created a 'radio button' on the notes form with a value of Yes|1 and No|0 and I have defaulted the value to "0" so it is turned off by default.
Lets start work on the action bar, We'll just create the action bar and the buttons and style them to the OneUI look and feel for the moment. Start by opening your content_Person custom control and drag a new panel into the design at the top of the page. Once it's dragged into place switch to the source view and make sure that it is inside the 'lotusContent' DIV. We will give the panel a styleClass of 'lotusActionBar' and 'lotusBtnContainer'. To give an item two styleclasses just separate them with a space.
Once this is done let's drag over a 'Link' control. You may be tempted to drag over a button control because we are creating action buttons but with the OneUI CSS we are actually going to style a link with the correct look and feel instead. With the link control in place have a look at it's All Properties and find the property for OuterStyleClass. Fill it in with the following 3 classes seperated by spaces 'lotusBtn lotusBtnAction lotusLeft'. The OUTER style class creates a SPAN tag around the link with the CSS class set to the values you specify.
When your finished your source should look like this :
'
If you now refresh and preview your XPage you will see your new action button appear at the top of the person details page, I've changed the label in mice to read 'Edit Document' :
In the next part we'll add the actual action to our new button.
Bookmark :
If we are designing a read-only phonebook application then we are effectively finished and all that remains is a bit of tidyup and adjustments to the look and feel to make everything perfect however I'm going to extend the functionality to allow people be able to edit their own record in the phonebook or to allow somebody with a special role edit any document in the phonebook. Over the next few parts we will look at how to enabled editing of documents in XPages, designing a oneUI based 'action bar' and how to check a persons rights and roles to display and allow the actions.
To begin the process I have created a new field in the application configuration form that can turn on or off this feature. The reason for doing this is because the final version of the application will be available on OpenNTF and not everybody who uses it might want to grant their users this ability. By using a setting in the configuration document you'll be able to control the feature. I have created a 'radio button' on the notes form with a value of Yes|1 and No|0 and I have defaulted the value to "0" so it is turned off by default.
Lets start work on the action bar, We'll just create the action bar and the buttons and style them to the OneUI look and feel for the moment. Start by opening your content_Person custom control and drag a new panel into the design at the top of the page. Once it's dragged into place switch to the source view and make sure that it is inside the 'lotusContent' DIV. We will give the panel a styleClass of 'lotusActionBar' and 'lotusBtnContainer'. To give an item two styleclasses just separate them with a space.
Once this is done let's drag over a 'Link' control. You may be tempted to drag over a button control because we are creating action buttons but with the OneUI CSS we are actually going to style a link with the correct look and feel instead. With the link control in place have a look at it's All Properties and find the property for OuterStyleClass. Fill it in with the following 3 classes seperated by spaces 'lotusBtn lotusBtnAction lotusLeft'. The OUTER style class creates a SPAN tag around the link with the CSS class set to the values you specify.
When your finished your source should look like this :
'
If you now refresh and preview your XPage you will see your new action button appear at the top of the person details page, I've changed the label in mice to read 'Edit Document' :
In the next part we'll add the actual action to our new button.
Comments