In ONEWEB, Page Designer is used to create web pages. Page Designer is a powerful and feature-rich tool that allows the user to create HTML web page/website, without the need to learn the HTML language or web design skills. It uses a simple drag and drop user interface to build web pages based on a grid-based system that uses a series of containers, rows, and columns for layout and content alignment.

Page Designer comes with ready-made templates that can be modified with text or images, allowing the user to create a feature-rich web page/website that suits their specific business needs. With the Page Designer, users can add functionality such as social plug-ins, e-commerce, contact forms, payment gateways, back-end data integration with databases or any external systems, by simply integrating page UI with ONEWEB Microflows.

The Page Designer offers a feature-rich SDK for developing mobile applications using the Cordova framework. This platform supports the development of mobile applications for both Android and iOS. Additionally, users can use the integrated microflow tool to integrate the UI with other systems or services, similar to web pages. The development of mobile applications on this platform uses HTML5, CSS3, and JavaScript. Furthermore, the Page Designer offers extensive Cordova plugin support, which allows users to add external plugins to the mobile app for more complex native features. Users can also import custom plugins written in Objective-C.

The ONEWEB also provides a built-in pipeline for deploying web pages or distributing mobile apps on Google Play Store or AppStore. This makes app development, testing and distribution a seamless process using ONEWEB.

A page is a document created using HTML and identified using an URL. There are different types of web pages available

• Static Page

• Dynamic Page

Page Designer provides many built-in templates or features to help satisfy the different common scenarios required while creating enterprise level web pages or mobile applications. This section includes all these features available in Page Designer to create a dynamic web application or a mobile app.

From version ONEWEB 5.0.22.01 the Page Designer look and feel have changed. The major features added as part of this release are

• Improve feature drag and drop element in a tree structure

• Support Microflow rest version 2

• Support Multiple developers to work on pages inside the same application

• New feature : Builder setting for clear page designer build/preview app cache from the server

• New feature : Automatic save in setting page

• New feature : Display Flex

Page Designer provides built-in features to add Header and Footer to both Web pages as well as mobile applications. From version 5.0.21.01 and higher the header and footer is created as a separate page that can be included in the main pages.

Web App On Web for your pages, you can enable or disable Header and Footer by switching the "Layout of page is Standard?" control option in the Page Setting screen.

When enabling Standard Layout, the Header and Footer on the page will look like this.

From version 5.0.21.01, when you create a web application, Header and Footer pages are created by default. Users can click on the edit icon and design the header and footer for the application just like any other page.

Migrating header footer from version 4.0.19.12 or earlier If migrating your application from version 4.0.19.12 or earlier versions, you need to manually link the header and footer pages created during migration to edit your header and footer. Users can use the link option on the components landing screen or the All Components screen.

Inside the Link Component popup, choose the Filter as Page and select the Header & Footer pages shown. Click the Link button.

Now user can see the Header Footer pages in the components screen of AppSpace.

Users can click on the edit icon for the page and design the header just like any other page.

Mobile App In Mobile Application, Header and Footer are components. You can drag and drop them into PageContent as per required.

Page Designer allows users you to load image dynamically from database. To display image in page, user can simply drag and drop a component image and integrate it with Microflow for web application. For mobile application, you are not required to use microflow because you can use local database instead.

Create Microflow to load image from database First create the Business Object.

Drag and drop Start node, Database node and End node. Then link them like image below

Double click database node and open BusinessObject tab, select the Output checkbox.

Open Database Parameter tab and enter the data as shown below (the database command can change depending on user table). Click on Open Mapping Parameter. NOTE: When retrieve binary data from database make sure to retrieve this information as base64 encoded data. (Encoding command 'data:image/jpg;base64, '||encode(img_data, 'base64') AS img)

Click on link between Mapping towards Output. Add Parameters under DatabaseDummyObject then map DatabaseDummyObject to Activity BO as shown in image below. And don't forget to click Done.

Display an image on Page UI from Microflow Drag and drop image component to the design screen.

Click on Add Action List ‘+” button. Select Microflow tab, Microflow project and process that you had created. Write Event as ‘Load’. Click Save.

Build your application to verify output results.

Page Designer provides some built-in navigation techniques to let you link your page easier.

HyperLink You can link your page with another website by clicking the object that you want to link, opening the style tab, choose the link type as to put the link from another website into the space.

Another Page You can link your page to another page in the Application by clicking the component that you want to link, opening the style tab, choose the link type as to point to another page in your application.

Tab (Web) Page Designer provides a UI element called “Tab” that helps you to set up tab navigation. Drag tab from the menu bar in tab components and drop into the space to create tab navigation.

You can view and edit detail inside by clicking on the tab and the menu bar will show on the top of the screen Click Show to view details of the tab that you select Click Add to add more tab Click Remove to delete tab

Tab (Mobile) Page Designer also provides Tab navigation for Mobile applications. To create a tab structure, the user has to create a new page and choose the Tab template in the page type

The system will generate a default tab menu page for the user.

Users can configure the tabs and set the page for each tab as per their requirements.

Menu (Mobile) Page Designer provides Menu navigation for Mobile applications. To create a menu, the user has to create a menu page and choose the Drawer template in the page type

The system will generate a default menu page for user.

User can modify the contents of the page as per their requirements.

To set the default landing page for the menu. Click on the Splitter component and set the Default page property and the swipe side property.

Now choose each list item component and set the link to set the action for the menu item.

This feature supports translating the Page Designer screens. Currently, Switch language in Page Designer support just two languages which are English and Japanese.

Click About button to open pop-up

Select language between English and Japanese from drop-down list.

Example designer screens are shown below, if you switch Page language to Japanese.

The Signature pad is a mobile component to sign and save signatures to the database. Users can simply drag and drop the Signature Pad element into the design screen.

Now map the Signature Pad element to Page State Parameter to save the value to the state.

Now on click of the Save button in the element, the signature is saved as a base64 encoded image to the State parameter.

Besides system icons, you can upload custom icons with file format as SVG. Currently Page Designer do not support multi color icon.

Open RESOURCES tab and choose Icons sub tab

Click Upload Icon then select icon files or Drag and Drop icon files into the screen

Now these icons are available for use inside the Page Designer.

Besides system fonts, user can upload custom fonts in file formats such as TTF, OTF or WOFF.

How to upload:

Click on the RESOURCES Tab and choose WEBFONTS sub tab

Click Upload Fonts then select font files or Drag and Drop font files into the screen.

Now, new fonts are available to be used inside the Page Designer fonts section.

Pass Parameter is the feature to pass parameter from one page to another page. Given below are the steps to pass parameter from one page to another page.

Create two pages in Page Designer Page1 and Page 2 and then create Page state parameters in Page2.

Create label fields in Page2. Map these fields to the page parameters created.

Now open Page1 and create Page State Parameter

Place input fields on the page and map them to state parameters

Set value on the Query parameter screen

Save and build application.

Testing:

On Page Runtime, enter data in text field and click button 'To Page2' to redirect to Page2

Value of first name and last name is shown in Page2

From version 5.0.21.01, Page Designer introduces a new page structure window on the left panel. User can view and interact with the component layout in this panel. It looks like the following. It shows the component hierarchy as well as any page actions configured on the component as well as any data mapping on the component.

Users can also use this panel to drag and drop new components or to rearrange existing components. Users can also choose the element from this panel to edit the component properties.

Design mobile app themes with ONEWEB Theme Designer. Theme designer helps you to create and modify themes for your apps. You can adjust themes for different resource classifiers. It also helps you visualize the effect of color changes on common UI elements. Below given are the steps to create your own themes on the ONEWEB platform.

Open Page Designer, Click on Theme Designer menu Click Create New Theme (or the user can click on the existing theme in the theme list to edit)

Input theme name and click Start Design

You can design a theme for 14 categories and the Default Theme inside the theme designer is shown as below :

Click Save, and the new theme will start to display in the theme list.

How to set theme to mobile application Open the mobile application and click on Setting

Choose the theme in the Theme field to select a theme

Select a theme, and then click Update Open a page, drag and drop components to see the new theme in action.

From Local Storage, you can sync data with the database on server and this can be configured by yourself. Syncing feature is used to ensure that the same set of data is used across all devices.

How to enable syncing When creating the collection user can choose if they want to sync data by enabling Support Two-ways Data Sync? property. Users can specify the type of sync service as Manual only or Automated. The information required to be entered by the User is shown below.

If the user chooses Manual sync, they can create a button to sync the table and call localStorageSync function inside the JavaScript.

Page Designer provides translation for producing page content in multiple languages for web or mobile applications.

How to support multiple languages on Page Go to the TRANSLATION tab

Click Add Key to add a new Translation Key

Click Add language and select the languages that you want to use on your page.

Enter key, and the word translations for it in each corresponding language.

Set default language

Open the page where you want to use the languages.

Create button to switch language

Add JavaScript on buttons to translate text and map it to the click action of the buttons.

Save and build the application

Push Notification is similar to SMS but the message of notification is sent through an installed application in real-time to every user who has installed the application and also has enabled the receipt of these messages, no matter whether the mobile is Android, or iOS. For example the notification in Line, Facebook, or Instagram. In the Page Designer, the user can enable the push notification plugin and configure notification by uploading Google Service from Firebase Cloud Messaging if there is a need to enable push notification for the application. The User also needs to integrate the page with Microflow (which provides a Push Notification node) to produce push notifications on the page.

How to enable the Push notification plugin

Below is the configuration required in the Push Notification node inside Microflow For more details on the Push Notification node please refer to the Push Notification Node section under Microflow.

Page Designer has a built-in feature that allows for the creation of a local database. This database is specific to the mobile device where the application is being used. The designer has the ability to design tables, manage columns and data within Page Designer while creating the mobile application. This feature is particularly useful for offline storage of data, particularly in areas with poor network connectivity or no network access. Additionally, there is an option for local storage to synchronize with the server database once the network connection is restored.

Steps to create local database in mobile application Click on Database icon then click Plus icon to create table

Enter collection name and select collection space. Click Start Design. For sync data please refer to Sync Service in Page

Add columns to the table and enter data

Click Save and the table will be shown on the left side under Database.

Click on the Export DDL icon to export DDL and create a sync table on the server database. (If the user chooses to sync database with server)

How to use this local table to display data on screen Below are the steps to display data from local storage on the screen

Users can use the Add Action feature on the Page to read from the local database. Add an action on the load event of Page Content

Map the Card element on the page to the table read from the database using connect to DB icon.

Map the child fields within the card to the data fields in the table.

Add button to sync data with server DB, if the sync option is enabled.

Add JavaScript to sync table

When you build the app and run it, it will display the data from the local DB as shown below:

On-click of the Sync button, the system will display more data from the server as the server has more data.

Local Notification works like a reminder application in mobile phone and is local to your mobile application only. Currently the only way to configure is manual. You have to configure topic of notification, any details, and the time of notification. You have to configure all the details for notification by using JavaScript and the plugin for local notification is provided in Page Designer as shown below.

Page Designer provides features to add custom directives to any element on the screen. These directives are essentially custom properties added to an element. This section shows how to add a PGD directive to an element on Page Designer.

How to add: Open your Page in Page Designer. Click on the element for which you want to add the directive.

Click on the Setting and Data tab on the property editor. Click button "+ Add Directive" Click on the Add (+) icon

Enter the attribute you want to add. And choose the value. Users can set a static value to the property or set a value from State. If setting value from state, use syntax {{State.parameterName}}. Click Done once finished

Now save and build the page. On inspection, you can see the attribute is being added to the HTML tag.

Uses of PGD directives: PGD Directives can be used to add custom settings to the element. For e.g. to hide element based on value user can use the ng-hide directive.

Users can use ng-value to add value to an element on condition.

Users can also add value from State or Store.

Users can use ng-class to set class from the value on State or Store.

Splash Screen is the graphical control element consisting of an image, a logo, or a current version of an application. It usually appears when an installed mobile application is launching.

Open the SPLASH SCREEN section for the mobile application

Users can choose by Device or Choose the same for All

Upload image for splash screen

App Icon is the visual identity of your application, the icon used for the app in the App drawer. You can find them on the device home screen as well as the app shortcut.

Open the App Icon section for mobile applications.

Users can choose different icons for iOS and Android.

Drag & Drop the image file or browse and choose the image to be used as an icon.

Users can also upload different images with different resolutions for different screen sizes.

Page Designer provides a Plugin screen for adding a specific feature to existing functionality or adding new features to your application.

Open the APP CONFIG tab then click Plugin

Enable the plugin that you want to use and Disable if not

Click on Add More Plugin, if you want to install a new plugin

Click on the Install button to install any already available plugin.

Users can also attach custom plugins by clicking on the +Add Plugin button

Page Designer can be used to create Charts using the ChartsJS extension. This section explains how to create charts on Page Designer.

Open the Page Designer home page and go to the RESOURCES tab

Click on the Extensions sub-tab and click on the button Add more extension.

Drag & Drop the extension file or browse and choose the PGDChart extension file.

Click on the Install button for the ChartJS extension. Close the window.

Make sure the extension is added and enabled on your application.

Now open the page where you want to create the chart.

Drag and drop the chart element under the CHART panel into the designer screen.

Now click on the chart properties tab and enter the properties for the chart

Now save and build an application to view the real-time data on the chart from Microflow O/P.

From version 5.0.21.01, Page Designer provides a new feature called the UI Kit to create reusable components that can be shared across multiple pages. The reusable component has to be first marked as a UI Kit. To create a UI element as a UI Kit please use the UI Kit menu on the left menu panel. Steps to create UI Kit on page

Select the UI component you want to create as a reusable UI Kit.

Click on the UI Kit icon on the left sidebar menu.

Click on the ‘+’ icon on the UI KITS popup.

In the popup enter the name of the Kit you want to create.

And click the 'Create' button.

Once it is successfully created, a green pop-up will appear. The generated component will appear under the 'User Customize' tab in UI KITS pop-up window.

Users can use it by dragging from the UI KITS pop-up window and dropping it at the desired location inside the PageContent.

Users can also remove the UI Kits from the app by removing them from the UI Kits popup window.

Export and Import UI Kits from other apps Once a user creates a UI Kit, he can use it on the current page or he can export and import it to any other application in the ONEWEB ecosystem. To export or import UI Kits, a new tab has been added under the Resources tab on the Page Designer Home page.

To Export the UI Kit from an app, click on the Export UI Kit button.

Select the UI Kit components to be included in the export package. Enter the package name and namespace as well. Click Export. Choose the folder where you would like to save the UI Kit.

Once it is successfully exported, a green pop-up will appear.

To add UI Kits, click on the Add UI Kits button. And choose the package from your system folder.

Once added it will show the package in your list of UI Kits.

To use Imported UI Kits inside Page Designer,

Go to the page where you want to add the UI Kit.

Click on the UI Kit menu on the left sidebar

Click on the tab for External UI Kits inside the popup for UI Kits

It will list the available UI Kits imported to your application.

You can drag it from the UI Kits popup to the desired location inside your Page Content

Page Designer provides features to support user-defined components as extensions in the Designer. It is similar to the Charts extension but can be developed by anyone. The extensions developed are specific to either web or mobile applications. This section explains how to include an available component extension to your page.

Open the application and go to the SETTINGS tab in Page Designer

Click on EXTENSIONS and click the button and Add more extensions

Drag & drop your extension file or click on the choose file button and browse for your extension file in ".pgx" format.

Click on the Install button for your extension. In this example, it is the Table Editor. Close the window.

Make sure the extension is added and enabled on your application.

Now open the page where you want to add the table.

Drag and drop the table element under the Table Editor panel into the designer screen.

Now click on the table properties tab and enter the properties for the table

Users can Add Data to the table or configure the Table Properties from the corresponding section under the table properties tab.

Now save and build an application to view the real-time data on the table from Microflow O/P.

Formatting the UI fields is the most important aspect of any UI component. It is essential in conveying correct information to the user. Page Designer provides Expression Editor to set the format on the UI element. It uses AngularJS filter syntax to set the expression.

The User can access the Expression Editor from the Connect to Data icon. Click on Connect to Data icon and choose the Expression tab. Click the Customize expression button.

Now user can either write the required syntax expression in the Variable expression editor or click on the Field Type and Fields to choose the field to be formatted and add the format expression. User can choose from State variables as well as Microflow or Local Database fields. Users can use any valid AngularJS filter expression syntax for transforming fields. The below example is for formatting numbers.

For formatting, currency use the expression as shown below

For formatting date use the below syntax

From version 5.0.21.01, Page Designer introduces a new page structure window on the left panel. As a result, the component properties editor and other menu panels which used to be on the left panel have been moved to a popup editor.

All the previous menu panels look exactly the same except for the location. The add new component panel, UI kit panel, properties panel, image, and icon panels are all now available on the popup panel.

From version 5.0.21.01, Page Designer updated the Box model setting window to be a more UI interacting setting box. Users can increase or decrease the margin and padding by simply dragging the border on the corresponding side.

Users can alternately double click the corresponding side to open the input field to manually enter the value as well.

From ONEWEB 4.0.19.11 Page Designer provides the feature to save any page as a Template. Use the share option on the Page Designer menu to share your page as a template. This option is available on both web and mobile pages.

A page can be shared in 3 different ways.

Share within application In this case, the user can use this template on another page within the same application. For this option, the user can select the 'Share in this application only' checkbox. (This option is selected by default). Now click on the share button.

Share publicly With this option, users can share a page as a template with every single user using ONEWEB on that server. This is advisable only if using ONEWEB on-premise or on dedicated servers. If used on a shared cloud, this option is used to share different page templates as starter templates for any user. For this option, the user can uncheck the 'Share in this application only' checkbox. (This option is selected by default). Now click on the share button.

Using shared templates in your pages To use these templates on your pages, the user should go to the page where you want to use them. Click on the 'Add Component' menu and choose 'Page Templates' from the drop-down.

The User can see the list of shared pages available to him. This includes both public templates as well as the pages shared within the application. Users can choose the template to use and simply drag and drop it to the designer panel. Users can also see the preview for each available template when pausing the mouse over the template name.

Share template as an extension This option is used to share your page with other page developers. You can share these pages across applications, environments, and servers. For this, the user should click on the download icon in the Share page template dialog. This template will now be downloaded as an extension.

Users can choose the icon for the extension as well.

The extension will now be downloaded to the user's system. The user can share it with any other ONEWEB user.

How to use templates in extension format To use a template received in the extension format, the user needs to first install the extension on his application. Go to the Page Designer RESOURCES Tab and choose the Extensions sub-tab. Click on the 'Add more extension' button.

Browse and select your template extension and click on the Install button.

Once installed, the user can see it in the list of extensions available for the application. Users can enable or disable the extension in the future.

To use this page extension, go to the page where the user wants to use it. Click on the 'Add Component' menu and choose 'Page Templates' from the drop-down.

Click on the Extension tab. The User can see the list of page extensions available to him. The User can also see a preview of the extension page when placing the mouse over the extension. The User can choose the extension template to use and simply drag and drop it to the designer panel.

The System will overwrite the current page with the extension. So there is a confirmation message before it overwrites the current page.

Once the user confirms the extension is written onto the page.

User can now add a Navbar navigation to a web application by using the Navbar page template available for Web. In the create New Page window, choose the Navbar template.

User can customize the navbar page according to the requirements of their website.

Using the navbar for navigation in your pages To use this navbar templates in your pages, user should go to the header page in the application.

Click on the Page Setting menu.

And choose your navbar from the drop-down for Menu List. You can also choose to position the navbar at the top or bottom of your header bar.

If the user chooses bottom, the navbar will appear at the bottom of the header as shown below

From version 5.0.21.01, Page Designer provides a new feature called the Environment Variables to easily configure different values for different environments. Once you set a variable in the environment variables screen you can use them within your page application like a javascript variable. There are also system-level variables to set up URL for microflow and IAM2 for different environments like SIT, UAT, PRODUCTION, etc.

In the new version of Page Designer, ONEWEB provides easy positioning and helps to accurately place the dragged object on the designer canvas. For e.g. to drop a UI element below another component, the UI will guide the user with the help of blue arrows to correctly position the element as he drags it across the canvas. The current active component is also shown in an orange outline with the name.

To add the component in between two UI elements lookout for the blue arrows as shown in the image below.

If the element cannot be placed inside another component, the user will get warning messages as shown in the image below as well. Users can also see the component on the Page Structure window on the left-hand side to make sure it is the correct element.

Whenever the user creates a new snapshot or a patch the versions of the Microflow and Page change. Hence there might be multiple versions of a microflow available for users. Users can choose the version of the Microflow to be called from the page by setting the version in the Microflow settings screen in Page Designer.

Users can set the version globally to use the latest.

Or users can manually set a custom version for each microflow call from Page.

Users can now upload any dependency JavaScript file or CSS file to their application using the Dependencies option on the Page Designer home page.

Open the Page Designer home page and go to the RESOURCES tab.

Click on the Dependencies sub-tab and click button Add Resource button. Choose the dependent js or CSS file to attach to the application. The file will be listed in the dependencies section.

Users can now use the functions or CSS classes inside the pages in the application.

Now user can move an element be laid out in any flow direction, can display order reversed or rearranged at the style, and can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

Default (None use display flex)

Step Drag and drop container Drag and drop items in the container Click at container Click tab style

Direction row default: Left to right in ltr, right to left in rtl

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default)

Direction Row-reverse : Right to left in ltr, left to right in rtl

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default) Click Direction row-reverse

Direction Column : same as row but top to bottom

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default) Click Direction column

Direction Column-reverse : same as row but bottom to top

Step Drag and drop container Drag and drop items in the container Click at container Click tab style Drag display flex on the layout (Direction row and wrap don't wrap are now set by default) Click Direction column-reverse

Align flex-start : items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in the container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align flex-start

Align Center : items are centered on the cross-axis

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align center

Align Flex-end : items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align flex-end

Align Stretch : stretch to fill the container (still respect min-width/max-width)

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Align stretch

Justify Flex-start : items are packed toward the start of the flex-direction.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify flex-start

Justify center : items are centered along the line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify center

Justify flex-end : items are packed toward the end of the flex-direction.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify flex-end

Justify space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify space-between

Justify space-around : items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Justify space-around

Wrap don’t wrap (default) : all flex items will be on one line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.)

Wrap flex-start : items are placed at the start of the cross axis. The difference between these is subtle , and is about respecting the flex-direction rules or the writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap flex-start

Wrap center : items are centered in the cross-axis

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap center

Wrap flex-end : items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap flex-end

Wrap stretch : stretch to fill the container (still respect min-width/max-width)

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap baseline

Wrap space-between : items evenly distributed; the first line is at the start of the container while the last one is at the end

Step Drag and Drop Container Drag and Drop Items in the container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap space-between

Wrap space-around : items evenly distributed with equal space around each line

Step Drag and Drop Container Drag and Drop Items in container Click at Container Click tab Style Click Display Flex on LAYOUT (Direction row and Warp don't warp are now set by default.) Click Wrap space-around

From version 4.0.19.10 and higher, users can create an Application only from AppSpace. The User can then create a Page inside the Application. Once the page is created, AppSpace will redirect you to Page Designer to design the pages.

Now let us see how to create a simple Hello World page.

How to create a simple Web Page from AppSpace. To create an application on AppSpace, first log in to AppSpace and then click on the Create new app button.

When creating an application, users can create it as a Web Application or a Mobile App. Choose the WEB platform for your application and enter the details.

Click on Create button then the display will show the status create the application.

When the status shows 100% that means your application is created. Click on the Done button to close the status window

Click on the application icon to open your app. The System will redirect the user to the components page.

Click on Create Pages icon.

Enter page details and click Start Design to redirect to Page Designer.

Add New Screen is a feature that supports multi-device screens for a web application, Normally web application provides multi-screen in the design area but this feature can specifically set mobile screen.

User can use this feature in create page, When click create page you will see add screen on side bar. Click switch and click Add New Screen

After click Add New Screen will have Modal setting device screen display, Insert device name, widght, high and click save button

Device screen will show side add new screen menu, show as picture, In addition user can add more than 1 screen, When complete add screen click start design button.

When open design area, User will see new screen on top tool bar.

From version 4.0.19.10 and higher, users can create an Application only from AppSpace. The User can then create a Page inside the Application. Once the page is created, AppSpace will redirect you to Page Designer to design the pages.

Now let you see how to create a simple Hello World mobile page.

How to create a Mobile Page from AppSpace. To create an application on AppSpace first log in to AppSpace, and then click on the Create new app button.

When creating an application, users can create it as a Web Application or a Mobile App. Choose the Mobile platform for your application and enter the details.

Click on Create button to create an application.

When the status shows 100% that means your application is created. Click on the Done button to close the status window.

Click on the application icon to open your app. The System will redirect the user to the components page.

Click on Create Pages icon.

Enter page details and click Start Design to redirect to Page Designer.

Once you finish creating the page, you need to deploy your page to be accessed by an URL. For that ONEWEB provides the Build & Download button in the Application menu.

When you click on the Build & Download, wait for a few moments for it to build all the pages in your application. Once it completes, a "Build succeed" message will be displayed, indicating that the build was successful. The files will then be exported as a zip file and will download to your machine.

To preview this page on the browser, you can use the URL: http://(IP Application server)/(ApplicationCode). In this case your applicationCode is 'DemoApplication'.

To deploy this web page to the real environment, users can copy the downloaded zip file to a web server like Apache or IBM HTTP Server and map the domain for the site. Now users access the web page through the domain URL.

Security is a very important feature to be taken into consideration while developing a mobile app. Given below are a few pointers to keep in mind while developing a mobile app.

Since a Cordova application is built from HTML and JavaScript assets that get packaged in a native container, you should not consider your code to be secure.

Always validate all user inputs. All the validations should be done on server side before passing the data to backend services. Because an attacker could manipulate your HTML and JS assets.

Never cache sensitive information as it could potentially be retrieved later by an unauthorized user or application.

Use the InAppBrowser when opening links to any outside website. This is much safer than whitelisting a domain name and including the content directly in your application because the InAppBrowser will use the native browser's security features and will not give the website access to your Cordova environment.

Once inside the Page Designer screen for designing web pages, the User can follow the below steps to create a simple web page.

The system redirected the user to the page setup screen where the user can add the content to the page. For creating content, users can simply drag and drop the desired UI elements from the components panel and place them on the page.

To create a sample 'Hello World' page, click the icon to upload new images into the application and also to browse through already uploaded images. Drag the image from the images panel on the left side and drop it on the top of the Container.

Type "Hello World" instead of Template Heading

Once inside the Page Designer screen for designing web pages, the User can follow the below steps to create a simple mobile app

The system redirected the user to the page setup screen where you can add the content to your page. For adding content, the user can simply drag and drop the desired UI elements under the components panel, into the designing screen.

Now to create the sample 'Hello World' mobile page, click the icon to upload images into the application and also to browse through already uploaded images. Drag the image from the images panel on the left side and drop it on the top of the Container.

Builder Setting is feature for clear page designer build/preview cache folder on server

From version 4.0.0.19 ONEWEB Page Designer can build the mobile application as APK for android or IPA for iOS and push it to the store. The screen for page CI/CD is available in the deployment section of the mobile App. User can choose either Android or iOS. The following section explains the step-by-step procedure to upload your mobile app to the store for both Android and iOS.

To build Android App For Unsigned APK, you can the start the build immediately. But for Signed APK you need to add the following details to start the build. Keystore file “.jks” Alias name Keystore password Password. For more information on Signing the app please follow .

Signed APK can be released to internal test on Google Play Console. For that you need to do the following

• Create a Google Developer account.

• Create a Service account for project "Google Play Android Developer" and you will get an email and a private key in JSON format.

• Add user from the email which you get in step 2 and provide permission for the application.

• Upload private key (JSON) to Page Designer.

To build iOS App To build an iOS App you must have an Apple Developer account. Please follow the below steps once you have a valid apple developer account.

Create provisioning profile on Apple Developer account.

• Login to your Apple Developer account, choose Select Certificates, Identifiers & Profiles.

• Select the type of Provisioning Profile that you need and press Continue.

• Select App ID and press Continue.

• Select the Certificate you wish to include in this provisioning profile (the certificate the app was signed with) and click Continue.

• Select the devices you wish to include in the provisioning profile. The certificate is a public/private key-pair, which identifies who developed the app.

• Create a name for your profile and click Generate.

Upload Certificate and Provisioning Profile on the App in Page Designer

Now, you can build the iOS for Development/Distribution.

The built IPA for Distribution can be released to testflight on App Store.

• Enter the Apple ID, App ID and Application Specific Password to connect to App Store

Page Designer provides a feature rich SDK for developing mobile apps. It provides ad hoc tools to integrate with external systems, with databases, enable push notification or even provide offline storage. But modern-day apps require much more complex features that needs to communicate with the native platform directly.

To allow your app to use native device capabilities, ONEWEB allows importing custom plugins on the Page Designer. There is a host of Cordova plugins already available for import. But if an app requires a very specific feature, user can write their own Cordova plugins using Objective-C. Once the plugin is built and upload to github, user can import the plugin on to the mobile app settings on Page Designer.

Test and Preview App on browser

Once you finish creating the app screen in Page Designer, you can test & preview your app using a built-in utility provided by Page Designer called PlayMe. To preview, click on the PlayMe button provided on the top right of page designer screen.

It is also provided on the settings screen in Page Designer.

When you click on the PlayMe, wait for a few moments for your mobile application to build all the pages inside your application. Once it completes, a "Build successful" message will be displayed along with a URL, indicating that the build was successful. The User can now preview the App at the URL provided with the message.

To preview this page on the browser in the new tab or a new window, a user simply can simply access the URL: http://(IP Application server)/preview/(userId)/(Namespace). In this sample example, Namespace is 'com.team'.

Preview & Test App on mobile using PlayMe

Users can also download the PlayMe App from Google Play.

Once the Play Me is installed on your mobile, you can preview the ONEWEB App you created by scanning QR Code on the Play Me App.

For generating QR Code for your application, go to the Deployment tab in your Page Designer.

The System shows the QR Code to scan for the application.

Now you can preview the app on your mobile phone.