Help:User Interface:Pages

From Opadeez Wiki
Jump to navigationJump to search

The Pages section is used to create the user UI.

  • Pages are typically used to display information and allow user to do data capture
  • Pages are also used to display lookup elements and allow user to search for records in the database

Pages

Page name Name of the page. Name should be unique. Pages can be grouped by folders using syntax folder/subfolder/pagename
Data set Each page is linked to a specific DataSet. Aliases and fields from the specified DataSet can be dropped on a page.
Page mode Page mode defines the way the Page are built.
  • External: the page is not built within the studio. In this case a .jsp file must be provided as part of the deployment package (inside webcontent/pages folder).
  • Assisted: the page is built using the "Assisted Page Design" module. To modify the page click on the "Edit Page" button.
  • Manual: the page is coded in JSP within the Studio. To modify the page click on the "Edit Page" button.
Duplicate this page This link allows creating a copy of the current page. The new page name will be defined as: PageName (copy)
Deploy this page This button allows applying changes to a page into the runtime environment, without restarting the solution. This is useful during development as changes to the page can be reflected by only refreshing the page in the runtime.


Note that all other changes (changes to the dictionary, scripts, attribute rules etc...) require a full deployment of the solution.

Edit Page If the current page edition mode is set to Manual, this button launches a text editor to modify the page JSP code.


If the current page edition mode is set to Assisted, this button launched the Assisted Page Design tool (see below for details).

Assisted page design

The Assisted page design tool allows creating a Page in a Wysiwyg manner. The designer comprises the following components:

  • Assisted page design is used to define the structure of the page. Components from the Toolbox are inserted / updated / deleted from there.
  • Toolbox is used to define the details of a component to be added / modified / deleted.

The following tools are available in the Toolbox:

Container

Description Properties
Containers are used to create the overall structure of a page. Opadeez UI is based on Bootstrap; as such the containers you create will adapt based on the size of the user' screen.
  • Container: this is an horizontal container that takes the width of the page. A Container can contain objects from the toolbox, or other smaller containers (Size1-12 or virtual containers).
  • Size 1-12: these containers are subdivision of a Container and should be created only inside an existing Container. Size 12 is a sub-container that takes the whole width of its parent container. Size 6 is a sub-container that takes half the width of its parent container and so on.
  • Virtual container: these are containers that do not have specific rendering on the page but can contain other components. For example this can be used to insert a Script without affecting the structure of the page.
  • CSS Class: Add a CSS class to the container.

Text

Description Properties
This tool is used to insert fixed text into the page. Texts have 4 pre-defined sizes:
  • Normal: standard size text
  • Header 1: text used as the page main title
  • Header 2: text used as second-level title
  • Header 3: text used as third-level title or highlight
  • Text: the text to be dispayed

Field

Description Properties
Fields are the main UI component used to display information and allow data capture. Fields can be selected from the aliases of the the DataSet associated with the current page.
  • Alias: Alias of the entity to be displayed
  • Field: Field to be displayed
  • CSS Class: Used to add a custom CSS class to a given field
  • Display: Rule to define if the field should be visible or not. These rules accept JSP code using syntax <%= someJspVariable %>. If the value of this rule is blank or true, the field will be displayed unless the Attribute rule for this fields is evaluated as false.
  • Index: If the selected Alias has multiple records (1-many relationship) this Index is used to select the value for a specific record. If blank, the value of the currently selected record is shown (refer to Selector object below).
  • Label: Specify the label used in front of the field. If blank, the label defined in the Attribute will be displayed. If both are blank, the field name will be displayed.
  • Read only: Specify if this field is read-only. If set as false or blank, the field may still be read-only based on Attribute rule for the current DataSet.
  • Mandatory: Specify if this field is mandatory. If set as false or blank, the field may still be mandatory based on Attribute rule for the current DataSet.
  • Style: Select Textarea to allow multi-line entry for a field.

List Link

Description Properties
List Link is used to select a record from a linked entity. For example if you have an "Order" entity linked to a "Customer" entity, you can use List Link to let the user select which Customer the Order comes from. List Link can be displayed as drop-down list, or as auto-complete text fields.
  • Alias: Alias of the linked entity (e.g. Customer)
  • Display: Comma separated list of fields to display in the list (e.g. Firstname,Lastname)
  • CSS Class: Used to add additional CSS class
  • Label: Label to be shown in front of the list entity object (e.g. "Select a customer:")
  • Order: Field used to sort the records shown (e.g. Firstname,Lastname)
  • Filter: SQL filter used to select specific records (e.g. CustomerType = "A")
  • Refresh Page: If set to true, the page will be refreshed when the use selects an element from the link list.
  • Read only: Set if the value selection is read-only
  • Mandatory: Set if the value selection is mandatory
  • Type: Type can be:
    • DROPDOWN (default): a drop-down list of values is shown for selection
    • AUTOCOMPLETE: a standard text box with auto-complete feature is shown for selection

Selector

Description Properties
A Selector is used to display a list of records with 1-many relationship. For example when working with a specific customer, a Selector can be used to display the Orders associated with this customer. It also allows selecting 1 of the records from the list, which becomes the active record. When a record is active, it is used to populate the various data elements displayed with the Field object.
  • Alias: Alias of the entity to be displayed (e.g. Order)
  • Titles: Comma-separated list of titles to be shown in the column headers (e.g. Order date,Status,Amount)
  • Display: Comma-separated list of field names to be shown (e.g. OrderDate,Status,Amount)
  • Auto order: When set to true, the selector records will be automatically ordered alphabetically by the 1st column, 2nd column etc...
  • CSS Class: Used to set additional CSS classes
  • Order field: Numeric field from the entity to store the potion of the records. This is used when the records from the entity need a specific order that can be changed by the end-user. In this case the selector component includes arrows that can be used to re-order the records.
  • Translate values: If set to true, any code shown in the selector that is linked to a ValueList will be shown using the "Text" of the value list entry, as opposed to a code.
  • Type:
    • numbers: Display the records with numbers like: 1 - 2 - 3
    • array: Display the records in a table
  • Show add: Add a link to allow the user create a new record (e.g. a new customer Order)
  • Label add: Text shown in the Show Add link (e.g. Create a new Order)
  • Add action name, parameters, type: used to trigger a specific action when the user clicks on Add. For example, you may have a "InitialiseOrder" Script used to set certain default values to an order. This script can be automatically called by setting:
    • Add action name: InitialiseOrder
    • Add action parameters: <blank>
    • Add action type: script
  • Show delete: Add a bin icon in front of the current record, allow the user to delete the record
  • Label delete: Text to be shown in the delete link (if not set, a bin icon is shown)
  • Delete action name, parameters, type: similarly to Add actions, you can trigger specific action when a record is deleted.

Button

Description Properties
A Button is used to display an action button or a link to trigger an action.
  • Text: The text displayed in the button or link
  • Predefined action: Simple way of selecting a commonly used action. Available actions are:
    • Exit: Exit the current flow or sub-flow
    • Previous: Move to the previous page in the current flow
    • Next: Move to the next page in the current flow
    • Save: Save the current data context
  • Action name, parameters, type: used to trigger a specific action when the user clicks on the button or link. For example, you may have a "SubmitOrder" Script used to flag an order as submitted. This script can be called by setting:
    • Add action name: SubmitOrder
    • Add action parameters: <blank>
    • Add action type: script
  • CSS Class: Used to set additional CSS classes
  • Display: true/false condition to determine if the button/link should be shown. It is possible to use a JSP variable using syntax <%=someVariable%>
  • Confirmation Message (optional): If set, this message will be displayed to the user as a confirmation to trigger the button action
  • Style: Define how the button/link should be displayed:
    • button: Default button style
    • button-default, button-warning...: Styled button based on bootstrap
    • link: Display a link rather than a button

Image

Description Properties
Insert an Image to the page
  • Path: Relative or absolute path to the image file
  • Width (optional): Width of the image. You can add unit using CSS syntax for example 100px, 50% etc...
  • Height (optional): Height of the image. You can add unit using CSS syntax for example 100px, 50% etc...
  • Align (optional): Align the image to the left or to the right

Script

Description Properties
Insert a custom script into the JSP page generated by Opadeez. Scripts can be used add customized CSS, HTML code, JavaScript, Java... For example:
  • Insert customized styles:

 <style>
   .my-css-class {
     color: red;
   }
 </style>

  • Insert customized HTML:

 This is an html text

  • Insert customized JavaScript:

 <script type="text/javascript">
   alert('A JavaScript alert!');
 </script>

  • Insert customized Java code:

 <%
   String myMessage = "Hello world!"
 %>
 <%=myMessage%>

You can combine CSS, HTML, JavaScript and Java in a single script:

 <%
   String myMessage = "Hello world!"
 %>
 <script type="text/javascript">
   alert('<%=myMessage%>');
 </script>

  • Title: The title of the script. The title is only used to display the script object in the page designer
  • Edit: Click on this link to open the code editor

Lookup

The Lookup tool is used to create the UI elements to trigger a Lookup. The Lookup tool has 3 sub-tools available:

Description Properties
Parameter A lookup Parameter allows the user entering a value for the lookup parameter.
  • Lookup: Name of the lookup to be triggered
  • Parameter: Name of the parameter for which a value needs to be entered
  • Label: Text shown to the user to indicate the meaning of this parameter
  • CSS Class: Used to add a custom CSS class to a given field
  • Value (optional): Value of this parameter. If a value is defined, the parameter field will not be shown to the user, and the user won't be able to change this value.
  • Mandatory: Defines if this parameter is mandatory to trigger the lookup
Search button A Search button is used to trigger the lookup and refresh the results
  • Lookup: Name of the lookup to be triggered
  • Text: The text shown in the search button
  • CSS Class: Used to add a custom CSS class to the search button
  • Auto search: Defines if the lookup results are initialized before the user clicks a search button:
    • false: The lookup results will be displayed only when the user clicks on the search button
    • once: The lookup results will be automatically fetched the first time the lookup is loaded
    • always: The lookup results will be updated every time the lookup is displayed
    • refresh: The lookup results will be updated every time the lookup is displayed, only if the user has clicked on the search button before
  • Style: Define how the button/link should be displayed:
    • button: Default button style
    • button-default, button-warning...: Styled button based on bootstrap
    • link: Display a link rather than a button
Results Display a table with the results of the lookup
  • Lookup: Name of the lookup to be triggered
  • Action:
    • None: The lookup is used to display results only
    • Open (default): When the user clicks on a record in the lookup, the selected record becomes the active record in the dataset
    • Assign: When the user clicks on a record, the selected record is assigned to an alias. For example you may use a lookup to search for Product and assign the product to a Customer
  • Assign alias: When Assign is selected as the lookup action, defines the alias where the record should be assigned
  • Label: Text shown at the top of the lookup results
  • Translage values: If set to true, any code shown in the selector that is linked to a ValueList will be shown using the "Text" of the value list entry, as opposed to a code.
  • CSS Class: Used to add a custom CSS class to the lookup results
  • Open locked: If set to true, allows used to open a record which is locked by another user or process. Default value is false.

See also