Screen Examples

In the following example, we will create a screen template that is used in the creation of all other Screen entities.

See Also

Screens

Screen Entity Example - Login Screen

Screen Entity Example - Simple Edit Screen

Screen Entity Example - Master/Detail Screen

Screen Entity Example - Dashboard 101

Screen Entity Example - Screen with Tabs

Screen Entity Example - Editable Lists

Screen Entity Example - Basic Drag Drop

Charts as Screens

Template Creation Example

Although Xephr Repositories are initialized with a template for each entity type, we are going to create a new template in order to familiarize you with the process.  

Since we want all screens created in the system to have a header and a left menu, we will create a screen template with two blocks.  The header block should not be allowed to be changed, but we want the users to be able to change the left menu block to add screen-specific links.

1. Right click on the Template Information object.

2. Select Create > Template from the menu.
   

3. The Creating an Entity screen is displayed.

4. Click on the Screen bullet.
   

5. Click on the Next button at the bottom right of the screen to continue.

6. In the Entity Name property, enter SCREEN_TEMPLATE as the entity name.

7. Leave the Datasource property set to (use default), since there is only one datasource for the Xephr® install.

8. Leave the Based On property set to (NONE), since this template will not be based off of any other template.

9. Leave the Default Mode property set to QBE View.  This property determines the default mode for the screens created from this template.  

10. Set the Body Style property to DEFAULT_STYLE, which was modified in the Style Example section.  

11. Set the Editable Field Style property to DEFAULT_DATA_ENTRY, which was modified in the Style Example section.

12. Set the Non-Editable Field Style property to DEFAULT_STYLE, which was modified in the Style Example section.

13. Set the Lov Style property to DEFAULT_STYLE, which was modified in the Style Example section.  

14. Set the Link Style property to LINKS, which was created in the Link Style Example section.
    

15. Click on the Next button at the bottom right of the screen to continue to the block creation section of the wizard.  If you were not going to add a block to the template, you could click on Finish here instead.

16. In the Block Name property, enter HEADER_BLOCK as the name of the block.

17. In the Block Type property, select Standard Block.

18. Set the Query Type property to Not From Query, since the fields will be hard coded for the header.

19. Leave the Datasource property set to (use parent), since there is only one datasource for the Xephr install.

20. Leave the Create Heading checkbox set to off.  When you set this flag to on, a heading block is created for all modes selected for this block.  Since this is the screen header, we don't need a heading for the block.

21. In the Mode Selection section, set all checkboxes to on.  We want the header to appear on every screen mode for the screens created for this block.

22. In the Scheme Selection section, leave the Form bullet set to on.  This block will only display one record at a time (the header), so the Form scheme is the best choice.
    

23. Click on the Next button at the bottom right of the screen to add fields to the block.

24. Click on the Add button three times to add three fields.

25. In the first field, type LOGO and press the Enter key on your keyboard.

26. In the second field, type HEADER_TEXT and press the Enter key on your keyboard.

27. In the third  field, type POWERED_BY_IMAGE and press the Enter key on your keyboard.
    

28. Press the Next button on the bottom right of the screen to continue.

29. We need to add the second block for the left menu to this template.  Set the Add Block or Labels checkbox to on.  The screen template will be displayed for you to select the entity or block to which you are adding the new block.
    

30. Click on the SCREEN_TEMPLATE entity.
    

31. Click on the Add Block button on the bottom right of the screen to add the block to the template.

32. In the Block Name property, enter LEFT_MENU as the name of the block.

33. In the Block Type property, select Standard Block.

34. Set the Query Type property to Not From Query, since the fields will be hard coded for the left menu.

35. Leave the Datasource property set to (use parent), since there is only one datasource for the Xephr install.

36. Leave the Create Heading checkbox set to off.  When you set this flag to on, a heading block is created for all modes selected for this block.  Since this is the left menu link block, we don't need a heading for the block.

37. In the Mode Selection section, set all checkboxes to on.  We want the left menu to appear on every screen mode for the screens created for this block.

38. In the Scheme Selection section, leave the Form bullet set to on.  
    

39. Click on the Next button at the bottom right of the screen to add fields to the block.

40. Click on the Add button nine times to add nine fields.

41. In the first field, type MENU.

42. In the second field, type SIGN_IN.

43. In the third field, type QUERY.

44. In the fourth field, type LIST.

45. In the fifth field, type NEW.

46. In the sixth field, type EXECUTE_SEARCH.

47. In the seventh field, type SAVE.

48. In the eighth field, type DELETE.

49. In the ninth field, type CREATE.
    

50. Press the Next button on the bottom right of the screen to continue.
    

51. Click on the Finish button.

52. The template is displayed in the Explorer Tree.  
    

53. Click on the Save button in the main toolbar to save the template.

54. Click on the template object to select it and display the property sheet.

55. Check the Width and Height values for the template.  They must have a value greater than 0.  Change the Width to 800 and the Height to 600 for this template.  Since this template is not based on another template, the width and height must be defined.
    

56. Expand the template and click on the LEFT_MENU object in the Explorer Tree.

57. Check the Width and Height values for the block.  They must have a value greater than 0.  Change the Width to 160 and the Height to 400 for this block.  Since this template is not based on another template, the width and height must be defined.
    

58. Click on the HEADER_BLOCK object in the Explorer Tree.

59. Since we want the header included in all screens created from this template, set the Mutability pop-list to Not Mutable.  This will prevent users that are creating screen entities from this template from modifying this block.

60. Check the Width and Height values for the block.  They must have a value greater than 0.  Change the Width to 800 and the Height to 100 for this block.  Since this template is not based on another template, the width and height must be defined.
    

61. Click on the Save button in the main toolbar to save the changes.

62. Expand the HEADER_BLOCK.

63. Left click on the LOGO field.  We need to modify the logo field to display our logo and to link to our home page.

64. In the Display As property, select Image.

65. In the Hyperlink To property, enter the home page url.  http://www.ndsapps.com

66. In the Use New Window property, select true to indicate that when someone clicks on the logo image, the home page will open in a new browser window.

67. In the Tool Tip property, enter the text to be displayed when the mouse pointer hovers over the logo image in the web browser.  Go to the NDSi Home Page.

68. In the Image Location property, select the previously uploaded logo image - xephr.gif.  When you click out the property, the path to the image will be entered automatically.
    

69. To find out the size of the image, in the Explorer Tree, expand the Uploaded Files Information object.
    

70. Select the image xephr.gif.  In the image's property sheet, the height and width are displayed.  Note these values.
    

71. Select the LOGO field again, and in the Height and Width properties, enter the height and width of the image.
    

72. Click on the Save button in the main toolbar to save the changes to this field.

73. Select the HEADER_TEXT field.  We need to modify the contents of this field to display the desired text.

74. In the Contents property, enter the desired text.  Welcome to NDS-i Xephr.
    

75. Click on the POWERED_BY_IMAGE field.  This field will be an image with no link.

76. In the Display As property, select Image.

77. In the Tool Tip property, enter the text to be displayed when the mouse pointer hovers over the powered by image in the web browser.  Powered by NDSi

78. In the Image Location property, select the previously uploaded logo image - poweredby.gif.  When you click out the property, the path to the image will be entered automatically.
    

79. To find out the size of the image, in the Explorer Tree, expand the Uploaded Files Information object.
    

80. Select the image poweredby.gif.  In the image's property sheet, the height and width are displayed.  Note these values.
    

81. Select the POWERED_BY field again, and in the Height and Width properties, enter the height and width of the image.
    

82. Click on the Save button in the main toolbar to save the changes to this field.

83. Right click on the template object in the Explorer Tree and select Designer Frame.
    

84. The Designer Tool is displayed.
    

85. Within the Designer Tool, you can move, align, and resize the objects.  Move the objects around until they look like this.  For specific instructions on the Designer Tool and its functionality, see the Designer Tool section.
    

86. Click the Save button on main toolbar to save the changes.

87. Click on the LEFT_MENU object in the Explorer Tree and expand it.

88. Each of the label fields displayed in the Explorer Tree need to be modified and changed into hyperlinks that allow navigation between the different modes and functionality of the screens to be created from this template.  

89. For each field, select the field and make the following changes:

90. In the Hyperlink To property, the code is specific to the functionality of the link.

    Field	Hyperlink To Property	Function
    MENU	ShowList('MENU');	This function shows the entity named MENU in List mode.
    SIGN_IN	DoLogout('LOGIN');	This function ends your Xephr session and displays the defined entity in its default mode.  In this case, the entity is the entity named LOGIN, which we will create later.
    QUERY	ShowQBE();	This function shows the current entity in Query mode.
    LIST	ShowList();	This function shows the current entity in List mode.
    NEW	ShowNew();	This function shows the current entity in New mode.
    EXECUTE_SEARCH	ExecuteQbe();	This function executes a query against the database, passing in the values entered in the fields, and returning them to the current entity in List mode.
    SAVE	Save(); if(lastResult) {Refresh();}	This function saves the changes made on the screen, and if no error messages are returned, refreshes the screen.
    DELETE	Delete();	This function deletes the record displayed on the screen, and refreshes the screen.
    CREATE	Save();	This function inserts a new record from the entries made on the screen in new mode.

91. In the Hyperlink Scripted? property, select true as all of the links are Xephr functions.

92. In the Contents property, enter the text the be displayed in the left menu for the link.

    Field	Contents Property
    MENU	Main Menu
    SIGN_IN	Sign In
    QUERY	New Search
    LIST	Show All
    NEW	New
    EXECUTE_SEARCH	Execute Search
    SAVE	Save
    DELETE	Delete
    CREATE	Create

93. In the On QBE, On New, On List, and On Edit properties, set this pop-list according to the link's functionality.

    Field	On QBE	On New	On List	On Edit
    MENU	true	true	true	true
    SIGN_IN	true	true	true	true
    QUERY	false	true	true	true
    LIST	true	true	true	true
    NEW	true	false	true	true
    EXECUTE_SEARCH	true	false	true	false
    SAVE	false	false	false	true
    DELETE	false	false	false	true
    CREATE	false	true	false	false

94. This is what the Delete field property sheet looks like when all changes have been made:
    

95. When all changes have been made, press the Save button in the main toolbar.

96. The template is complete.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.