The main feature of any powerful application is its User Interface Design with attractive pages, striking simplicity, and easy navigation. That is the reason why organizations pour millions of dollars into developing and updating their user interfaces. Using ONEWEB any user can create and maintain amazing UX/UI without much knowledge of web designing.

Let the design of the form or page hinder the site's readability The design of a smart form, website or user interface should never interfere with the user's ability to consume the content on the screen. This includes having busy backgrounds behind content or poor color schemes that hinder the form or page readability.

Busy backgrounds cause a distraction and take attention away from the content, even more so if the busy background is directly underneath the content. Also, be careful not to use color schemes that decrease the contrast of the typography on the screen (i.e. light gray type of a white background). Focus on the typography of your content to ensure issues such as line length, line height, and font choice doesn't pose issues for readability.

Hinder a visitor's ability to scan the screen As mentioned above, users and visitors alike often scan the screen quickly before settling in to read any one particular thing with focus. Users often scan for visual cues such as headings, menus, pictures, buttons, and blocks to know where they should focus their attention.

Fill the screen with non-related content Look at it this way; we do things based on a mission we give ourselves. We go inside a grocery store with the intent of buying a box of cereal. If you know your purpose, then you wouldn't go looking for your item in the toiletry aisle. Instead, you go directly to the designated aisle to find the specific item.

Users of your site or interface feel the same way. They want the content they came for without any other interference or distraction. If users are entering the information of a customer on your smart form, they don't want unnecessary fields to be shown up as mandatory and restrict them from saving the form. Similarly, while claiming the insurance on your insurance website; they don't want to see ads or recommendations to buy a new phone.

Make your visitors wait for your content to load The attention spans and patience of web users are very small. So, when they have to wait on your web page to load, they will become frustrated and likely leave your page.

With your app or site, keep in mind the impacts of your design choices on the sites loading time. Large images, lots of jQuery and animations, and loading resources from third party sites hurt your sites load time. Optimization and key design decisions that reduce site loading time will help keep your visitors on your site.

Have several things compete for attention Designing elements that have to fight for attention can also cause confusion and some nervousness in your users unnecessarily. Using visual hierarchy to design the user's flow around the screen reduces the competitive feeling of different elements. You can help them out by limiting how many call-to-actions you have on the screen, reducing or relocating ads on the site, keeping flashing and animated things to a minimum, and use headings appropriately. Also, not having things pop up at users (i.e. modal boxes) helps to keep the focus on the content.

User Experience (UX) is the feeling that people get from using any application, product or website. The User Interface (UI) is what people interact with as part of that experience. A good user interface provides a "user-friendly" experience, allowing the user to interact with the software or hardware in a natural and intuitive way. Nearly all software programs have a graphical user interface, or GUI. This means the program includes graphical controls, which the user can select using a mouse or keyboard. A typical GUI of a software program includes a menu bar, toolbar, windows, buttons, and other controls

UX Design is a more analytical and technical field, whereas UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex. Both these elements are crucial to a product as they work closely together. Undoubtedly, UX/UI design is an important aspect of doing any application work or making a website.

To ensure performance & maintainability of the UI and to overcome limitations, you need to have a smart design. If you follow the best practices, you will have less rework after the review. To help designers and users have a pleasant time and user experience without any hassle while working with UX /UI, let us go through some do’s and don’ts to look out for so that we can help them get exactly what they came for without irritation or a bad UX. We do not cover business or project scope, just pure platform UX/UI setup.

To decide whether to begin with Smart Form or Page on ONEWEB platform certainly depends on User requirement specifications. The key points that user must keep in mind before choosing Smart Form or Page for their application design requirements are:

User must choose Smart Form, when

• Data entry interfaces.

• Complex navigation is required like General Tab and 2-Tab Layer structure.

• Input data is required to submit or initiate any process flow.

• Need validations or business conditions to be applied on the data input by user.

• Forms that require integration with business process management systems.

User must choose Page, when

• Need to display static and dynamic contents on a web page (without writing any HTML).

• Page navigation is required.

• Static or Dynamic website building.

• Building community forums/ E-mail marketing.

• Actions, text or images on pages that require integration with Microflow or third-party websites.

A similar experience regardless of the device. Users/Visitors can access your smart forms and pages on their desktop, laptop, tablet or phone. A big part of user experience design is ensuring that no matter how the visitor sees your site, they are getting the same experience they would if they were to visit from another device. This means that if a visitor is seeing your site on their phone or tablet, they should still be able to find everything they need without trouble just like they would if they were viewing your site on their desktop at home.

A seamless experience across all your devices helps keep your users on your UI platform regardless of the device they are using.

Provide instantly recognizable and easy-to-use navigation. The key to providing a pleasant user experience for users is to understand that they are in search of content. They want information that you are providing on your Smart Forms or Pages. They will be using your Menu search screens or web site's navigation to quickly get to the content they are looking for. Provide a user-friendly navigation system that is easy to recognize and easy to use.

Design your navigation in a way that gets visitors where they want to go with the least number of clicks as possible while still being easy to scan and locate where they need to go.

Make the most important thing on the screen the focal point. Users are more likely to quickly scan the screen than they are to read everything there. Therefore, if a visitor or user wants to find content or complete a task, they are going to scan until they find where they need to go. You can help them along by designing where the eyes should focus first, second, etc. (also known as visual hierarchy). Make the important things such as screen titles, login forms, navigation items, or other important content a focal point so visitors see it right away.

Ensure all links and buttons function as they should. It is pretty frustrating to look for an item that you need urgently but is out of stock at the grocery store. Users of your application/web pages feel the exact same way when they click on a broken link or on a visual element that looks like a button but isn't clickable. When visitors are searching for content, they expect every link to take them where it says it will and without any error and not to another place they weren't expecting.

Visual elements that look like they are links or buttons but aren't clickable (i.e. underlined words that aren't links, elements that have a call-to-action but are not hyperlinked) can also frustrate users and can cause them to dislike your application or leave your site.

Let the user control their browsing experience. There are several common irritants that have appeared recently on websites that take control away from users, such as auto-play videos and hijacked scrolling. When you design a smart form, website or user interface, you want to let the user control their browsing and movement through the site or application.

There is an exactly no deployment needed to deploy your Smart Form on ONEWEB Platform. Once it has been created using App Designer, it can be used or linked with other smart forms using simple menu configuration or parent child configuration as discussed in section Parent-Child Relationship.

Moreover, these Smart forms once built are portable as simple JSON files which can easily be exported or imported from one ONEWEB platform to another environment.

But if the user wants to deploy this configuration to another runtime environment like production, user can use the deployment feature in AppSpace. Please check AppSpace Deployment Center to learn more about deploying an application to different runtimes.

Smart forms/ Entities built using ONEWEB platform supports different entity modes to display, save, and validate the content properly. It provides the user with options to configure the smart forms differently for different modes. During customization, the entity can be customized for each mode separately based on customer requirements. For example, a user can generate buttons with specific actions or specific pop-up messages for different modes.

ONEWEB supports four different entity modes such as Insert, Update, Search and Delete mode.

Insert mode is the data entry mode when the data entered is inserted as a new record in the database. All the configurations required when the user opens the entity to create new data will be configured using Insert mode.

Update mode is the data entry mode when the entity opens existing data from the database for editing purposes. All the configurations required when the user opens the entity to edit will be configured using Update mode.

Search mode is the entity mode for searching records in the database. All the configurations required when the user opens the entity for searching data will be configured using Search mode. In Search mode, users can search records on basis of the selected search criteria. And the Search results will be shown accordingly.

Delete mode is the data entry mode when the data is deleted from the database. All the configurations required when the user opens the entity to delete will be configured using Delete mode.

Features that users can control using different modes are:

• Display/ Hide fields or modules on smart forms by using access controls set based on modes.

• Configure Entity buttons specific to each mode of an Entity.

• Configure Module buttons to show/ hide based on Entity modes.

• Advanced developers can customize an entity to generate requirement-specific complex entity Actions for different entity modes.

At the core of ONEWEB platform, UX/UI components are the modular, self-contained, and reusable building blocks of apps. App Designer and Page Designer are the two ONEWEB components that will provide users with all the necessary tools to create and deliver modern apps with beautiful user experience on any type of screen. With ONEWEB UX/UI components, you can solve business problems by delivering apps fast.

A Smart Form is an electronic application form used by customers, partners, and staff to apply for products and services. It is essential to any digital business that involves collecting and transforming information. It comes with capabilities beyond the traditional paper forms, such as electronic completion, dynamic sections, database calls, and electronic submission. The advantages of using Smart Forms are.

• Eliminate paper and PDF forms.

• Support offline and mobile data capture.

• Enable users to start or continue a business process from anywhere.

• Make processes more efficient and user-friendly.

In the ONEWEB platform, App Designer is used to create and build smart forms. Some of the key capabilities of ONEWEB smart forms include:

Choose from a variety of Field options: Forms are built with little a block called fields. Fields allow the user to enter a specific type of data, ranging from name, date, checkbox andradio buttons to file uploads.

Smart Forms with Rules: Dynamically show or hide fields depending on the information entered by the user. With this feature, you show only the relevant fields to the user.

Perform Calculations: Perform complex calculations to determine values in required fields.

Multi-page forms: Split long forms into multiple pages to improve user experience.

Display dynamic content: Dynamically display content as it is required.

Data Validation: Perform sophisticated validation on input user data.

Data Connectivity: Lookup data from remote systems.

Data Submission: Securely submit data to your organization's database.

Built-in Database Persistence: Using field configuration setup, users can easily restrict and control which data show up only on GUI, and do not require database intervention, or vice versa.

Customizations Support: Can easily be customized using Java, JSP, and JavaScript.

Generate instant Previews: Generate instant previews of smart forms as the user builds and optimizes iteratively.

Process Integration: Can easily be integrated with back-end business processes designed on Process Designer by configuring Process buttons on Entities.

Design patterns are recurring solutions that solve common design problems. They provide a common language between designers and helps create consistency throughout the web. They provide a great resource for web designers looking for the best tested, most usable, and most efficient layouts. UI patterns in web design are gaining recognition as an important resource to consider and creating designs around them can help any app or website to be more user-friendly.

ONEWEB supports the following UI Patterns:

WYSIWIG Pattern: ONEWEB Smart forms use WYSWIG Pattern. WYSIWYG is an acronym for What You See Is What You Get. This pattern gives users a clear indication of what their content will look like when it is published. It allows users to see formatted results as they edit, this increases their confidence and allows for quick and good looking results.

Page Grid: Grid layout is often used in smart forms to organize content, create alignment, and apply divine proportion or other basic design principles. However, grids recognized as interface patterns also serve a purpose in creating clear primary and secondary points of interest.

Input Feedback: Input Feedback Pattern is used when the user enters data into the system and expects to receive feedback on the result of that submission. Using this pattern, the data entered by the user must pass the rules that are considered to be valid. Such validation rules can be:

• Validate the presence of content – at least some content must be entered.

• Validate the inclusion of content – entered text must contain certain data or must be within a certain range.

• Validate acceptance (for instance terms of service) – often with a checkbox.

• Validate length – A password must in many cases be at least 6 characters long.

• Validate uniqueness – Many systems only allow one user with a given user-name. If the data submitted by the user do not pass validation, an error message should be presented to the user explaining how to correct the data and request for a re-submit.

Drag and Drop: Design Pattern allows users to perform operations on one or more objects by moving them from one place to another. It helps users pick up content and then rearrange content by dragging it across the screen.

Calendar Picker: This helps the user to find or submit information based on a date or date range so that user can easily choose a date or date range in to submit, track, sort, or filter data.

Structure Input: This helps when the user needs to quickly enter data into the system, but the format of the data must adhere to a predefined structure. It is used when the input you want to collect from user is a specific data type. For instance, a zip code, date or time, a phone number.

Live Previews: Live previews allow users to check how changes in form fields affect an end result as quickly as possible.

Morphing Controls: This pattern helps when the user wants to be presented with controls available to the current mode only. This can be useful when some controls don't need to be displayed at the same time and helps to declutter the screen from unnecessary and unavailable controls.

Navigation Tab Design: This pattern helps user to choose a content that needs to be separated into sections and accessed using a flat navigation structure which gives a clear indication of current location. This can be helpful when you want to provide a list of the highest available sections/subsections on your smart forms and wanted to show content-specific data for each tab. ONEWEB support General tab and 2-Layer tabs, and each tab can contain multiple (1-1) and (1-many) modules as per user requirement.

Module Tab Design: Module tab pattern helps in generating contents that needs to be separated into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected. This helps user to see the content of each tab, can be viewed separate from each other, and not in context of each other. This design is also very helpful when the content for each tab has different structure e-g 1-1 Module or 1-Many module designs on ONEWEB.

Setting up a one to one relationship in an Entity is straightforward. All you need to do is lookup key values, declare and map it inside entity module configuration on smart forms to store and retrieve information from the database. But for complex application user may need to link between entities. ONEWEB supports creating a link between two existing Entities (called Parent and Child Entity) through Parent-Child configuration. Linking parent and child entities together offers smooth transitioning from one software module to another.

For instance, it is a good idea for users who are working on the Sale Order screen to be able to switch to Customer Data screen immediately without having to search through the database with CUSTOMER ID. This is very common in enterprise business processes, where transitioning between business entities happens frequently.

App Designer provides many built-in templates or features to help satisfy the different common scenarios required while creating enterprise level smart forms. This section includes all these features in App Designer to create a dynamic smart form.

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

Dashboards are the most relevant information management tools to analyze the Key Performance Indicators of a business. It basically consists of charts or other impact metrics that help to summarize the complex information into easily understandable formats.

There are two ways of creating Dashboards in the ONEWEB platform

Using the Widget Dashboard This is the old way of creating Dashboards in the ONEWEB platform. ONEWEB still supports this widget and hence all the existing dashboards can still function on newer versions of ONEWEB

Using Charts extension in Page Designer From version 4.0.0.19, Page Designer provides the charts extension for ONEWEB. Using this extension users can create dynamic charts or graphs that can be included in the web pages or mobile applications very easily.

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.

Modules are the subsections of the screen where the input fields are placed. The module configurations provide a list of features to include in smart forms. Users can add rows and columns in smart forms based on their respective designs. Module configuration requires the user to specify a database table name, table keys, and sequences to store user inputs, and also provides an option for the user to write SQL queries inside the configuration to retrieve values from the database. Users can drag and drop a list of required fields inside the module layout to create the desired form. Fields are a type of input values that are used inside the module layout to store different kinds of user inputs. The types of fields supported by ONEWEB smart forms are as follows:

AppDesigner supports 3 types of modules:

One to One (1-1): One to One on ONEWEB displays and manages data fields corresponding to one record in the database. To build a smart form with a 1-1 module, you can begin with creating an entity, tab as per requirement and ready to start with the module configuration. The 1-1 module has a row and column layout where you can simply add rows and columns as per your required design.

Below is an example of a 1-1 Module with 5 rows and 2 column layout, the module configuration provides a list of property settings (1-7). To see all property configuration settings in detail, please refer 1-1 Module section in App Designer Reference.

One to Many (1-Many) A "One to Many" module displays and manages data for multiple records in the database. It shows data in a tabular form. This type of module supports both grid and card layout for the table and allow users to handle a large number of items and columns.

Below is an example of a 1-Many Module with 13 columns. To see all property configuration settings of 1-Many Module in detail, please refer 1-Many Module in reference links.

Below picture shows user screen for a smart form with 1-1 Module and 1-Many Module Configuration.

Reuse Module: The Reusing feature under the module section is used to support the reuse of existing modules. Using this module feature you can clone any existing module to your tab. However, It is to be noted that the cloning feature is only limited to the module, fields, and database mapping configurations and any actions configured to that module will not be copied.

The below picture shows Reusing Module Configuration. Please refer to the Reuse Module section in App Designer Reference.

An Entity on ONEWEB platform refers to a group of business attributes that can be represented as a single unit. E.g. Customer, Order, Product, Tax Invoice etc. The first step in creating any smart form on ONEWEB platform is to define an Entity. You have to carefully define the scope of the business entity before starting your smart form configurations. In most business scenarios the entity in ONEWEB can be directly equated with the entity as per the use case diagrams or ER diagrams.

Some of the key points users should know about ONEWEB Entity are:

App Designer is a Smart Form builder on ONEWEB where user can create Entities.

A Smart Form on ONEWEB can consist of a single Entity or a group of Entities linked together, and this depends on your Smart Form design and complexity.

Entities can be linked together easily on ONEWEB Platform using Parent- child configuration and Pop-up configuration.

Entities can be integrated with back end business process designed on Process Designer using process buttons configurations.

Entities can be easily imported and exported as a portable json file on ONEWEB platform.

Entities can be cloned and thereby can significantly reduce time to build similar smart forms.

Entities can be saved as a new Version to keep upgrading and revising features/additional fields inside your smart forms.

Users can also search for any existing Entity/Entities on App Designer by clicking on searchicon.

App Designer provides easy Search Screen and Add/Edit Screen previews to review the UI generated from your entity.

App Designer provides users with the ability to view console for real time server logs to identify errors in configuration.

Buttons App Designer supports 3 types of Button Configuration inside your smart form.

Entity Button: Entity buttons facilitate actions for the entire smart form e.g. database calls or Cancel /Reject actions on your smart form.

Module Button: Facilitates user actions for the 1-Many module. It will not impact the entire entity and can be used to add, delete or update records of the module.

Process Button: Facilitates the smart forms to connect with internal business processes or microflows.

Actions Actions are hooks provided by App Designer to attach a custom JSP, JavaScript or a custom Java class to your entity. There are two types of Actions.

Entity Action: Entity Actions cover an entire entity. You can attach Java classes to Entity Action to override the function to save or update an entity. But you cannot attach a JSP file to an Entity Action.

Module Action: Module Action covers only the corresponding module. You can include a custom JSP into your module using a Module Action, you can also add Java class to override and then add, update, save functions on the module, or add JavaScript functions to customize the interaction on the modules.

App designer supports two types of tab configurations - Normal Tab and 2 Layer tab.

Normal Tab: Normal Tab is designed and used to create a smart form with only one layer (simple one-page form designs). It can include multiple sections or modules within this tab.

Example of Normal tab:

2-Layer Tab is designed for more complex user interfaces where the business data require smart forms with multiple upper and lower tab representation. 2-Layer Tab design split long forms into multiple pages to improve user experience.

Example of 2-Layer Tab

To create a Smart Form, you first need to create an Application. From version 4.0.19.10 and higher user can create an Application only from AppSpace. User can then create a Form inside the Application. Once the form is created, AppSpace will redirect you to App Designer to design the forms.

How to create Smart form Application from AppSpace. To create an application on AppSpace, user must first log in into AppSpace and then click on the Create new app button as shown below:

Creating an application using an AppSpace provides 2 platforms, one for web application and other to create Mobile applications. For smart form web application, choose the WEB platform and enter the details.

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

When status show 100% thst mean your application is created click at Done button for close window status window.

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

Click on Create Forms icon.

Enter form name and click Start Design to redirect to App Designer.

App Designer provides built-in Universal Search option that can be configured as per individual preferences. When a Universal search is enabled on an entity, an admin can create a custom search criteria which can be used by all users or an individual can create his own custom search criteria depending on his requirements on the very same entity.

How to enable Universal Search on an entity?

To enable Universal Search on an entity, open the entity and go to entity configuration window and enable the Advanced Search property.

How to use Universal Search on the Smart Form?

Create a new favorite search criterion by clicking on the Add Favorite icon.

Create the configuration as per your personal criteria. Choose Manage Type as "Me" for personal search criteria. Choose type "All" to share criteria with other users as well.

Users can personalize the Search Criteria fields as well as the Search Results. Also user can choose his own Sorting type as well.

Once criteria is saved the user can choose between the different custom searches available to him.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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

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 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.

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.

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

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.

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.

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

This section explains the step-by-step process to create your first smart form on ONEWEB. As mentioned before, it is imperative to define the scope and objective of your business entity before starting your smart form configurations. So let's say, here we have an objective and requirement to create a Smart Form for Loan Application with below data and is required to store Customer details such as: First name, Last name, Personal Type, Gender, Date of birth and Identification.

This sample smart form is named as "Application" and it consists of the following business data:

Application Date is required to know the submission date of the smart form.

Product has 3 types to choose from: Home Loan, Personal Loan and Credit Card.

Channel has 2 types: Walk in and Sale.

Customer Type could be either Corporate or Individual.

Office Code could be either Head Office or Branch.

Finance Amount and Term Loan are required to be entered by an application user.

Status can be Approved, Reject or Draft and is selected by an application user.

Email: Yes / No, Yes in case it is required to send an email to the customer.

Based on the above business data and sample requirements, let's follow steps to create a sample smart form similar to the below depictions where a bank employee could enter and store business data fields as shown below in (Screen1), also able to capture customer information as in (Screen 2). Later, the application user has a preference to search an existing record from the database based on the below search criteria such as: Status, Product, Customer Type, Channel and Date range as shown in (Screen 3).

The First step is to begin with Entity Configuration:

1. Create a New Entity: Check for the last 2 steps from the previous page.

2. Open an Entity Property window by clicking on the edit icon. (If create an Entity from AppSpace, can skip this step)

3. In the Entity Name, enter "Application" (If create an Entity from AppSpace, can skip this step)

4. Click Okay. (If create an Entity from AppSpace, you can skip this step)

Above "smart form" sample contains 2- layer Tab structure - named as "Application" as Main Tab and "Customer Information" as Child Tab as shown in Screen1 above.

Let's begin with Main Tab Configuration - "Application".

Main General Tab Configuration:

1. Drag 2-Layer Tab inside top (gray shaded area) of an Entity.

2. In the Title name, write Application

3. Set Template as 1 Column.

4. Click on Add.

Save your Entity. (Note: It is always a good practice to save entity after every new configuration settings)

Now once your Tab configuration is completed. Below is how your entity should look like:

The next step is to create a Main Module under your Main Tab and drag fields inside Main Module to start building your Smart form. Let us begin with Main Module Configuration.

Module Configuration:

1. Drag 1-1 Module right below the main Tab of your Entity in the blue highlighted area.

3. Choose 2 Columns in Configuration Layout Screen.

4. Click on Accept.

• In Module name, enter "Application"

• In the Table Name, choose "oneweb_application(T)"

• Click OK.

Now you are all set with your "Main Tab" and "Main Module" Configuration. Let us begin with Field Configuration.

Below is how your entity should look like before you begin with Field Configuration.

Field Configuration:

As shown in Prototype Smart Form Screen1 below, you are required to create 10 Fields inside your Main Module Configuration to generate this sample Smart Form. Now let us begin configuration of each field one by one.

Hidden Field to store Primary Key:

• Drag hidden field Inside an empty row 1, column 1 as shown below in Step1.

• Inside "hidden field configuration" set FIELD_ID as "APPLICATION_ID" in Step 2. (Note: 'APPLICATION_ID" is Primary Key in "oneweb_application(T)" table.)

• Click OK.

Let us drag other fields inside module configuration to construct a desired smart form as in screen1

1. Date Field Configuration:

• Drag and Drop "Calendar" field inside Module Configuration

• In the FIELD_ID, enter APPLICATION_DATE

• In the showFieldName, enter Date

• Set searchCriteria as "Y"

• Set showSearch as "Y"

• Set searchFromTo as "Y"

• Click OK

2. Dynamic List Field Configuration (Channel):

• Drag and Drop the "Dynamic List" field inside Module Configuration

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='CHANNEL'

• In the FIELD_ID, enter CHANNEL

• In the showFieldName, enter Channel

• Set searchCriteria as "Y"

• Set showSearch as "Y"

• Click OK

3. Dynamic List Field Configuration (Office Code):

• Drag and Drop "Dynamic List" field inside Module Configuration

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='OFFICE_CODE'

• In the FIELD_ID, enter OFFICE_CODE

• In the showFieldName, enter Office Code

• Set searchCriteria as "Y"

• Set showSearch as "Y"

• Click OK

4. Text Box Field Configuration (Finance Amount):

• Drag and Drop "Text Box" field inside Module Configuration

• Open Text Box Configuration Window by clicking an edit Icon on Field.

• In the FIELD_ID, enter FINANCE_AMOUNT

• In the showFieldName, enter Finance Amount

• Set showSearch as "Y"

• Click OK

5. CheckBox Field Configuration (Email):

• Drag and Drop "CheckBox" field inside Module Configuration

• Open Checkbox Configuration Property Window by clicking an Edit Icon on Field.

• For first condition, In Value Column write Y, ShowName as Yes, SEQ as 10, DefaultCheck as NO and click icon to add first row.

• For second condition, In Value Column write N, ShowName as No, SEQ as 20, DefaultCheck as NO and click icon to add second row.

• In the FIELD_ID, enter EMAIL

• In the showFieldName, enter Email

• Click OK

Let us continue with other fields left as per our layout on Sample Screen1

6. Dynamic List Field Configuration (Product):

• Drag and Drop "Dynamic List" field inside Module Configuration

• Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='PRODUCT'

• In the FIELD_ID, enter PRODUCT

• In the showFieldName, enter Produce

• Set searchCriteria as "Y"

• Set showSearch as "Y"

• Click OK

7. Dynamic List Field Configuration (Customer Type):

• Drag and Drop "Dynamic List" field inside Module Configuration

• Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='CUSTOMER_TY

• In the FIELD_ID, enter CUSTOMER_TYPE

• In the showFieldName, enter Customer Type

• Set searchCriteria as "Y"

• Set showSearch as "Y"

• Click OK

8.Text Box Field Configuration (Term Loan):

• Drag and Drop "Text Box" field inside Module Configuration

• Open Text Box Configuration Window by clicking an Edit Icon on Field.

• In the FIELD_ID, enter TERM_LOAN

• In the showFieldName, enter Term Loan

• Set showSearch as "Y"

• Click OK

9. Dynamic List Field Configuration (Status):

• Drag and Drop "Dynamic List" field inside Module Configuration

• Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='STATUS'

• In the FIELD_ID, enter STATUS

• In the showFieldName, enter STATUS

• Set showSearch as "Y"

• Click OK

Once you have finished configuring all above desired fields under your main Module. Your screen should look like below:

Save your Entity.

Set Primary Key of Main Module:

Once you have added all the required fields inside your main Module configuration, the next Step is to set the Primary key of your main Module "Application". Note: Primary key is already created above as Hidden Field in the beginning of Field Configuration.

• Select "APPLICATION_ID" as Module Key.

• Add KeyLen as "7".

• Select Sequence as "ONEWEB_APPLICATION_SEQ"

• Click icon to add row.

• Click OK.

Save your Entity.

Add Lower Tab (Child Tab) inside your Entity:

• Drag Normal Tab inside bottom (gray shaded area) of your Entity.

• Enter Title name as "Customer".

• Set Template as 1 Column.

• Click on Add.

Once you are done with (Child) Tab configuration. Next step is to create a Module under your Child Tab and drag fields inside this child Module to start building other required fields for your Smart form. Let we begin with child Tab Module Configuration.

Module Configuration (Child):

1. Drag 1-Many Module right below Lower/Child Tab of your Entity.

2. Click on edit icon to open Module Configuration window:

• In Module name, enter "Customer Information"

• In the Table Name, choose "oneweb_customer(T)"

• Click OK.

Field Configuration for Child Module (Customer):

As shown in Prototype Smart Form Screen1, you are required to construct 8 Fields inside your child Module to store customer details. The required fields are: First Name, Last Name, Personal Type, Gender, Date of Birth, Identification and 2 hidden fields. Hidden fields are being used here to store both Primary Key, as well as Foreign Key to link this child module with the main parent module table.

For e.g.: "CUSTOMER_ID" is primary Key in 'oneweb_customer(T)" table used in this child Module Configuration, and "APPLICATION_ID" is foreign key in this table to link it with the main module table i.e. 'oneweb_application(T)". Let's begin field configuration for this child Module.

1. Hidden Field to store Primary Key (CUSTOMER_ID)

• Drag and drop hidden field inside child module Configuration.

• Click on Edit Icon to open Hidden Field Configuration window.

• Inside "hidden field configuration

• set FIELD_ID as "CUSTOMER_ID"

• Select same name for ShowFieldName by clicking on replicate icon.

• Click OK.

2. Hidden Field to store Foreign Key (APPLICATION_ID)

• Drag and drop hidden field inside child module Configuration.

• Click on Edit Icon to open Hidden Field Configuration window.

• Inside "hidden field configuration

• set FIELD_ID as "APPLICATION_ID"

• Select same name for ShowFieldName by clicking on replicate icon.

• Click OK.

3. Text Box Field Configuration (First Name):

• Drag and Drop "Text Box" field inside Module Configuration

• Open Text Box Configuration Window by clicking an Edit Icon on Field.

• In the FIELD_ID, enter FIRST_NAME

• In the showFieldName, enter First Name

• Set showSearch as "Y"

• Click OK

4. Text Box Field Configuration (Last Name):

• Drag and Drop "Text Box" field inside Module Configuration

• Open Text Box Configuration Window by clicking an Edit Icon on Field.

• In the FIELD_ID, enter LAST_NAME

• In the showFieldName, enter Last Name

• Set showSearch as "Y"

• Click OK

5. Dynamic List Field Configuration (Personal Type):

• Drag and Drop "Dynamic List" field inside Module Configuration

• Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='PERSONAL_TYPE'

• In the FIELD_ID, enter PERSONAL _TYPE

• In the showFieldName, enter PERSONAL_TYPE

• Set showSearch as "Y"

• Click OK

6. Dynamic List Field Configuration (GENDER):

• Drag and Drop "Dynamic List" field inside Module Configuration

• Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.

• In the Table Name, enter ew_list_box_master

• In the Column Show, enter DISPLAY_NAME

• In the Column Value, enter DISPLAY_CODE

• In the Condition Value, enter category_code='GENDER'

• In the FIELD_ID, enter GENDER

• In the showFieldName, enter Gender

• Set showSearch as "Y"

• Click OK

7. Date Field Configuration (Date Of Birth) :

• Drag and Drop "Calendar" field inside Module Configuration

• In the FIELD_ID, enter DATE_OF_BIRTH

• In the showFieldName, enter Date of Birth

• Set showSearch as "Y"

• Click OK

8. Text Box Field Configuration (Identification):

• Drag and Drop "Text Box" field inside Module Configuration

• In the FIELD_ID, enter IDENTIFICATION

• In the showFieldName, enter Identification

• Set showSearch as "Y"

• Click OK

Save your Entity. (Note: It is always a good Practice to save entity after every new configuration item)

Set Primary Key and Parent Key in Child Module:

Once you add all the required fields inside your child Module configuration, the next Step is to set the child Module (Customer Information) Primary Key (CUSTOMER_ID) and map its reference to the Main Module (Application).

Procedure:

• Select "CUSTOMER_ID" as Module Key.

• Add KeyLen as "7".

• Select Sequence as "ONEWEB_CUSTOMER_SEQ"

• Click icon to add first row inside module configuration.

• Select "APPLICATION_ID" as Module Key.

• Select "APPLICATION_ID" as Parent Key.

• Click icon to add second row inside module configuration.

• Click OK.

Now, once you have finished configuration for Lower/child Tab i.e. (Customer), Child Module Configuration i.e. (Customer Information) and all required fields and keys for Child Module, your configuration screen should look like below.

Generate Instant Preview to review your Smart Form:

You could also generate instant preview of your smart form to see how it would appear to the End User. To generate an instant preview of your configuration, click on create preview Icon on top left "Entity Menu" as shown below.

A new window will open to show User Screen (Facade Screen) of your Smart Form as shown below:

Button Configuration for your Sample Smart Form

Now you require 2 Types of Button Configuration inside your smart form to complete your Sample Smart Form Configuration.

Entity Button: Entity buttons facilitates actions for the entire smart form e.g. database calls or Cancel /Reject actions on your smart form.

Module Button: Facilitates user actions for 1-Many module. It will not impact entire entity and can be used to add, delete or update records of the module.

Configure Entity Button of your sample Smart Form:

Add Search Button:

• Drag and drop Entity button right below your Main Tab (Application) layout.

• Scroll mouse over the button and click on edit icon to open button configuration window.

• In buttonName, enter Search

• In Page Action enter ENTITY_SEARCH

• In button Action choose searchResult()

• Click OK

Add New Button:

• Drag and drop Entity button right next to your previous button.

• In the buttonName, enter New

• In Page Action enter ENTITY_SEARCH

• In button Action choose addEntity()

• Click OK

Add Save Button:

• Drag and drop Entity button right next to other entity buttons.

• In the buttonName, enter Save

• In Page Action enter ENTITY_INSERT

• In button Action choose saveEntity()

• Click OK

Add Cancel Button:

• Drag and drop Entity button right next to other entity buttons.

• Click on edit icon to open button configuration window.

• In the buttonName, enter Cancel

• In Page Action enter ENTITY_INSERT

• In button Action choose cancelEntity()

• Click OK

Save your Entity.

Configure Module Button of your sample Smart Form:

Add Add Button:

• Drag and drop Module button right below your Child Tab (Customer Info) layout.

• Scroll the mouse over the button and click on edit icon to open button

• In the buttonName, enter Add

• In Page Action enter SUB_SEARCH

• In button Action choose popupActionFlow('[MODULE_ID]')

• Click OK

Add Delete Button:

• Drag and drop Module button right next to the other module button.

• In the buttonName, enter Delete

• In Page Action enter SUB_SEARCH

• In button Action choose [MODULE_ID]Delete()

• Click OK

Add Save Button:

• Drag and drop Module button right next to other module buttons.

• Click on edit icon to open button configuration window.

• In the buttonName, enter Save

• In Page Action enter INSERT

• In button Action choose actionFormSubmit('insertMany,'Y')

• Click OK

Add Cancel Button:

• Drag and drop Module button right next to other module buttons.

• In the buttonName, enter Cancel

• In Page Action enter INSERT

• In button Action choose $(#many_[MODULE_ID]_dialog('close');

• Click OK

Save your Entity. (Note: It is always a good practice to save entity after every new configuration)

To generate Instant Preview of your configuration, click on create preview Icon on top left "Entity Menu" as shown below.

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 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.

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

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.

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

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.

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

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.

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

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 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.

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 this link.

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.

Export the Certificate file in ".p12" format from Keychain Access program in Mac OS or use Certificate Signing Request (CSR) of Page Designer to generate Certificate (.cer). For more information on iOS Certificates please follow this link.

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

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.

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.

We will see how to create a new widget chart on the dashboard page with the existing page template.

Prerequisites Before you start the tutorial, ensure that your workstation meets the following requirements:

• Database client tools to connect to the database to select, insert, update and delete data in dashboard schema.

• Web browser (prefer Chrome)

To create menu, insert data into table DASHBOARD_MENU following these values

To create the page, insert data into table PAGE following these values

To create chart widget, insert data into table WIDGET_PREF following these values

To configure chart, insert data into table DASH_WIDGET_PROP following these values

Once you configure the dashboard completely and click Save, the dashboard configurations are stored in the database. To deploy the dashboard you have configured, you have to move your configuration data from the development database to the new database. It can be done by exporting the data and importing data to the new database.

Change chart to column stack

• Insert another record into table DASH_WIDGET_CHART_PROP following these values

• To change series type form Line to Column. Update column CHART_TYPE of table DASH_WIDGET_CHART_PROP of the previous 2 records to "column"

• To create stacked group BANGKOK. Update column STACK_GROUP of table DASH_WIDGET_CHART_PROP of BANGKOK to "BANGKOK"

• To add Chiang Mai to stacked group UP_COUNTRY. Update column STACK_GROUP of table DASH_WIDGET_CHART_PROP of CHIANGMAI to "UP_COUNTRY"

• To change chart type to Column stacked. Update column DASHTYPE of table DASH_WIDGET_PROP of your widget to "stacked_group_column"

Click the training page again. The screen should be shown look like this picture. The new chart represents Income comparison between Bangkok and up country by quarter in Column chart.

To configure series, insert data into table DASH_WIDGET_CHART_PROP following these values

Click the training page again. The screen should be shown look like this picture.

The chart represents Income of 1st quarter compare for each province.

To edit series data, update data of table DASH_WIDGET_CHART_PROP following the orange highlight to change angle of information.

Click the training page again. The screen should be shown look like this picture. The new chart represents Income of Bangkok compare for each quarter.

To add another series, change chart type back to Line chart.

• To change chart type form Pie to Line. Update column DASHTYPE of table DASH_WIDGET_PROP of the record to "line".

• To change series type form Pie to Line. Update column CHART_TYPE of table DASH_WIDGET_CHART_PROP of the record to "line".

• Insert another record into table DASH_WIDGET_CHART_PROP following these values.

Click the training page again. The screen should be shown look like this picture. The new chart represents Income comparison between Bangkok and Chaingmai by quarter.

To change pie color, insert data into table DSH_WIDGET_DATA_COLOR following these values.

Record 1

Record 2

Record 3

Record 4

Click the training page again. The screen should be shown look like this picture. The color of each quarter has been changed.

Widget Dashboard is a tool that helps you create basic chart or dashboard by configuration easily.

ONEWEB provides the database structure as well as the runtime to generate the dashboard. But there is no designer tool to generate the configurations. So the user will have to manually insert the configurations needed to generate the dashboard. This section will explain the database tables and the values to be inserted to configure the dashboard.

The main dashboard page component

Widget dashboard component

To add chart widget to page Insert data into table PAGE_WIDGET_PREF following these values

Go to Dashboard page http://<hostname>:<port>/LightWidget/dashboard.do

Then click Training page that you have configured. The screen should be shown look like this picture.

To change the chart type from Line to Pie. Update column DASHTYPE of table DASH_WIDGET_PROP of the record to "pie".

To change the series type from Line to Pie. Update column CHART_TYPE of table DASH_WIDGET_CHART_PROP of the record to "pie".

Click the training page again. The screen should be shown as below The new chart represents the Income comparison between Bangkok and Upcountry by a quarter in the Pie chart.

To integrate the chart element with the data from Microflow, user only need to call the Microflow and use the connect to data property on the chart element to connect to the data from Microflow.

From version 4.0.0.19, the Page Designer provides the Charts extension to design dynamic charts on the web pages or mobile applications. The user has to install the Charts extension that comes as a package with the ONEWEB Page Designer tool.

To use the charts feature in Page Designer, go to the Extensions tab under Settings and add the Charts extension to your application. Once the extension is added and enabled, the user can start designing his dashboard page.

Create a normal page in your application and design the layout as required. Add the chart extension from the Components tab and drag it to the canvas on the page

The User can configure the properties of the chart to choose the chart type, title, style, and color scheme for the chart.

Users can also provide static data for the initial load.

But to create dynamic charts users need to configure the Microflow to retrieve the necessary data and integrate it with the chart component.

To change color of series, update column FIELD_COLOR of table DASH_WIDGET_CHART_PROP of Bangkok to "green".

Click the training page again. The screen should be shown look like this picture. The new chart will change color of Bangkok to green color.

To create dynamic charts user needs to retrieve the data using Microflow in a particular format. For bar or line charts the data from Microflow should follow the below format.

But for pie charts, the data from Microflow should follow the below format.

Users can retrieve the data from the database using the database node or from other systems using the WebServices node.

Web Navigation is the process of navigating a website or a web application through its various contents or features. A Menu helps to guide the user through the web by listing out the contents or features in a structured format that can be easily accessed. As a result, the Menu is the most important aspect of web design for a better user experience. So, the best way to design a menu is to make it simple, intuitive, and conventional.

There are different types of web navigation practices used across websites.

Hierarchical Navigation Hierarchical Navigation grows from general to specific. This provides a clear, simple path to all the sections of your site/application in a single place.

Global Navigation Global Navigation shows only the top-level sections of the website/application. Further pages and sections are listed on each page as you navigate through the site.

Local Navigation Local Navigation is the link within the text to another page or section of your website.

A report is typically a short summary of the data that is evolved from a business operation. They are mostly in the form of a narrative, graph/chart form, or tabular form. Reports are mostly used to analyze a business operation to improve business or to keep track of transactions for auditing purposes.

Reporting tools are programs that help users and developers to visually design reports by using the Reporting Tools library. Reporting tools provide all the most important functions required to create nice reports in very less time through a rich and simple-to-use GUI. This can help people who do not know Reporting tools library to create simple reports and understand the XML syntax by taking a look at the generated code. This also helps skilled report designers to compose complex reports and thereby, saving a lot of time.

Mobile Devices are very diverse, ranging from screen size, resolution or orientation to even operating systems (OS). To take care of the varying screen size and resolution, we have to make many versions of the site, such as a Desktop version and a Mobile version. But it will increase the cost and maintenance overload.

Responsive Web Design is a new concept that makes your web page look good on all devices (desktops, tablets, and phones). It is about using HTML and CSS to resize, hide or move content to make it look good on all screens.

Smartphones have invaded almost every spectrum of our lives. More and more people are most likely to use applications on their mobile devices than on a desktop. Hence, it become very important for the success of a modern application to provide efficient mobile UI/UX for at least the common and popular types of mobile screens. Businesses are increasingly giving attention to how they connect with existing and potential customers through mobile technology. Having an exclusive mobile app or a mobile version of the enterprise applications is a solution pursued by most companies.

There are three ways in which an application can be made accessible to users on mobile devices. Web Responsive Design Exclusive Mobile Apps Progressive Web Apps

The two main Mobile OS platforms are Apple's iOS and Google's Android. Native apps are written in the code preliminarily used for the device and its OS. For example, developers write iOS applications in Objective-C or Swift, while they create Android-native apps in Java. whereas, Hybrid applications are a combination of native and web apps. The inner workings of a hybrid application are similar to a web app, but it installs like a native app. Hybrid applications have access to internal device APIs, which means they can use resources such as the camera, storage, GPS, etc. ONEWEB support Hybrid Mobile Application Development.

ONEWEB provides a CI server as an add-on feature to build mobile apps on the cloud. The user needs to pay the licensing fee and get the CI server key from the ONEWEB Team.

Once the user has the key, the user can attach it to his server as a global CI Server or attach it to one particular application as a local CI Server. If the key is attached to a global CI Server, any user on that server can build applications using this server. (Used for on-premise systems). For shared ONEWEB cloud users, the key is added to their applications as a local CI Server.

Now, the user can build unsigned Android applications. But for building signed apk and also for building IPA, the user needs to fill in the details of the apple developer account and information or google service account and Keystore details.

To link menu to a page,

Go to the Menu Configuration screen.

Select the hierarchical position for your smart form and click on the icon. It opens the Menu Properties screen.

Enter the details for Description & Sequence

Enter the full URL path for your page in the Action URL field

Choose the Type as PAGE

Click OK.

Click on the Save Menu button in the Menu Configurations Screen

Logout and Login to ONEWEB and the menu is ready to use.

To link menu to a smart form,

Go to the Menu Configuration screen.

Select the hierarchical position for your smart form and click on the icon. It opens the Menu Properties screen.

Enter the details for Description & Sequence

Choose the Entity for your Smart Form and choose the mode to open with.

Click the Generate button to generate the URL.

Choose the Type as PAGE

Click OK.

Click on Save Menu button in the Menu Configurations Screen

Logout and Login to ONEWEB and the menu is ready to use.

To integrate ONEWEB with reporting tools we need to implement three components.

• Servlet to generate output document.

• Develop report form.

• Create an entity to search data and pass them to the servlet report generator.

To understand the reporting architecture on ONEWEB please see the picture below

The following example explains how to generate a sample PDF report from jasper(.jrxml) with servlet java code

Step 1

• Prepare external jar files. (Note : x.x.x is version that project use)

• commons-beanutils-x.x.x.jar

• commons-collections-x.x.x.jar

• commons-digester-x.x.jar

• commons-logging-x.x.jar

• groovy-all-x.x.x.jar (NOTE : If the report language is default Groovy. It is optional)

• iText-x.x.x.jar(NOTE : For PDF Exports)

• jasperreports-x.x.x.jar

• poi-x.x.jar(for excel exports)

• jfreechart-x.x.x.jar

Step 2

Develop report form using the reporting tools: iReport or Crystal report. This example uses iReport to create a report form. Check the links below for more information :

For iReport : https://community.jaspersoft.com/wiki/ireport-designer-tutorials-help

For Crystal Report : https://www.tutorialspoint.com/crystal_reports/

For jasper report : https://www.tutorialspoint.com/jasper_reports/

Step 3

Develop servlet to call Jasper report and generate a report in output formats such as PDF or Excel. This example code generates a report in PDF format. Create a simple servlet, which creates a connection using the JNDI name: “jdbc/application” and then calls Jasper

Pass the connection to select data to generate a report and return the report file to the client-side without saving the file on the server.

@Override
protected void doGet(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
try {
String path = "\\imports\\report\\oneweb_report.jrxml";
JasperReport jReport = JasperCompileManager.compileReport(path);
System.out.println("Jasper Report File Template : " + jReport);
//Database connection
Connection con = /*Database Connection : jdbc/application */;
//Set any Parameter
Map reportParameter = new HashMap();
paramMap.put("REPORT_PARAMETER", request.getParameter("REPORT_PARAMETER"));
//Don't have parameter pass null instead of reportParameter
JasperPrint jPrint = JasperFillManager.fillReport(jReport, reportParameter, con);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ServletOutputStream servletOutputStream = response.getOutputStream();
response.setContentType("application/pdf");
JasperExportManager.exportReportToPdfStream(jasPrint, servletOutputStream);
} catch (Exception ex) {
//Exception handler
//TODO
}
}

Step 4

• Create an entity to call the servlet to generate the report.

• Inside Entity use Entity action and include JavaScript to prepare the function to call the servlet using the URL - http://host:port/report?name=reportName&REPORT_PARAMETER=zzz

ONEWEB follows a hierarchical navigational structure. Using ONEWEB you can link entities or pages to your application using the Menu Configuration screen.

Select the hierarchical position of your menu item and click on the icon. It opens the Menu Properties screen.

The purpose of each property in the configuration screen is given in the below table

Enter the details of your menu item properties. Click OK. On the Menu Configuration screen click on Save Menu, logout of ONEWEB and login. Your menu item is ready to use.

The Smart Forms generated using App Designer are by default web responsive to facilitate the proper use on every type of device. So when you create a Smart Form using AD, no need to worry about adapting to any specific device type as AD - a ONEWEB smart form designer automatically takes care of that.

Smart Form visibility on Desktop Screen Mode

Smart form visibility on Mobile Screens

The web pages created using Page Designer are web responsive by default unless the web designer assigns specific width for any element. Page Designer also has the feature to preview your page for different device types and see how your page looks like. To do so click on the desired preview icon at the top of the Page Designer screen.

Page run on desktop screen Mode (width 1024px)

Page run on Mobile Mode (width 375px)

Also, for the column element, Page Designer provides built in support to increment or decrement width for each screen size so as adjust the column size on various screens.

Page Designer also provides the class property for all element so as to assign specific CSS class to an element. Users can use this feature to make the elements follow the web responsive design.

To link menu to an external URL,

Go to the Menu Configuration screen.

Select the hierarchical position for your smart form and click on the icon. It opens the Menu Properties screen.

Enter the details for Description & Sequence

Enter the full path for your external URL

Choose the Type as PAGE

Click OK.

Click on Save Menu button in the Menu Configurations Screen

Logout and Login to ONEWEB and the menu is ready to use.