The Form Table and Form Layout Row controls of the Extension Library

The Form Table and Form Layout Row controls allow you to easily implement a form with the fields and their labels.
In this post I use these two controls to convert the form “Document” to xpage in a database that inherits from the template Doc Library – Notes & web (8.5).

  1. create a database lotus that inherits from the template Doc Library – Notes & web (8.5) and uncheck “Inherit future design changes”
    new database
  2. create a xpage
  3. expand Extension Library under the label Controls, select Form Table and drag it on the xpage
    form table
  4. select Form Table in the Outline panel and insert Doc Library in the Form title and Main Topic in the Form description
  5. select XPage in the Outline panel and under the label Properties -> Data add a new “Data Sources” using the button Add, choosing Domino Document and set the other parameters as in figure
    data source
  6. insert the Form Layout Row control inside the Form Table as in figure
    form layout row
  7. expand the label Dojo Form under Controls and insert a control Dojo Text Area in Form Layout Row as in figure
    dojo text area
  8. select the control Dojo Text Area and under Properties -> Data and set “Data source” equals to “document1” and “bind to” equals to “Subject”
    subject
  9. perform the step 6, 7 and 8 similarly for the field Categories
  10. perform the step 6, 7 and 8 similarly for the field Body but use a control Rich Text under Core Controls instead of Dojo Text Area and keep a blank label; the end result should look like this
    document
  11. launch the preview
    preview

You can try to set the properties of controls such as labelPosition that allows you to position the label relative to the field; also observe that some of these properties can be inherited from Form Table control to the Form Layout Row control.

4 Replies to “The Form Table and Form Layout Row controls of the Extension Library”

    1. The space between the row is because of the following css styles:

      Then you can override that, select Form Table, go to All Properties -> styling -> styleClass and add a style sheet with code:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.