Creating an XPage for editing

Forms can also be used to design Web pages, but XPages allow more UI options and greater control of appearance with less effort. It's helpful to also have a form to provide a list of fields for binding data. Also the form can be used to calculate computed fields with field formulas rather than putting code on the XPage.

About this task

In this lesson, you will learn how to add text to a page, add controls to a page, adjust the appearance of a page with style sheets, and bind data sources to a page. There are a lot of steps but just take them one at a time. Do the following:

Procedure

  1. At the beginning of the list of XPages, click New XPage. Alternatively, you can right-click XPages > New XPage.
  2. Name your new XPage Site and click OK. The XPage and form names do not have to be the same, but it is good practice. Giving them the same name enables certain automatic behaviors that are beyond the scope of this tutorial.
  3. Add a style sheet to the page as follows:
    1. In the end pane, click Style.
    2. Scroll to the end and click Add style sheet to page
    3. In the Add Style Sheet to Page box, select styles.css.
    4. Click OK.
    These CSS files are stylesheet design elements included in the sample application.
  4. Add a title for the page and style it as follows:
    1. On the XPage, type a title for the page, for example, Site Description and press Enter.
    2. Highlight the text.
    3. On the endmost pane, click Style if you are not already there.
    4. In the list under styles.css, click .title.
    The appearance of the text will change to conform to the selected style.
  5. Associate (bind) the XPage with the Domino® back-end data store as follows:
    1. Click outside the text on the XPage so focus is on the page itself.
    2. On the bottom pane under Properties, click Data.
    3. Click Add and select Domino Document.

      A data source named document1 appears.

    4. On the side of the pane, find Form and select Site from the drop-down list.

      This associates the XPage with the data definitions on the Site form.

  6. Set up the data palette as follows:
    1. On the bottom side of the pane, click the Data palette link.
      A Data tab appears in the side pane. You can also display the Data tab by clicking Window > Show Eclipse Views > Data.
    2. On the Data tab, select document1 for Data source. You may have to place focus on the XPage before the new data source appears on the data palette.

      The field names and types for the data source appear under the name of the data source.

    3. On the top left corner of the Data tab, click the icon for Select Controls dialog box to enable it.

      The icon for Select Controls dialog box looks like this:

  7. Select and drag all fields from the data palette onto the XPage under the title.

    The Select Data Bound Controls dialog box opens.

  8. Fill in the dialog box as follows:
    1. Leave all checkboxes checked to say you want to include the fields.
    2. Leave all label text as is.
    3. Change the control type for Site type to Combo Box by selecting it and using the dropdown menu.
    4. Change the control type for Amenities to List Box
    5. Change the control type for Directions to Multiline Edit Box
    6. Check Add Submit button to generated code.
    7. Check Add messages control to generated code.

    The dialog box should like this.

    Select Data Bound Controls dialog box
  9. Click OK.

    This creates a two-column table with labels in the first column and controls in the second column. The second column also has an area to display validation errors and a Submit button.

  10. Put focus on the SiteType field and adjust it as follows:
    1. Click Data under Properties on the end pane and type Office for the default value.
    2. To add the other choices for the site types, click Values following Properties. Click Add Item three times. Select and change the labels for each item from Untitled to Office, Retail, and Restaurant.

      You need not enter anything for Values unless the stored value differs from the display value which is not the case here.

  11. Put focus on the Amenities field and adjust it as follows:
    1. Click List Box under Properties on the end pane and check Allow multiple selections
    2. Click Values under Properties. Click Add Item four times. Select and change the labels for each item from Untitled to Cafeteria, Fitness Center, Visitor Center, and Executive Briefing Center.
    3. Click on column 1 inside the cell but outside the label control (“Amenities:"). Click Table Cell under Properties and select Top for Cell vertical alignment.

      This aligns the label at the beginning of the cell.

    If you prefer check boxes for Amenities, you can remove the List Box and drag a Check Box Group from the Controls palette. Bind the Check Box Group by clicking Data under Properties and selecting Amenities from the Bind to dropdown menu. Enter the values on the Values tab as in step 11 above.

    The reason there are both City and searchCity fields is to allow a different city for searching than the actual site names. For example, one of the sample sites is in Brighton, a suburb of Boston, so for searching we'll say it's in Boston. For country, however, we're going to assume that the actual country and the search country are the same.

    Your XPage should look like this.

    Site Description XPage

    At this point, your XPage should be similar to Site1 which you can open for comparison.

  12. Adjust the table so the row containing the Submit button is hidden when the page is not editable. You will need a little JavaScript™.
    1. Click on the table cell containing the Submit button (the cell, not the button).
    2. Under Properties in the bottom pane, click Table Cell if it is not already selected.
    3. Click the diamond next to Visible, then click Compute value.
      The script editor opens.
    4. In the script editor, double-click document1 in the list of global variables, then type a period.

      The global variable document1 is an object of type NotesXspDocument that represents the current document that the XPage is viewing. When you type the period, a list of methods for that object appears.

    5. In the list of methods, scroll to the end and double-click isEditable().
      This returns true if the document is editable and false otherwise. The formula should look like this:
      document1.isEditable()
    6. Click OK.

      The script editor closes saving your code.

    This code hides the cell containing the button if the return value is false. You could also hide the button rather than the cell.
  13. On the XPage, click outside any controls to put focus on the page and press Ctrl+S to save the page.
  14. Click Design > Preview in Web Browser > Default System Web Browser (or select another browser).
    You can test your application by entering values and clicking Submit. This should enter a new document into the database. To see a list of the documents, use the Notes® client. Close the browser when you are done.

    At this point, your XPage should be similar to SiteFinal which you can open for comparison.

  15. Close the Site XPage by clicking the X at the upper right of the center pane.