May 17, 2010
Lesson 22 - Custom Properties
Video | Sample Database
This week it's another request for a lesson about Custom Properties on Custom Controls.
The aim of a custom property is to make a custom control even more re-usable, so you can pass in settings to it from the xpage or custom control on which it is embedded. At the simplest level you can pass in boolean or string settings to configure elements on the custom control, but you can also pass in complex objects such as a document data binding.
blog comments powered by
- Create a new database (or download the sample database)
- Create a new custom control called layout_title
- In the custom control properties pane, go to the Property Definition tab and click the "New Property" button
- Set the name to "showtitle"
- Set the type to boolean and set the default value to "true"
- Now add another new property
- Set its name to title
- Set its default value to "Test Title"
- Now drag a computed field onto the custom control
- Set the Visible property to be computed, in the script editor type the following...
- Save the custom control and then create a new XPage called test
- Drag the layout_title custom control onto the xpage, save and preview
- The title is displayed and says "Test Title"
- Now if we go back and look at the all properties for the custom control on the XPage we can see that we can override the default settings.
- First change the title property to something different, save and preview
- Now set the displaytitle property to false (note the selector based upon the data type) and the title disappears when it's previewed.
- Which is all well and good but what if we want to pass more complex data such as a Document data binding?
- First we'll need to create a form and just put a few dummy fields on it
- Now, back in the test XPage, add a document binding to the new form
- Create a new custom control called form_dummy
- Add a new property called thedoc
- From the type dialog select Data Sources --> ModelDataSource
- Now we need to change the editor to String and we'll leave the default value as blank
- Finally we want to add some fields and a save button
- Drag an Edit Box onto the custom control and in the data tab set the binding to use Advanced
- The type of binding will be Expression Language and then in the code window we're going to type:
- Finally we'll add a Submit type button so that we can save the data
- Back on our test XPage, drag the new custom control onto the design view
- In the custom properties, set the "thedoc" variable to be computed and set it's value to "document1"
- Finally save and preview the XPage