Skip to content

Create a detailed page

In this example a detailed page CustOrdDetails is created with two visual components; the record selector CustOrdSelector and the group CustOrdMainGroup.

Refer to Figure 1 below for the relation between the projection and the client. The complete example code is available at the end of this section.

Relation Projection-Client Detailed Page

Figure 1 - Relation projection - client (detailed page).

The record selector CustOrdSelector is populated with values from the entityset CustomerOrders, and the group CustOrdMainGroup is bind to the record selector CustOrdSelector.

The reason for the bind is that when records in the record selector CustOrdSelector are updated, it also needs to reflect an update of the information in the group CustOrdMainGroup.

Add the selector to the client file

  1. In the client file under the area VISUAL COMPONENTS, create the record selector CustOrdSelector, and base it on the entity CustomerOrder.
  2. Add a label for the record selector, with interpolation text for the variable value. a. The interpolation text label = "Order - $(OrderNo)"; displays the relevant ordernumber in the label when the user updates the record in the selector.
  3. Add fields to the record selector, as shown in the example code.

Add the group to the client file

  1. In the client file under the area VISUAL COMPONENTS, create the group CustOrdMainGroup, and base it on the entity CustomerOrder.
  2. Add a label for the group with the text "Basic Info".
  3. Add fields to the group, as shown in the example code.

Add the visual components to a page

  1. In the client file under the area MAIN PAGES, create a new page CustOrdDetails and base it on the entityset CustomerOrders.
  2. Add a label for the page, with interpolation text for the variable value. a. The interpolation text label = Order Details $(OrderNo)"; displays the relevant ordernumber in the label when the user updates the record in the selector.
  3. Add the record selector CustOrdSelector (visual component) to the page.
  4. Add the group CustOrdMainGroup (visual component) to the page, and bind it to the record selector CustOrdSelector. a. When a record selector and group are added like this to use the CustomerOrders, they both use the same entityset. The group CustOrdMainGroup is bind to the record selector CustOrdSelector, because it needs to update the information of that group when the record in the selector gets updated.
  5. Add a navigator entry CustOrdDetails and include the page CustOrdDetails.
  6. Add a label to the navigator entry with the text "Customer Order Details".
  7. Add the navigator entry CustOrdDetails to the main navigator.
  8. Deploy the client file. a. When the client file deploys, the entries are saved in the navigator table.
  9. Go to https://cmbpde1762.corpnet.ifsworld.com:58080/main/ifsapplications/web/page/EAPDemo/ a. When the client loads the navigator, the Customer Orders (overview page) and CustOrdDetails (detailed page) pages are available from the navigator. b. Select the detailed page "Customer Order Details". The record selector is available in the left pane, and it is possible to switch between records while the information in the group gets updated simultaneous. c. Simple controls such as text boxes, date field and enumeration fields have been added in this example.

Final result - Detailed page

Figure 2 - Final result in client

(A) - Group

This is the group CustOrdMainGroup on the page CustOrdDetails. The group shows all the records from the selector CustOrdSelector which it is bind to.

(B) - Selector

This is the record selector CustOrdSelector which is populated with values from the entityset CustomerOrders. When different records are selected in the record selector, they are reflected in the group CustOrdMainGroup.


client EAPDemo;  
component FNDBAS;  
layer Core;  
------------------------- NAVIGATOR --------------------------  
navigator {  
    entry EAPDemo toplevel at index 10 {  
        label = "EAP Demo Pages";  
        entry CustOrdOverview;  
        entry CustOrdDetails;  
}  

    entry CustOrdOverview {  
        label = "Customer Orders";  
        @DynamicComponentDependency ORDER  
        page CustOrdOverview;  
}  

    entry CustOrdDetails {  
        label = "Customer Order Details";  
        @DynamicComponentDependency ORDER  
        page CustOrdDetails;  
}  
}  

------------------------- MAIN PAGES ----------------------------  
//Dynamic dependency  
@DynamicComponentDependency ORDER  
page CustOrdOverview using CustomerOrders {  
    label = "Customer Orders";  
    list CustOrdList;  
}  

page CustOrdDetails using CustomerOrders {  
    label = "Order Details $(OrderNo)";  
    selector CustOrdSelector;  
    group CustOrdMainGroup bind CustOrdSelector;  
}  

------------------------- COMMANDS ----------------------------  

------------------------- VISUAL COMPONENTS -------------------  
selector CustOrdSelector for CustomerOrder {  
    label = "Order - $(OrderNo)";  
    field OrderNo;  
    field CustomerNo;  
    field WantedDeliveryDate;  
    field PrepaymentApproved;  
    field Objstate;  
}  

group CustOrdMainGroup for CustomerOrder {  
    label = "Basic Info";  
    field OrderNo;  
    field WantedDeliveryDate;  
    field PrepaymentApproved;  
    field StagedBilling;  
    field Objstate;  
    field PrintDeliveredLines;  
    field NoteId;  
    field PreAccountingId;  
}  

//Dynamic dependency  
@DynamicComponentDependency ORDER  
list CustOrdList for CustomerOrder {  
    field OrderNo;  
    field WantedDeliveryDate;  
    field PrepaymentApproved;  
    field StagedBilling;  
    field PrintDeliveredLines;  
    field NoteId;  
    field ObjState;  
    field PreAccountingId;  
}  

Example code - Client file with added selector, group and page components.