Create master table and master data at schema ERP_ONEWEB with below SQL. (PostgreSQL)

CREATE TABLE erp_oneweb.oneweb_benefit ( 
    id CHARACTER VARYING(20) NOT NULL, 
    travel_date TIMESTAMP(6) WITHOUT TIME ZONE, 
    project_name CHARACTER VARYING(200), 
    description CHARACTER VARYING(500), 
    amount NUMERIC(10,2), 
    status CHARACTER VARYING(20), 
    benefit_type CHARACTER VARYING(20), 
    create_by CHARACTER VARYING(100), 
    create_date TIMESTAMP(6) WITHOUT TIME ZONE, 
    update_by CHARACTER VARYING(100), 
    update_date TIMESTAMP(6) WITHOUT TIME ZONE, 
    username CHARACTER VARYING(100),
    
    CONSTRAINT oneweb_travel_alw_pkey PRIMARY KEY (id) 
);

CREATE sequence erp_oneweb.oneweb_benefit_seq 
START WITH 10 increment 
BY 10 no maxvalue no minvalue cache 20 no cycle;

INSERT INTO oneweb_benefit (id, travel_date, project_name, description, amount, status, benefit_type, create_by, create_date, update_by, update_date, username) 
VALUES ('1', '2019-07-06 15:41:38', 'AVA PROJECT', 'Taxi', 1000, 'Approved', 'Travel', null, null, null, null, 'Alisha');

INSERT INTO oneweb_benefit (id, travel_date, project_name, description, amount, status, benefit_type, create_by, create_date, update_by, update_date, username) 
VALUES ('2', '2019-07-06 15:41:38', 'AVA PROJECT', 'BTS', 500, 'Approved', 'Travel', null, null, null, null, 'Alisha');

INSERT INTO oneweb_benefit (id, travel_date, project_name, description, amount, status, benefit_type, create_by, create_date, update_by, update_date, username) 
VALUES ('4', '2019-07-06 15:42:54', 'AVA PROJECT', 'MRT', 200, 'Approved', 'Travel', null, null, null, null, 'Alisha');

INSERT INTO oneweb_benefit (id, travel_date, project_name, description, amount, status, benefit_type, create_by, create_date, update_by, update_date, username) 
VALUES ('5', '2019-07-06 15:42:55', 'AVA PROJECT', 'BRT', 400, 'Approved', 'Travel', null, null, null, null, 'Alisha');

INSERT INTO oneweb_benefit (id, travel_date, project_name, description, amount, status, benefit_type, create_by, create_date, update_by, update_date, username) 
VALUES ('6', '2019-07-06 15:42:57', 'AVA PROJECT', 'Taxi', 250, 'Approved', 'Travel', null, null, null, null, 'Alisha');

Steps to create Microflow service:

Log in to ONEWEB AppSpace and choose component as Microflow. Log in to ONEWEB platform using given Id/ password and you will be directed to ONEWEB AppSpace home page. Select your Application project. Under components, select Microflow as shown as 1 and click on “Create Flows”, a slider configuration screen would open as shown in fig1b. Give Component name i.e your micro service flow name as “Retrieve_Benefits”, and Description is (optional) as shown in fig 1b. Click on “Start Design” button.

Create Input Business Object Choose Business Object tab, and define your Input Business Object, Select “Input Process Parameter”. There are 2 blue icons appeared with it, as shown in Figure 3. Click on Add Parameter Icon as shown (1), Parameter Form window would open. Write Parameter Name as “BenefitBOin_[yourname]”

Select Parameter Type as “Object” as shown in Figure 4 and click on Submit.

Create Output Business Object Two Input Process Parameters named as “benefit_type” and “username” should be appeared under your Input BO (business object) as shown in Figure 6.

Next is to create “Output Business Object” and Add Output Business Object Process Parameters. Select “Output Process Parameter”. Click on Add Parameter Icon, Parameter Form window would open as shown in Figure 6. Write Parameter Name as “BenefitBOout_[yourname]”, Parameter Type as “Object”. Mark it as List parameter. Click on Submit.

Create Output Business Object Parameters Add Output Business Object Process Parameters. Select “Output Process Parameter. Click on Add Parameter Icon as shown in Step 1, Parameter Form window would open as same in Figure7. Add Multiple Parameters, w.r.t Parameter Name and Type as “id” (Type =>String) “travel_date” (Type =>Date), “project_name” (Type =>String), “description” (Type =>String), “amount” (Type =>Decimal), “status” (Type =>String), “benefit_type” (Type =>String) and “username” (Type =>String)”. Click on Submit.

Verify BO name and All parameters. Window will open to display all information about your Input and Output Business Objects and all Process Parameters created under each Business Objects as shown in Figure 8. Verify your Input and Output Business Object names, along with their respective Process parameter names and their respective data types. Once Verified, Click on Next.

Next is to Create a Business Process workflow. For this sample practice session, we will create a sample process using Database Activity Node. So, in this example you would learn how to configure a Database Node in microflow service to retrieve information from an existing database. Drag and Drop 3 Activity nodes – “Start”, “Database” and “End” inside your Design workflow configuration screen as shown in Figure 10.

FYI: Once you are able to retrieve information, it can be integrated with Mobile UI screen (designed in previous section 7.5.1.2) and displayed via application run time. Microflow integration with UI will be covered in next section 7.4.1.4.

Create a link between all three Activity Nodes – “Start”, “Database” and “End’ as shown in Figure 11. Save your Process.

Configure your Node Task – Database Node

Configure your Database Activity Node, Click on Database Node as shown (1) in Fig 12. Three tabs will be shown below for configuration purposes – General, BusinessObject and Database Parameter. General Tab is Optional and helps you to rename node and add description, if required. Select “BusinessObject” (1) tab, choose Input Business Object from the list, tick mark an Input checkbox (2). Click on Add Row(3), choose Output Business Object from the list (4), tick mark an Output checkbox. Click on Open Mapping parameter (5) as shown in Figure 13.

Map Input parameters of BenefitBO-input to Activity Parameter.

Click on link between Input and Mapping as shown as (1) in Figure 14. Drag and create a link between BenefitBO_input to Activity Parameter as shown as (2) in Figure 14.

Map Output parameters

Click on link between Mapping and Output as shown as (1). Drag and create a link between BO_Output to BO_Output of Output Process Parameter as shown as (2). Click on Done (3) button to save your mapping.

Configure Database Parameter Tab.

Select connection Type as JNDI as shown (1) in Figure 18. Select JNDI Name as “jdbc/application”. Select Command Type as “Select” Enter below SQL query in command "SELECT id, travel_date, project_name, description, amount, status, benefit_type, username FROM oneweb_benefit WHERE benefit_type = ? AND username = ?" Click on Open Mapping Parameter.

Create Database DummyObject Parameters here and perform mapping,

Select a link between Input and Mapping as shown (1). Click on DatabaseDummyObject as (2), and add 2 parameters as “benefit_type” and “username” as shown in step (3). Link Activity Parameters with Database Parameters as shown in step (4) & (5) in Figure 17.

Map Database Parameter back to Activity Parameter, Click on link between Mapping towards Output as (1) and Select an icon associated with DatabaseDummyObject as (2) and Add Multiple Parameters, w.r.t Parameter Name and Type as “id” (Type =>String) “travel_date” (Type =>Date), “project_name” (Type =>String), “description” (Type =>String), “amount” (Type =>Decimal), “status” (Type =>String) as shown in Figure 18. Map DatabaseDummyObject to BenefitBO_output as shown as step (3) in Figure 18. Click Done and save your settings.

Select Database Parameter tab. Review your settings and click on Done as shown in Figure 19.

FYI: Click Close on the top right corner hand side in order to close the mapping diagram page.

Click “Save” on the top right hand side on your workflow window to save your workflow configuration. Proceed to Simulation Test tab.

Perform Simulation Test to test this Service Output: Click on simulation Tab. Edit parameter in Json as following: “benefit_type”: “Travel” "username”: “Alisha” Click on Start. Verify Database w.r.t Microflow Output as shown in Figure 21.

Now if you complete the testing, and this microflow produce expected results as shown above in Figure 21. Proceed next to integrate this Microflow service with Mobile UI screen in next section.

Workforce App is a simple ONEWEB demo application to practice mobile application development using Page Designer and Microflow Designer of ONEWEB.

In this sample app you will learn the following: Create master table and master data at schema ERP_ONEWEB with SQL (PostgreSQL). Create Mobile UI's using the drag and drop capabilities of Page Designer. Create Microflow to connect and retrieve information from database. Integrate this Microflow service with designed UI's to create and see dynamic results via application run time.

Sample Mobile UI's

This section helps you to integrate your microflow service with Mobile UI - Page 2 "Benefit Page".

Microflow Integration to produce dynamic contents on your page. Open Benefit Page and select PageContent level at the bottom of your designing page. On left configuration settings, choose “Interaction and DataFlow” tab and click on Action List ‘‘+” button as shown in fig 1a. Choose Microflow, Select your project for e.g. “WorkForce_[yourname]”

Write Event as "Load" Select the process flow that you have built inside your application to retrieve benefits from database as shown 5 in Fig (1b).

Map Page state to Microflow input process parameters. Open Mapping, select Page Designer parameter and add 2 Page state parameters as type and username. Set default value for type as ‘Travel’ Set default value of username as ‘Alisha’

Click on Save button, Microflow service starts to be highlighted under ACTION LIST as shown below:

Integrate Microflow O/P with Card UI Element. Select Card on the Benefit Page as (1). Click on connect to data icon (2). Click on “Connect to Data” (3) as shown in Fig (3a). Select BenefitBOout_[yourname] and click on Connect, review your settings as shown in Fig(3b).

Microflow Integration to produce Dynamic Contents on your page. Select H1 inside column (1), click on database icon (2) as shown in fig 4a. Connect to Data configuration box will open, now enable “Data from parent” (1), Click on “Connect to Data” (2) and select item.travel_date (3) and click on Connect as shown in fig 4b. Similarly, select each heading inside columns and link it to the related respective fields. Save your settings.

Build your Application again using PlayMe button. Save and build your application using PlayMe button. UI Integration with Microflow for this page is now completed.

Once rebuild, retest your application. All data values from table in db are now expected to be appeared on your Benefit Mobile page and you should be able to see the dynamic contents on application run time, as shown below.

This sample Mobile UI consist of 2 pages - one Static and one Dynamic Page

Steps to create Mobile UI:

Login to AppSpace and start to create Application: Login to ONEWEB platform using given Id/ password and you will be directed to ONEWEB Appspace home page. Click on “Create new app” button, a slider configuration screen would open as shown in fig1a. Choose Platform as “Mobile”, App name as “WorkForce_[yourUserName]”, Abbreviation as “Demoby[yourUserName]”, Description is (optional), give Namespace as “com.team.[Application name]“ shown in fig1b. Click on “Start develop” button.

Now your application will start to appear on application list as shown below:

Click on your application, choose “Create Pages” as highlighted in Fig 2a, write component name i.e. page name as “HomePage” and hit on Start Design button as shown in fig2b.

Your final screen should appear as fig(8a).

Add Icon in Third Column - C3 Drag another drop one more icon inside third Column C3. Choose “ion-android-notifications-none” Icon from an Icon List. Set Column alignment as Right, Set Icon Size as “32px”, Icon text color as rgba (255,255,255,1). Set padding for icon as (T-14, R-5). Open TEXT panel, select a paragraph and Drag and drop inside Column C2, set text color as rgba (255,255,255,1), edit paragraph text as “Alworks”, set text font size as “20px” and column alignment as “center”. Your Final screen should be appeared as shown in fig(9a).

Now, Upload images that are required to construct Mobile Page. Please find link here to attach all required images. Download direct link: https://tinyurl.com/y3gzfqud

Add Container, BG Image and heading

Drag and drop one container inside your designing screen. Set Box height as “290px” and set container Background Image as “Easywork.jpg”. Drag and Drop heading (UI element under TEXT panel) inside container and edit text as “Easy Work”. Set rgba color as (255,255,255,1), font style as “700-bold”, font size as “20px”. Set Padding for text “Easy Work” as (T-170, L-15). Your final screen should appear as fig(10a).

Add Label Drag one label after heading text, edit default text as “for Happy Life”. Set rgba color as (255,255,255,1), font size as “16px”. Set Padding for text as (L-15). Your screen will appear as fig (11a).

Add Div, row and columns to add icons Drag one container and add grid inside it to create row and column layout. Replicate columns to create 5 columns in the layout as shown in gig (12a)

Add Icon images inside Columns Drag and drop an icon image inside column C1. Drag and Drop a Label inside column after an image icon and named it as “Clock”. Set label text size as “14px”. Set Alignment of Column C1 as center. Your designing screen will appear as Fig (13a) Repeat above steps to drag and drop other respective icons into columns C2, C3, C4 and C5. Drag and drop label inside each column and named them as “Work”, “Benefits”, “Calendar”, and “Shopping” as shown in fig (14a).

Add one Paragraph and an Image to create promotions Drag and drop a Paragraph text element below after icons and rename default text to “Promotion for employee”. Set Text font style as “700-Bold”, Text size as “15px”. Drag and drop an image “promo1.jpg: after paragraph text. Your screen should appear as Fig (15a). D rag and drop one container and create 2 columns inside it using “Grid” after promo image as shown as C1 and C2 in fig(16a). Drag a Paragraph (P1) inside column C1 and renamed default text to “Buy 1 and get 1 for employee”, text style as “600-Medium” and text size as “12px”. Drag one label and “ion-heart” icon inside Column C2. Set label text style text style as “600-Medium” and text size as “12px”. Set Icon size as “21px” and rgba color as (216,12,12,1). Set Padding for icon as (T-9, L-8) as shown as fig (16a).

Replicate UI Element to create Promotion 2. You have created one Promotion advert on your Mobile Page as shown in fig (17a) Now you can use duplicate icon to duplicate each element to create paragraph and other UI elements as shown in fig (17b). Create Promotion 2 as shown in Fig(18a). Set this Mobile Page as your “Homepage” using Page settings. Congratulations, you have successfully created your first Page.

ONEWEB also provides testing emulator application - "PlayMe" to directly perform testing on your smart phone devices. PlayMe app is currently available to download from Google Play Store.

Test your Page via PlayMe App Install PlayMe app on your android device. Go to settings and enter details as below: http://[YourPGDurl] http://[YourrPGDurl]/PageRunTime Save your settings as shown in fig(20c). Your application will start to appear on an application list.

Example:

Mobile UI - Page 2, Let's call this page as 'Benefit' Page. In this section, we will learn how to create Page 2, and establish a link between two pages. In this example, we will link page1 with page 2. Go to AppSpace, click on Add New > New pages , to add a New Page inside your Application and named it as “Benefit”. Choose Page Template as Blank. Click on Start Design as shown in fig (21a)

Add Container, Paragraph, Card and Grid to create card layout as shown in Fig (A) below. Set Page Background color as rgba (39,61,106,1). Drag and drop a “paragraph” after image I1 and rename default text to “Recent Activity”. Set text color as rgba(255,255,255,1). Set Padding as (B-15, L-15) as shown in fig(23a). Drag and drop a container and drop one “Card” inside container. Delete other default elements inside card. Add a “Grid” inside container to create row and 4 columns as shown as C1, C2, C3 and C4 inside that row. Your final screen should appear as fig(23b)

Add label and heading text - UI elements, inside columns Drag and drop a label inside column C1. Rename text as ‘DATE”. Set text color as rgba (163,163,163,1), set text size as “10Px”. Drag and drop heading text after DATE, and change text font size to “12px”, renamed default text to “11 Sep 2018“ as shown in fig(24a). Repeat same steps to create column C2, C3 and C4 as shown in Fig (24b). Use same label and heading text as shown in fig(24b)

Add other images and complete your page, same as shown in fig (25a) Drag and drop required Images inside your designing screen.

Create a link between Pages. Open your first page 1 “Homepage”. Click on Benefits Icon or any Ul element that you wanted to link. E.g.: let's say, we link Benefit icon on homepage to your second page as “Benefit Page”. Click on Benefit icon as highlighted in fig(27a). On your left configuration link panel, select page 2 that you wanted to link, e.g.: Benefit Page