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.
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¶
- In the client file under the area VISUAL COMPONENTS, create the record selector
CustOrdSelector
, and base it on the entityCustomerOrder
. - 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. - Add fields to the record selector, as shown in the example code.
Add the group to the client file¶
- In the client file under the area VISUAL COMPONENTS, create the group
CustOrdMainGroup
, and base it on the entityCustomerOrder
. - Add a label for the group with the text "Basic Info".
- Add fields to the group, as shown in the example code.
Add the visual components to a page¶
- In the client file under the area MAIN PAGES, create a new page
CustOrdDetails
and base it on the entitysetCustomerOrders
. - 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. - Add the record selector
CustOrdSelector
(visual component) to the page. - Add the group
CustOrdMainGroup
(visual component) to the page, and bind it to the record selectorCustOrdSelector
. a. When a record selector and group are added like this to use the CustomerOrders, they both use the same entityset. The groupCustOrdMainGroup
is bind to the record selectorCustOrdSelector
, because it needs to update the information of that group when the record in the selector gets updated. - Add a navigator entry
CustOrdDetails
and include the pageCustOrdDetails
. - Add a label to the navigator entry with the text "Customer Order Details".
- Add the navigator entry
CustOrdDetails
to the main navigator. - Deploy the client file. a. When the client file deploys, the entries are saved in the navigator table.
- 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) andCustOrdDetails
(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.
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.