Director Tutorials

Customizing Pageflow-generated Forms

Objective

To learn how to use the Form Designer to:

• Apply Novell data type formats to form controls

• Define Model Item Properties on a bind element

• Use the Style Manager to change fonts

• Create and use temporary instance data

Before you begin   See About exteNd Director Tutorials.

Prerequisites   You must complete the exercises in Creating a Database Pageflow.

Concepts

• About the Form Designer

• About the Form tab

• About the Model tab

• About the Event Editor

Exercises

• Displaying data with a custom format

• Adding Model Item Properties

• Adding class style rules

• Working with temporary data

Before you get started   You'll be working with forms that you generated when you did the Creating a Database Pageflow. You'll be working with the following forms:

• TutorialemployeesDetails.xhtml

• TutorialdepartmentsEdit.xhtml

You can open these forms in the Form Designer by:

• Navigating to ExpressPortal-resource.spf\data\form directory (make sure you are viewing the ExpressPortal.spf file using source layout), then selecting the form and:

  • Double-clicking it

  or

  • Right mouse-clicking and choosing Open

or

• Opening the form from within the Pageflow (Tutorialemployees.xml and Tutorialdepartments.xml ).

Displaying data with a custom format

To specify a data type for a bind element:

1. Open Tutorialemployeesdetails.xhtml.

2. Click the Form tab.

3. Select hiredate.

4. Navigate to the Property Inspector (in the lower right pane).

   TIP:   Make sure you select the Output tab of the Property Inspector and not the Output (label) tab.

5. Change the Format property as follows:

   Control name	Format property value
   hiredate	dd/MM/yyyy

   

6. Select salary.

7. Navigate to the Property Inspector (in the lower right pane) and make the following changes to the Format property:

   Control name	Format property value
   salary	CURRENCY

8. Click Save.

To test the format changes:

1. Start a browser.

2. Open the Express Portal application by typing this URL:

   http://host/ExpressPortal

   The default page for a guest user opens in your browser.

3. Click Login.

   

   The Login dialog opens in your browser:

   

4. Log in as a portal administrator or as a user, then click login or the Enter key.

   The default page for the user you specified opens in your browser.

5. Click Tutorial (under Personal Pages).

6. Click Search.

7. Click View to view a list of employee records for a department (for example, development).

8. Choose an employee (for example, Duke Ellington) and click View.

   You will see the employee record with the salary and date formats that you applied.

   

   You can experiment by changing the formats in the Form Designer, saving the changes, then clicking (Restart the current Pageflow).

Adding Model Item Properties

To define an instance element as Required

1. Open TutorialemployeesEdit.xhtml.

2. In the Model tab, select the bind:nodeset=record/firstname element.

3. In the Property Inspector, click Add Model Item Properties.

4. In the Add Model Item Properties dialog, select Required, then click OK.

   

5. In the Property Inspector, change the Required value to True().

   

6. Click Save.

To test the changes:

1. Restart the current Pageflow by clicking .

2. Click Search.

3. Click View to view any of the employee records.

4. Choose an employee and click Edit.

5. Clear the First Name field and click Update.

   The first time you do this, you are notified by a dialog that the data is invalid. When you clear the dialog, the field causing the problem is displayed in red. If you click Update again without correcting the problem, you'll see a second dialog indicating a submission error. These message actions are created by default when the forms are created. You can modify the messages in the Model tab of the Form Designer.

Adding class style rules

To Add a Class Style Rule:

1. Open TutorialemployeesDetails.xhtml (located in the ExpressPortal project under ExpressPortal-resource.spf\data\form).

2. In the Form tab, select the employeeid label.

3. In the Property Inspector select the Output(label) tab.

4. Click Edit class style rules. The Edit class styles dialog displays:

   

5. Click New Style.

   The Add new style dialog displays:

   

   (Class name is a generated value, so the value in your dialog might be different.)

6. Accept the default class name and click OK.

   The Style Manager dialog displays:

   

7. Select the Type and Text tab and supply these values:

   Property	Value
   Font family	Arial, Helvetica, sans-serif
   Font size	12 pt
   Font style	italic
   Font weight	bold

8. Click OK to close the Font properties dialog.

9. Click OK to close the Style Manager dialog.

10. Click Save.

You can see the changes when you run the form in Preview mode (clicking the XForms Preview tab in the Form Designer) or by running the form within the Pageflow.

To test the changes in the Pageflow:

1. Restart the current Pageflow by clicking .

2. Click Search.

3. Click View to view any of the employee records.

4. Choose an employee and click View. You will see that the employeeid label looks different from the others like this:

   

Working with temporary data

In this exercise, you'll modify a generated form so that users can click a button to see label text in English or Danish. You'll learn how to:

• Create a secondary instance data node for storing the translated label text.

• Create dynamic labels that are bound to the secondary instance data.

• Add layout regions to organize your forms.

• Generate a Switch/case statement.

• Use the Event Editor to define an event handler and an XForms action.

Since you'll be changing the TutorialdepartmentsEdit.xhtml file, you might want to make a copy of it before you get started.

To create a secondary instance data node:

1. Open TutorialdepartmentsEdit.xhtml.

2. Click the Model tab of the Form Designer.

3. In the Model Editor, click on the root instance node, right mouse and choose Add Item.

   

   An instance element is automatically created.

4. Select the new instance element and navigate to the Property Inspector (the pane in the lower right corner of the Model tab).

5. Set the following properties:

   Property Name	Value
   ID	scratchpad (You'll be prompted to add a rewrite token. For this example, choose No, don't add the rewrite token.)
   Use pageflow data at runtime	never
   Is inline	checked (default)

6. Click Save.

7. In the Instance Data Pane (upper right corner), select forms:instance (the document root for the scratchpad node). Right mouse and choose Edit>Insert New Element.

   

   The Insert New Element dialog displays.

8. Complete the Insert New Element dialog as follows:

   Field name	Value
   Name	Department
   Namespace	Do not supply a value. Leave it blank.

9. Click OK.

10. Select Department (the node that you just created), right mouse-click and select Edit>Insert New Element.

11. Complete the Insert New Element dialog as follows:

    Field name	Value
    Name	name
    Namespace	Do not supply a value. Leave it blank.

12. Click OK.

13. Select name, right mouse-click and select Edit>Insert New Attribute.

    The Insert New Attribute dialog displays.

    

14. Complete the dialog as follows:

    Field name	Value
    Name	value
    Value	Department Name
    Namespace	Leave this blank

15. Click OK.

16. Repeat Step 10 through Step 15 to create a second name element with an attribute with the following values:

    Field name	Value
    Name	value
    Value	Afdelingsnavn
    Namespace	Leave this blank

    The completed scratchpad instance node should look like this:

    

To create Switch/Case statements:

1. Click the Form tab.

2. Click the Insert XForms Switch icon from the control toolbar (the second to the last icon on the toolbar).

3. Click in the space above the existing layout region.

   TIP:   You'll see a pink arrow indicating where the control will be added.

   

   You are prompted to define the case statements for the switch.

   

4. Type eng and dan as the case statements.

5. Click OK.

6. You are prompted to add the rewrite token. Choose Yes and click OK.

   Your form should look like this:

   

7. Copy departmentid and departmentname from the layout region and paste them into each Case layout region.

8. Delete the all of the controls except for Update and Cancel from the original layout region so that the final form looks like this:

   

9. Click Save.

To create dynamic labels:

1. In the first Case region, select department name.

2. Navigate to the Property Inspector and select the Input(label) tab.

3. Click the ellipsis next to the XPath of Reference property. The XPath Navigator dialog displays.

4. In the scratchpad instance node select name (the first element under Department), then select the attribute containing Department Name.

5. Click OK. Your XPath should look like this:

   

6. In the second Case region, select department name.

7. Navigate to the Property Inspector and select the Input(label) tab.

8. Click the ellipsis next to the XPath of Reference property. The XPath Navigator dialog displays.

9. In the scratchpad instance node select name (the second element under Department), then select the attribute containing Afdelingsnavn.

10. Click OK. Your XPath should look like this:

    

11. Click Save.

To create a DOMActivate event to toggle the Switch element:

1. Add a new layout region above the Switch element, by:

   1. Selecting Absolute positioning region () from XForms toolbar.

   2. Position the cursor above the Switch element and clicking (when you see the pink arrow).

2. Add two trigger controls to the newly created layout region.

   TIP:   The Insert XForms button icon represents the XForms trigger control.

3. Select the first trigger control and set the Label property to English.

4. Select the ellipsis next to the XPath of Reference property.

5. In the scratchpad instance node select name (the first element under the Department node).

6. Click OK. Your XPath should look like this:

   

7. Navigate to the Event Editor (bottom of the Form Editor).

8. Click to create a new event handler. The following dialog displays:

   

9. Click OK.

10. In the Event Editor, click and choose Toggle: select case in switch.

11. Choose eng_wsrp_rewrite_ from the Case to select dropdown.

12. Click Save.

13. Select the second trigger control and set the Label property to Danish.

14. Select the ellipsis next to the XPath of Reference property.

15. In the scratchpad instance node select name (the second element in the Department node).

16. Click OK. Your XPath should look like this:

    

17. Navigate to the Event Editor (bottom of the Form Editor).

18. Click to create a new event handler. The following dialog displays:

    

19. Click OK.

20. In the Event Editor, click and choose Toggle: select case in switch.

21. Create an event Choose the dan_wsrp_rewrite_ as the case.

22. Click Save.

    TIP:   Click XForms Preview tab to verify that the buttons and fields are bound properly. If any of the controls appear grayed out—then the bindings are not valid.

To test your form:

1. Restart the current Pageflow by clicking .

2. Click Search.

3. Click Edit to view any of the Department employee records.

   You will see the department form that you modified.

4. Click Danish to see the department name label in Danish.

Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved.  more ...