English User Guide

Screen Development

(1) Prerequisites

OS: Windows
Browser: Chrome (Version 90 or higher)
Optimal Screen Resolution: 1920 X 1080

Conventions to Remember

- < > → Refers to Action like hover, select
- [ Italic ] → Refers value to enter in the field
- → Color of each Rectangle tag denotes the appropriate content in the notes section
- Text : → Field in Image
- ⌨ → Keyboard Input
- ☑ → Check Box
- ➤ → Mouse Click
- 🔎 → Search

(2) Task : Develop the below Employee List Screen

(3) Objective

To create a screen to display the employee list of an organisation with different details and filters using the SOVA platform with the existing table employee_master. SOVA enables the user to customize the UI and logic to achieve their requirements following the main steps as listed below:

→ Design UI

→ Write Logic

→ Build and Deploy

(4) Login

Gateway of the SOVA Platform where the user needs to enter their credentials to login and use the platform to create applications.

URL : <use given url>

UserName : [<Training Id>]

Password : [Train@Sova]

(5) Home Screen

Object Designer is used to create and view created objects (i.e. Table, View, Screen, API, Batch, Rule and Library).

Object Designer also provides options like Edit, Delete and Copy to the Objects already created.

Steps :

➤ Click the icon to the left of Home to open the main navigation.
➤ Click Object Designer to open the Object Designer screen.

(6) Object Designer

Creating a new screen by selecting the template for the screen

Steps:

Add button : Mouse over the “+” icon on the right hand bottom corner of the screen. < Hover > – Icons will be displayed.

(7) Object Designer

Opening the screen creation page

Steps:

Create Screen : ➤ Click the Create Screen icon (marked in red in the image above) to open the screen creation page.

(8) Product Selecter

Enter the Product name and Module name in Product selector dialog.

Steps:

Product : ⌨[ HumanResources ] – Select value [ HumanResources ] from suggestion.
Module : ⌨[ Employee Management ] – Select value [ Employee Management ] from suggestion.
OK : ➤ Click [OK] to select the product.

(9) Screen Creation

Enter the Release Version, Function name, Description to select the list layout in screenflow.

Steps:

Release Version : ⌨[ 1.0.0 ] Select value [ 1.0.0 OPEN ] from suggestion.
Function Name : ⌨[ Employee ]. If this function name already exists in the system, enter a different function name.
Description : ⌨[ Creation of Employee List Screen ].
Screen Flow : ➤ Click [+] icon under Screen Flow to open the Screen Layout dialog.

(10) Screen Layout

Select and save the List layout.

Steps:

List : ➤ Click [List] – Screen layout will be added under Screen Flow.
Save : ➤ Click [Save] – Confirmation dialog will be displayed.
➤ Click [Yes] on the confirmation dialog – Change Request Dialog box will be displayed.

Purpose:

When selecting the list layout, default layout will be added to the UI

(11) Change Request Dialog

While creating or changing any object a Change Request will be created to capture the changes.

Click the create button to create the change request id for the screen.

Steps:

Title : ⌨[ <Append training id>_Employee List ].
Description : ⌨[ Creation of Employee List screen ].
Create : ➤ Click [Create] – To generate Change Request ID for screen.

(12) Screen Creation

Opening UI Designer for designing the User Interface by adding the component attributes and styles.

Steps:

List layout : ➤ Right Click on Screen Layout to open the context menu list.
Open UI Designer : ➤ Click [Open UI designer] – To open UI designer page.

(13) UI Designer

Below components are displayed by default in List layout.

Side menu
Header room
Header left area
Header middle area
Header right area
Row

(14) UI Designer

Drag and drop the Facet component inside the side menu.

Steps:

Search : In the Search bar ⌨[ Facet ] – Facet Component is displayed.
< Drag and Drop > : Drag and drop the Facet component in the side menu.

(15) UI Designer

Opening the view dialog for the Facet component.

Steps:

Facet Component : ➤➤ Double Click the Facet component on side menu to open Facet Properties in the Attribute panel.
View/Table : ➤ Click [View/Table] from Attribute panel to open the View dialog box.
View/Table : In View/Table ⌨[ employee_master ] – Select value [ employee_master ] from suggestion.

Purpose:

View dialog helps user to insert multiple components or multiple child components to the UI.

(16) View Dialog

Table data is displayed, Select the desired component from the list.

For our case Check the Employee ID and Designation, to use those fields in Facet.

Steps:

Employee ID : ☑ the checkbox beside Employee ID.
Designation : ☑ the checkbox beside Designation.
OK : ➤ Click [OK] – To load the selected table data in the Facet component.

(17) UI Designer

Drag and drop the Inbox list component inside the row.

Steps:

Search : In the Search bar in Component panel ⌨[ Inbox List ] – Inbox list component is displayed.
< Drag and Drop > : Drag and drop the Inbox List component on the row component.

(18) View Dialog

Opening the view dialog for Inbox List component

Steps:

Inbox List : ➤➤ Double Click the Inbox component in the row to open Inbox list Properties in the Attribute panel.
View/Table : ➤ Click [View/Table] from Properties to open View Dialog box.
View/Table : In View/Table ⌨[ employee_master ] Select value [ employee_master ] from suggestion.

(19) View Dialog

Select the required table data in the View Dialog.

Steps:

Select All : ☑ the checkbox beside Column Alias Name to display the checked columns in Inbox list component.
OK : ➤ Click [OK] to register the changes and close the View Dialog box.

(20) UI Designer

Update the width of the inbox list column.

Steps:

Child attributes : In the Attribute panel ➤ Click [Child attributes] to open Child attributes tab.
Available children : In Available children ➤ Click & Select value [ Employee Name ] from the Drop down list.
Search : In search bar in Attribute panel🔎[ width ] – Width field will be displayed.
Width field : In Width ⌨[ 350 ] – To update Employee Name column width.

(21) UI Designer

As per the final design of screen, we will be displaying image of an employee in the list. This will be achieved using the following operation.

Search the Manifest Name in the attribute section.

Steps:

Search : In the Attribute panel 🔎[ Manifest Name ] in the Search bar – Manifest Name field will be displayed.
Manifest Name : In Manifest Name ➤ Click & Select value [ Image Renderer ] from the Drop down List.

Purpose:

To display the image of an employee in the list.

(22) UI Designer

In the final design of screen, we will be displaying the active status of an employee with the tag in the list. This will be achieved using the following operation.

Search the manifest name and set the inbox list column as Tag Renderer.

Steps:

Available children : In Available children ➤ Click & Select the value [ Active Status ] – Available attribute data and style data will be displayed.
Search : In Search bar 🔎[ Manifest Name ] – Manifest Name field will be displayed.
Manifest Name : In Manifest Name ➤ Click & Select value [ Tag Renderer ] – Tag Renderer value will be set for the Active status column.

Purpose:

To display active status of an employee with the tag in the list.

(23) UI Designer

Align the Active status column as center.

Steps:

Search : In the Search bar in Attribute panel 🔎[ Data Align ] – Data Align field will be displayed.
Data Align : In Data Align ➤ Click & Select value [ center ] – Active status column will be aligned to center.
Widget Icon : ➤ Click >> to close the Attribute panel.

(24) UI Designer

Click the Save button to save the created screen. A Toaster message will be displayed at the bottom left corner of the screen confirming that your changes have been saved.

Steps:

Save : In the Toolbar ➤ Click Save – UI designer will be saved.
Toaster message : A Toaster message will be displayed as ”Saved Successfully”.

(25) UI Designer

Drag and drop the Close button in Header left area.

Steps:

Search : In the Component panel 🔎[ close button ] – Close button will be displayed.
< Drag and Drop > : Drag and drop the Close button on the Header left area of the Application Canvas – Close button will be displayed in the Header left area.

(26) UI Designer

Drag and drop the Stats Label on right side of the close button.

Steps:

Search : In the Component panel 🔎[ Stats Label ] – Stats label will be displayed.
< Drag and Drop > : Drag and drop the Stats Label on the Header left area(right side of close button) of the Application Canvas – Stats label component will be displayed in the Header left area.

Purpose:

To display the list item count.

(27) UI Designer

Drag and drop the Search text input component in Header middle area.

Steps:

Search : In the Component panel 🔎[ Search Text Input ] – Search Text Input component will be displayed.
< Drag and Drop > : Drag and drop the Search Text Input on the Header middle area of the Application Canvas – Search Text Input component will be displayed in the Header middle area.

Purpose:

To perform search operation.

(28) UI Designer

Set the Example text for the search text input component.

Steps:

Search text input : ➤➤Double Click – To open Search text input Properties on right side.
Search : 🔎[ Example Text ] – Example text will be displayed.
Example Text : ⌨[ Search By Employee ID, Designation, Employee Name, etc ] – Example text will be updated in the search text input component.

(29) UI Designer

Click the Save button to save the created screen. A Toaster message will be displayed at the bottom left corner of the screen confirming that your changes have been saved.

Steps:

Save : In the Toolbar ➤ Click Save – UI designer will be saved.
Toaster message : A Toaster message will be displayed as ”Saved Successfully”.

(30) UI Designer

Navigate to Logic Designer page.

Logic Designer – To write a logic for the Designed Screen.

Steps:

Logic Designer : In the toolbar ➤ Click & Select value [ Logic Designer ] – To open Logic Designer page.

(31) Logic Designer

We need to create a variable to hold the data that will be displayed as employee list .

To do this Open Variables Tab for creating a variable.

Steps:

Variables : In the left panel ➤ Click the Variable tab to create a variable.
Add Button : ➤ Click on [+] icon to open the Variable Addition dialog box.

(32) Logic Designer

To Create a variable by filling the Data type and Variable Name.

Steps:

Data type : In Data Type ⌨[ Integer ] Select value [ Integer ] from suggestion.
Variable Name : In Variable Name ⌨[ Inboxlist0Offset ].
Save and Close : ➤ Click [ Save and Close ] to save the variable and close the dialog box.

Purpose:

To store the offset value, this offset value will be used to perform lazy loading.

Lazy loading : Loads 50 items initially then append 50 items once after scroll to reach end of list.

This helps improving performance in loading the data.

(33) Logic Designer

Variable will be created successfully and toaster message will be displayed in the left panel

(34) Selection of employee data from the database

In the application, we will be loading the data into the Employee list based on the below 3 cases:

When the screen is loaded
When some values are entered in the Facet fields
When some values are entered in the search field

In all the above cases, the operation that happens in the background is the same. i.e, select the data based on the search criteria and list it in the screen.

We can write a single SUBROUTINE and use that in all three cases.

Let us create a Subroutine now.

(35) Logic Designer

Click + Button to open a Subroutine dialog box for create a subroutine.

Steps:

Sub Routine : In the left panel ➤ Click Sub Routine tab to create a Subroutine.
Add Button : ➤ Click [+] icon to Open a Sub Routine Create dialog box.

(36) Logic Designer

Enter Subroutine Name.

Steps:

Sub Routine Name : In Sub Routine Name ⌨[ nnInboxList0Load ].
OK : ➤ Click [OK] to save the Sub Routine name.

Purpose:

Creating the Sub Routine that can be used in programs wherever that particular task need to be performed.

(37) Logic Designer

Sub Routine will be created successfully in the left panel

(38) Logic Designer

Click in between the Arrow line to Open the Block Description.

Steps:

Arrow button : ➤ Click on the arrow to create a Block.

Purpose:

Adding new block enables user to enter different statements.

Adding new statement helps user to perform different operations.

(39) Logic Designer

Search Input Keyword.

Steps:

➤➤ Double Click Inside the created block to list the suggestion.
Search : 🔎[ Input ] – Select value [ INPUT ] from suggestion.

Keyword:

INPUT – To get the input parameter for the subroutine.

Purpose:

To fetch the data from the Select keyword based on offset value.

(40) Logic Designer

To Enter the Param Key value.

Steps:

Param Key : Under Param Key ⌨[ #InboxList0offset ].
OK : ➤ Click [OK] to Get the input parameter and to close the Input dialog box.

Purpose:

This value will be used to perform the Lazy Loading.

(41) Logic Designer

Creating the List variable

Steps:

Variables : ➤ Click Variables on the left panel to create a variable.
Add Button : ➤ Click the [+] icon to open the Variable Addition dialog box.

(42) Logic Designer

To create a variable for list value.

Steps:

Data Type : In Data Type ⌨[ List ] Select value [ Integer ] from suggestion.
Variable Name : In Variable Name ⌨[ Inboxlist0FacetList ].
Save and Close : ➤ Click [Save and Close] to save the variable and to close the dialog box.

Purpose:

Creating a variable to assign facet conditions based on the facet change.

(43) Logic Designer

New variable will be added and a toaster message will be displayed.

(44) Logic Designer

Creating a new block in subroutine flow

Steps:

Subroutine : ➤ Click the Sub Routine tab in the left panel – Sub Routine tab will be displayed.
nnInboxlistLoad0 : ➤ Click nnInboxlistLoad0 – Subroutine flow will be displayed.
Arrow : ➤ Click the Arrow below the Block – New block will be created.

(45) Logic Designer

Search Select Condition Keyword.

Steps:

Search :➤➤Double click the newly added Block and ⌨[ select_condition ] – Select value [ SELECT_CONDITION ] from suggestion.

(46) Logic Designer

To Write a condition for mapping the data for facet operation.

Store the values in output variable.

Steps:

Description : In Description ⌨[ Mapping the data ]
Output Variable : In Output Variable ⌨[ #Inboxlist0FacetList ] – Select value [ #Inboxlist0FacetList ] from suggestion.
Table/view : In Table/View ⌨[ employee_master ] – Select value [ employee_master ] from suggestion.
Select : Select [employee_name] under Column Name for delete operation
Delete : ➤ Click [Delete] to Delete [employee_name] row.
Select : Select [dob, salary, date_of_join, status] under Column Name for delete operation.
Delete : ➤ Click [Delete] to Delete [dob, salary, date_of_join, status] rows.
OK : ➤ Click [OK]– Column name is mapped with facet component and condition mapping dialog will be closed.

Keyword:

SELECT_CONDITION – Used to filter the table/view data based on the filters applied on the facet.

Purpose:

Based on the condition get the count and select data.

(47) Logic Designer

Search Count Keyword.

Steps:

Arrow Button : ➤ Click the Arrow under Select_Condition – Block will be created.
Search : ➤➤Double click the newly created Block and ⌨[ count ] – Select value [ COUNT ] from suggestion.

Keyword:

COUNT – To return total no of records from the database with given conditions.

Purpose:

Fetch the record using COUNT keyword and assign to the Total Record(s).

(48) Logic Designer

Getting the number of data present in the table using Count Keyword

Steps:

Description : In Description ⌨[ Count list of data ].
Table Name : In Table Name ⌨[ employee_master ] –employee_master ] from suggestion.
Output Variable : In Output Variable [ COUNTEmployeeMaster ] will be auto filled when we select [employee_master] as table name .
Select Condition : In Select Condition⌨[ #InboxList0FacetList ] –#InboxList0FacetList ] from suggestion.
Clear : ➤ Click [x] to remove the unnecessary condition.

Purpose:

Getting the count based on the facet condition.

(49) Logic Designer

Setting the count based on the search data

Steps:

Search Data : ➤ Click Search Data tab – Search Data tab will be Focused and displayed.
Target Columns : ➤ Click Target Columns – List of columns will be displayed.Select employee_id, employee_name, designation, dob, salary, status, doj columns to perform the search operation.
Search Source : In Search Source ⌨[ $searchTextInput0 ] – ] from suggestion.
OK : ➤ Click [OK]– Data will be saved in the Count keyword and Keyword dialog will be closed.

Purpose:

To count the records based on search condition.

(50) Logic Designer

Adding the keyword inside the block

Steps:

[ + ] : ➤ Click [+] in Count Block – New block will be added and Focus is placed on newly created block.

(51) Logic Designer

Search Assign Keyword.

Steps:

Search : 🔎[ Assign ] – Select value [ Assign ] from suggestion.

Keyword:

ASSIGN – Assigning the count data to Total Record(s).

(52) Logic Designer

Displaying the count result in stats label

Steps:

Description : In Description ⌨[ Assign Count to Total Records ].
Variable Name : In Variable Name ⌨[ $TotalRecord(s) ] – [ $TotalRecord(s) ] from suggestion and Variable name will be set.
[ #COUNTEmployeeMaster ] : In Add ⌨[ #COUNTEmployeeMaster ] < Select > value [ #COUNTEmployeeMaster ] then Counted value will be set in stats label
OK : ➤ Click [OK]– Data will be saved in the Assign keyword and Keyword dialog box will be closed.

Purpose:

Assigning the output variable of count keyword to Total Record(s) component.

(53) Logic Designer

Click the Save button to save the created screen. A Toaster message will be displayed at the bottom left corner of the screen confirming that your changes have been saved.

Steps:

Save : In the Toolbar ➤ Click Save – Logic designer will be saved.
Toaster message : A Toaster message will be displayed as ”Saved Successfully”.

(54) Logic Designer

Search Select Keyword.

Steps:

Arrow Button : ➤ Click the Arrow below Assign block- Block will be created.
Search : ➤➤Double click the new block and ⌨[ Select ] – Select value [ SELECT ] from suggestion.

Keyword:

SELECT – Used to select data from database with different filters.

Purpose:

In order to load the list of the output screen we need data from the database.

With the help of SELECT keyword user can fetch data from database and load the data in inbox list component.

(55) Logic Designer

Getting the data from the table using Select Keyword and storing in Output variable

Steps:

Table Name : In Table Name ⌨[ employee_master ] –employee_master ] from suggestion.
Output Variable : In Output Variable [ SELECTEMPLOYEEMASTER ] will be auto filled.
Offset : In Offset ⌨[ #InboxList0Offset ] – #InboxList0Offset ] for Offset value to be set.
Check Box : Under Select Column all the column names are checked automatically.

Purpose:

Getting the records from database and storing in output variable.

(56) Logic Designer

Getting the output from the table based on the select condition

Steps:

Condition : ➤ Click the Condition tab – Condition tab will be displayed.
Select condition : Under Select Condition ⌨[ #InboxList0FacetList ] – [ #InboxList0FacetList ] then Select condition value will be set.

Purpose:

Adding the condition to select the records based on facet condition.

(57) Logic Designer

Setting the search option in Advanced Condition tab

Steps:

Advanced : ➤ Click Advanced Condition tab – Advanced Condition tab will be Focused and displayed.
Search Source : ⌨[ $searchTextInput0 ] –$searchTextInput0 ] from suggestion.
Target Columns : ➤ Click Target Columns – List of columns will be displayed.Select employee_id, employee_name, designation, dob, salary, status, doj columns to perform the search operation.
OK : ➤ Click [OK] – Data will be saved in the select keyword and Keyword dialog box will be closed.

Purpose:

Adding the columns on which the filter operation is to be performed.

(58) Logic Designer

Search Load Keyword.

Steps:

[ + ] : ➤ Click [+] inside Select block – New block will be created.
Search : ➤➤Double click the new Block and ⌨[ Load_Collection ] – Select value [ LOAD_COLLECTION ] from suggestion.

Keyword:

Load – To load the selected data in inbox list component

Purpose:

To Load the selected records in inbox list component based on renderer.

(59) Logic Designer

Loading the table data in inbox list component.

Steps:

Description : In Description ⌨[ Load data in Inbox List ].
Target Component : In Target Component ⌨[ $InboxList0 ] – Select value [ $InboxList0 ] from suggestion.
Highlight Data : In Highlight Data ⌨[ $SearchTextInput0 ] – Select value [ $SearchTextInput0 ] from suggestion.
Renderer icon : ➤Click Renderer icon beside SELECTEmployeeMaster.employeeName – Renderer properties will be displayed.

Purpose:

Loading the data for each column based on output variable of SELECT keyword in Inbox list component.

(60) Logic Designer

Setting the image renderer properties.

Steps:

Image Source : ➤➤ Double Click below the Image Source column and ⌨[ #SELECTEmployeeMaster.employeeName ] – Select value [ #SELECTEmployeeMaster.employeeName ] from suggestion.

Purpose:

To display initial letter of the employee name as image.

(61) Logic Designer

Setting the image renderer properties

Steps:

Round Type : ➤➤ Double Click below the Round Type column – Suggestion will be listed.
Round Type : [ true ] – Select value [ true ] from suggestion.
Data : ➤➤ Double Click below the Data column – Suggestion will be listed
Data : ⌨[ #SELECTEmployeeMaster.employeeName ] – Select [#SELECTEmployeeMaster.employeeName ] from the suggestion – Value will be set for data field.
OK : ➤Click – To update Renderer Option

Purpose:

To display the image as round type and display the records of employee name column in Inbox list component.

(62) Logic Designer

Setting the Tag renderer properties

Steps:

Renderer icon : Under the Value/Field column, go to [ #SELECTEmployeeMaster.status ] and ➤Click the Renderer icon beside it – Renderer Option screen will be displayed.

(63) Logic Designer

Setting the Tag renderer for the Active Status column

Steps:

Use Condition : ➤ Click Use Condition – Condition column will be displayed.
[ Add ] : ➤ Click [Add] – 2 rows will be added.
Data : ➤➤ Double click the first row under the Data column and [ Active ]
Data : ➤➤ Double click the second row under the Data column and [ Inactive ].
Condition : ➤ Click the Renderer icon to the left of Active – Render condition dialog box will be displayed.

Purpose:

Displaying the status based on the Boolean value.

(64) Logic Designer

Setting the Tag Renderer Condition

Steps:

Add : ➤ Click Add – Drop down list will be displayed.
Select [ Condition ] – Condition fields will be displayed.
In the first box ⌨[ #SELECTEmployeeMaster.status ] – Suggestion will be displayed as list.
Select [ #SELECTEmployeeMaster.status ] – Value will be set.
➤ Click the second box and from the drop down list select [ = ] (equal to operator) – Value will be selected.
In the third box ⌨[ true ] – Suggestion will be displayed.
Select [ true ] – Value will be selected.
OK : ➤ Click [OK] Tag Renderer condition will be set.

Purpose:

If Boolean value is set as true then Status column is displayed as Active.

(65) Logic Designer

Opening the Tag Renderer condition for Inactive data

Steps:

Renderer icon : ➤ Click the Renderer icon to the left of Inactive – Render condition dialog box will be displayed.

(66) Logic Designer

Setting the Tag Renderer Condition

Steps:

Add : ➤ Click – Drop down list will be displayed.
< Select > value [ Condition ] – Condition fields will be displayed.
< Enter > value ⌨[ #SELECTEmployeeMaster.status ] – Suggestion will be displayed as list.
< Select > value [ #SELECTEmployeeMaster.status ] – Value will be set.
Drop down field ➤ Click & Select value [ = ] (equal to operator) – Value will be selected.
< Enter > value ⌨[ false ] – Suggestion will be listed.
false ] from suggestion.
OK : ➤ Click – Tag Renderer condition will be set.

Purpose:

If Boolean value is set as false then status column is displayed as Inactive (refer slide number 100)

(67) Logic Designer

Setting Background color and Text color based on the Data

Steps:

Background Color : In Active data field ➤➤ Double Click on Background color field – Suggestion will be displayed as list.
Background Color : ⌨[ “#19be6b” ] – Select value [ “#19be6b” ] from suggestion.
Background Color : In InActive data field ➤➤ Double Click on Background color field – Suggestion will be displayed as list.
Background Color : ⌨[ “#cccccc” ] – Select value [ “#cccccc” ] from suggestion.
Text Color : In Active data field ➤➤ Double Click on Text Color field – To display Cursor inside the Text Color field.
Text Color : ⌨[ “#ffffff” ]- Select value [ “#ffffff” ] from suggestion.
Text Color : In Inactive data field ➤➤ Double Click on Text Color field – To display Cursor inside the Text Color field.
Text Color : ⌨[ “#000000” ] – Select value [ “#000000” ] from suggestion.
OK : ➤ Click – To update the Render option for the Active status column

Purpose:

Adding the background color for Active and Inactive status.

(68) Logic Designer

Saving the Inbox list data

Steps:

OK : ➤ Click – Updated data will be saved in load component and Load component will be closed.

(69) Logic Designer

Click the Save button to save the created screen. A Toaster message will be displayed at the bottom left corner of the screen confirming that your changes have been saved.

Steps:

Save : In the Toolbar ➤ Click Save – Logic designer will be saved.
Toaster message : A Toaster message will be displayed as ”Saved Successfully”.

(70) Calling the subroutine at appropriate places

With the above steps we created a subroutine to perform the data selection and display it in the list.

In the upcoming slides we shall write the logic to call and execute the subroutine at below scenarios.

On loading the screen
When Facet data is changed
When the Search data is entered

(71) Logic Designer

Click Initial Load and Search CALL_SUB Keyword.

Steps:

Initial Load : In the toolbar ➤ Click Initial Load – Initial Load flow will be displayed.
➤ Click the arrow button – Block will be created.
Search : ➤➤ Double click the Block and ⌨[ call_sub ] – Select value [ CALL_SUB ] from suggestion.

Keyword:

CALL_SUB – Use to call subroutine.

Purpose:

While Loading the page the subroutine is to be called.

(72) Logic Designer

Enter the name of the created subroutine in the Sub Routine name field and Click ok.

Steps:

Description : In Description ⌨[ Call Subroutine nnInboxList0Load ].
Sub Routine Name : In Sub Routine Name ⌨[ nnInboxList0Load ] Select value [ nnInboxList0Load ] from suggestion.
OK : ➤ Click [OK] – Call Logic will be created and call logic dialog will be closed.

(73) Logic Designer

In the screen fields, right click on facetNavigation0 and click Facet_Change event to perform filter operation.

Steps:

Screen Fields : ➤ Click the Screen Fields tab – Screen Fields tab will be Focused and displayed.
facetNavigation0 : ➤ Right Click on facetNavigation0- Facet component events will be listed.
FACET_CHANGE : ➤ Click FACET_CHANGE – Facet Change event will be added in the Facet component and empty flow will be displayed.

Purpose:

Any changes in facet filter then Facet change event is triggered.

(74) Logic Designer

Calling the Subroutine in new block

Steps:

➤ Click the arrow – Block will be created.
Search : ➤➤ Double click the Block and ⌨[ call_sub ] – Select value [ CALL_SUB ] from suggestion.

Purpose:

When Facet Change event is triggered then subroutine is called (refer slide number 97).

(75) Logic Designer

Enter the name of the created subroutine in the Sub Routine name field and Click ok.

Steps:

Description : In Description ⌨[ Call Subroutine nnInboxList0Load ].
Sub Routine Name : In Sub Routine Name ⌨[ nnInboxList0Load ] Select value [ nnInboxList0Load ] from suggestion.
OK : ➤ Click [OK] – Call Logic will be created and call logic dialog will be closed.

(76) Logic Designer

In the screen fields, right click on InboxList0 and click Table_BEFORE_LOAD event.

Steps:

InboxList0 : In the left panel ➤ Right Click on InboxList0 – To list the event for Inbox List component.
TABLE_BEFORE_LOAD : ➤ Click TABLE_BEFORE_LOAD – Table Before load event will be added and Empty flow logic will be displayed.

Purpose:

To perform LazyLoad, TABLE_BEFORE_LOAD event will be triggered when vertical scroll reaches the end of inbox list.

(77) Logic Designer

Search GET_COMP_ATTRIBS Keyword.

Steps:

➤ Click the arrow – Block will be created.
Search : ➤➤ Double click the Block and ⌨[ Get_comp ] – Select value [ GET_COMP_ATTRIBS ] from suggestion.

Keyword:

GET_COMB_ATTRIBS – Getting the Attribute’s value of a particular component.

Purpose:

To get the current item count of the inbox list component. This will be used to fetch next set of items.

(78) Logic Designer

Getting the current count value from Inbox list component

Steps:

Output Variable : In Output Variable ⌨[ #InboxList0offset ] Select value [ #InboxList0offset ] from suggestion.
Component : In Component ⌨[ $inboxList0 ] Select value [ $inboxList0 ] from suggestion.
Attribute : In Attribute ⌨[ currentCount ] Select value [ currentCount ] from suggestion.
OK : ➤ Click [OK] – Current count data will be stored in the Output variable and Get attributes dialog will be closed.

Purpose:

Getting the current count of the inbox list component and storing the value in output variable.

(79) Logic Designer

Calling the Subroutine in new block

Steps:

➤ Click the arrow below GET_COMP_ATTRIBS Block – Block will be created.
Search : ➤➤ Double click the Block and ⌨[ call_sub ] – Select value [ CALL_SUB ] from suggestion.

Purpose:

Calling Subroutine to load list items.

(80) Logic Designer

Enter the name of the created subroutine in the Sub Routine name field and Click ok.

Steps:

Description : In Description ⌨[ Call Subroutine nnInboxList0Load ].
Sub Routine Name : In Sub Routine Name ⌨[ nnInboxList0Load ].
Value : ➤ ➤ Double click under Value column and ⌨[ #Inboxlist0Offset ] and Select value [ #Inboxlist0Offset ] – Value will be selected.
OK : ➤ Click [OK] – Call Logic will be created.

Purpose:

Passing the offset value through subroutine parameter.

(81) Logic Designer

In the screen fields, right click on SearchTextInput0 and Click Input event.

Steps:

SearchTextInput0 : In the left panel ➤ Right click on SearchTextInput0 – To List the event for Search text input component.
INPUT : ➤ Click Input – Input event will be added in the Search Text Input Component and empty flow logic will be displayed.

Purpose:

While entering the value in search text input then INPUT event is triggered.

(82) Logic Designer

Calling the Subroutine in new block

Steps:

➤ Click the arrow – Block will be created.
Search : ➤➤ Double click the Block and ⌨[ call_sub ] – Select value [ CALL_SUB ] from suggestion.

Purpose:

When Input event is triggered, subroutine is called.

(83) Logic Designer

Enter the name of the created subroutine in the Sub Routine name field and Click ok.

Steps:

Description : In Description ⌨[ Call Subrotuine nnInboxList0Load ].
Sub Routine Name : In Sub Routine Name ⌨[ nnInboxList0Load ] select value [ nnInboxList0Load ] from suggestion.
OK : ➤ Click [OK]– Call logic dialog will be closed.

(84) Logic Designer

In the screen fields, right click on SearchTextInput0 and Click CLEARED event.

Steps:

SearchTextInput0 : In the left panel ➤ Right click on SearchTextInput0 – To List the event for Search input component.
Cleared : ➤ Click Cleared – To add Cleared event in Search text input component and empty flow logic will be displayed.

Purpose:

On Clearing the value in search text input then CLEARED event is triggered

(85) Logic Designer

Calling the Subroutine in new block

Steps:

➤ Click the arrow – Block will be created.
Search : ➤➤ Double click the Block and ⌨[ call_sub ] – Select value [ CALL_SUB ] from suggestion.

Purpose:

When cleared event is triggered then subroutine will be called

(86) Logic Designer

Create Call Logic

Steps:

Sub Routine Name : In Sub Routine Name ⌨[ nnInboxList0Load ] Select value [ nnInboxList0Load ] from Suggestion.
OK : ➤ Click [OK]– To call created subroutine.

(87) Logic Designer

Navigating to UI designer page

Steps:

UI Designer : In the Toolbar ➤ Click & Select [ UI Designer ] – UI Designer page will be Opened.

(88) Screen Save

Click save button to save the created screen and toaster message will be displayed..

Steps:

Save : In the Toolbar ➤ Click Save – UI designer and logic designer will be saved.
Toaster message : Toaster will be displayed as ”Saved Successfully”.

Purpose:

To save the UI designer and Logic designer.

(89) Activation (Build & Deploy)

Click the Activate button to start the Build and deploy process

Steps:

Activate Button : ➤ Click on the Activate button to start Build and Deploy.

(90) Activation (Build & Deploy)

Viewing the build and deploy status

Steps:

Information Button : ➤ Click on the information button to view the status of the build and deployment process. The status will refresh automatically as each step is executed.

(91) Activation (Build & Deploy)

Viewing the build and deploy status.

While a step is being executed, the status will be shown as In Progress. Once done, it will be shown as Completed.

(92) Activation (Build & Deploy)

Viewing the build and deploy status

Once all steps are done and the status of each is shown as Completed, the build and deploy process is also complete.

(93) Activation (Build & Deploy)

After the Build and Deploy process is completed, click the Launch button (marked in red) to open the deployed application

(94) Deployed Screen

Deployed Screen.