New User Interface AppSPace 5.0.23.04

Set App Detail page to default page when open Application setting and remove layer properties - Easy to access setting Application

New Feature Page Designer 5.0.23.03

Add New Screen - Add screen mobile in web application for support design web application in mobile

ONEWEB RELEASE 5.0.23.04

AppSpace 5.0.23.04

UI Improvement

Set App Detail page to default page when open Application setting and remove layer properties

Fixed Issue

DF: Rename component not change in case uppercase lowercase

DF: Button cancel create component not correct

Page Designer 5.0.23.03

Feature

Add Screen Mobile in WEB Applicaiton

UI Improvement

Add type 'E-mail' on 'Text Input'

Warning for duplicate javascript function name

Fixed Issue

DF: Build Page found error "Uncaught TypeError: Cannot read properties of undefined (reading 'iam2Connected')" when description of Application have enter

DF: Can't click Done button in Data Mapping

DF: In the database command type, enable multiple nested pop-up

DF: Embed Video can't Autoplay

DF: CSS class name should only be entered with specified conditions

DF: Application name in landing page not show new name after change application name

DF: Database Collections > Can't set data size in data type varchar

DF: Should not expand modal in tree node if user do not click expand modal

DF: Duplicate component is not like a prototype

DF: When editing duplicate components, the prototype component will change accordingly.

DF: The background color in the color picker disappears after clicking on another tab.

DF: Can not setting specific drawer

DF: Error when click delete microflow in action (Import application)

DF: Can not click Done button in Table Data Mapping (Database Mobile)

DF: Image from UI Kits disappears

DF: Images must always be shown in the chronological sequence in which they were uploaded

DF: The link type modal disappeared after going to another place and looking at the link

DF: Can not change color text in Navbar

DF: Can not change color text in Carousel

DF: The navbar menu can be created successfully when the close button is clicked

DF: The page state of every page will show the state of the last edited page

DF: Table data mapping not show pop-up information

Micro Flow5. 0.23.02

Improvement

Support jdk 18

ONEWEB 5.0.23.01 - February 2023

APPSPACE 5.0.23.01

Defect Fixed

DF : Search app after first login show ' Sorry we couldn't find any matches for "" ' .

DF : Missing menu when create page with name footer/header in mobile app.

DF : When import application cannot import application (error application id has duplicate although select auto generate new application id)

UI Improvement

Imported Application should show name of user who imported application.

New Feature

Feature : Edit Application name and description.

Page Designer 5.0.22.12

Defect Fixed

DF : Custom icons not showing in component List Item

DF : Translation key can't set value in field

DF : Enable the primary key, when there is data in the column that does not match the change.

DF : Drag the toolbar and footer to the tree node. It should be placed only where it should be placed.

DF : For border Line, if user selects a color before selecting a pattern (the first time), the color value will return to the default

DF : In the "TextArea" component, the "Row" and "Col" fields should not be filled in with negative values

DF : Page Designer cannot call microflow after user edit microflow. User need to delete microflow and connect again.

New Feature

Feature : Search feature in Microflow setting screen

Feature : Add multiple parameters in page state.

Feature : Date-picker input field.

Feature : Custom separate JS after call to Microflow is successful or failed

Microflow 5.0.22.12

Defect Fixed

DF : Microflow will generate new jars for latest version after every new snapshot (Fixed issue about Microflow don’t have jar file for latest version when call from Page Designer after a snapshot)

DF : Fixed error about connecting line between nodes is lost or changes place after importing many flows

DF : After importing many flows, the node positions are switched, it does not match imported flow

DF : Existing Business Object screen data overflows from pop-up windows

DF : In Clone Business Object screen when select 'To Group' with the same parameter name, the web page will freeze

Deployment Center Pipeline 5.0.22.08.1

Defect Fixed

DF : When click create pipeline screen renders Edit Config Environment page

DF : Cannot search pipeline with _ (underscore)

DF : Cannot edit Config Environment because Config Environment page does not render correctly

DF : Link from execute pipeline is not correct

DF : Environment Configuration line overlap.

New Feature

Feature : Deploy microflow with environment variables

UI Improvement

Description on input for Stage field ENV

Add Execute pipeline button for ' cancel execute ' in kebab menu.

ONEWEB 5.0.22.05 - November 2022

Page Designer 5.0.22.07

Defect Fixed

DF : Custom icons not showing in component ListItem

DF : Page state parameters have switched between pages when open other pages by switcher

DF : Drag the toolbar and footer to the tree node. It should be placed only where it should be placed.

DF : When using the chart color multiple times, Chart color pop-up shows loading all the time

DF : Can't delete the first row in Translation Key filed

DF : Component background color, Can't reset to default color

DF : Images with duplicate names should not be uploaded.

DF : QR code not generate url from microflow

DF : Delete a image in the gallery. The active image in PageContent will be deleted and should also be deleted at the tree node

DF : Remove icon in pop-up, The active icon in PageContent is removed and should also be deleted at the tree node.

DF : Don't have warning message when upload non file ui kit (any file zip can upload by don't have warning message)

DF : force call latest of microflow version with send v0.0.0

DF : UI kit : Can't create ui kit from card-content

New Feature

Build Page with Golang

IAM2 5.0.22.01

Defect Fixed

DF : Whitelabel error when login with invalid password/ username

New Feature

Remove user social login

User group

APPSPACE 5.0.22.08

Performance

Optimize loading time for development

Data Designer 5.0.22.08

Defect Fixed

DF : Data viewer : should be a refresh feature. or update data in real time when adding, editing or deleting data in table

DF : Data viewer : If there is more than 1 Script tab and close it, all tabs will disappear.

DF : Data viewer : Script : no data but show Updated Rows 1 should Updated Rows 0

DF : Data viewer : Button Commit - Disable

DF : Data viewer : First run of the script sql does not render and displays an error message

DF : Data viewer : feature : 'Delete Connection' and 'Edit Connection' missing

DF : Data viewer : Add Connection : Protocal and Class Name duplicate list

DF : ER-Diagram : Undo and redo of the ER diagram

DF : ER-Diagram : Note font size should be able change

DF : ER-Diagram : Label font size should be able to change

DF : ER-Diagram : Can't set length more than 500

Pipeline 5.0.22.08

Defect Fixed

DF : Can’t execute pipeline create user (result execute failure)

DF : Stage in group stage not show stage information

DF : Wrong spell Environment in create pipeline page

New Feature

Deploy microflow with penvironment

UI Improvement

Description of the input value of Stage ENV

Microflow 5.0.22.06

Defect Fixed

DF : After successful import flow. workflow no extension node appears

DF : Excel reader not return value from column AE

DF : Excel Reader not return value from column column O

New Feature

Feature Clear Temp

ONEWEB 5.0.22.01 - February 2022

IAM2

Authentication Multi-Factor (AMF). Login with Line

AppSpace

Display the status of each component while creating an application

Deployment Center tools

Pipeline : Support deploy AD Pipeline : Support state create/remove role on IAM2 Cloud Native : Improvement in running database script migration

Page Designer

Improve feature drag and drop element in the tree structure Support Microflow rest version 2 Support Multiple developers to work on the page UI for the same application New features Builder setting for clear page designer build/preview app cache from server Automatic save in setting page and page state Display Flex

Microflow Designer

New features Add Existing Business Object in database dummy object Integrate data designer in node Database New UI more friendly in Export/Import application

Process Designer

New feature : Deploy multiple processes in an application using a single deploy all button

Features deprecated in 5.0.23.01

The traditional programming method refers to working with an entire team of developers and programmers to gather specific requirements, develop a plan, and work with a development team to create custom code to meet the specific needs of an application. These processes are usually complex, expensive, and time-consuming. There also requires a continuous maintenance cycle by the developer to keep the custom software application secure and up to date.

The low-code application development platform, on the other hand, is a visual development approach to application building that empowers even non-technical users to build, test, manage, and deploy applications with minimal or no coding. Low-code platforms achieve this by creating ready-to-use code blocks (a collection of code for a specific functionality) that can be added through a simple drag-and-drop interface. In ONEWEB, we have Designer tools to make it easier to assemble the different application components like UI, Workflow, and Business Logic Microservices. Users can then connect them together to create mobile or web applications. This is the real-world means of converting business ideas into a system in a matter of minutes. This can be used to create complete applications from end to end as they support multiple uses cases and customization points. ONEWEB also provides an integrated work environment for managing the different application components and collaborating between multiple users.

No-code software, takes the low-code concept to another level, allowing literally anyone to tailor an application to their needs without any programming knowledge whatsoever. No-code platforms enable developers, citizen developers, and business users to quickly develop apps using drag-and-drop interfaces to create robust apps. But the limitation of these platforms is that they are usually industry-specific and can support only pre-fixed use cases.

ONEWEB App is a program built using the ONEWEB Business Application Platform to perform a specific business case for end-users or, specific functions for other systems. ONEWEB App can be:

A static or dynamic website that contains web pages and runs on web browsers. Each page on this website is built by using the ONEWEB Page Designer. It could contain text, web form, images, videos, and scripts to send and receive data from internal or external sources.

A hybrid mobile application containing pages running on android and iOS devices. Each page is built from ONEWEB Page Designer and is exported as a mobile hybrid application.

A business web application containing web forms, business processes, and system interfaces.

A business process app containing only business processes and system interfaces.

A pure system integration app containing only system interfaces.

The ONEWEB Apps are the end-user Apps created by collaborating on the ONEWEB Platform. They can consist of UI elements as well as back-end services. Important components that constitute the ONEWEB Platform are the AppSpace, the Designer Studios, and the Runtimes.

ONEWEB is a flexible, scalable and extendable business application platform. It helps organizations innovate business applications that streamline user experience, system integration and process automation of a wide range of business processes.

User Experience (UX)

ONEWEB consists of both web designing and application runtime tools, that are responsible for creating, executing, managing user interaction, and the presentation of business data. Users can build both smart forms and dynamic web or mobile pages:

ONEWEB Smart Form allows users to input business data that will be sent to the ONEWEB runtime server for processing as a business transaction. For example, a call center user inputs a customer complaint information form and submits it to related departments. In this example, the customer complaint information form built by ONEWEB consists of web user interface elements including text boxes, text areas, drop-down lists, radios, date pickers, buttons, file select controls, etc. All web user interface elements can be configured to interact with the database such as insert, update, delete and select without any programming language. It can also be easily configured to work with service integration and tasks automation.

ONEWEB Dynamic Page allows developers to build responsive HTML5 web pages and mobile app pages using a simple drag and drop ONEWEB page designer. It supports custom CSS add- ons and Java Scripts. For making dynamic content, these pages can be interfaced with external systems using ONEWEB Microflow. The output of the ONEWEB Dynamic Page Feature can be published to ONEWEB Dynamic Page Runtime, exported into the HTML5 Angular app as a zip file, or Java EE Application as a war file. For the mobile applications, the O/P can be exported as an android '.apk' file format or an IOS '.ipa' format

System Integration ONEWEB has designers and runtime tools that can act as a system integration platform to integrate different applications by using standard communication methods such as Web Services, RESTful, JDBC, File, etc. It also supports Data Transformation between different formats. For example, the HR System wants to send employee data to the CRM system through ONEWEB Microflow.

Process Automation ONEWEB has its Business Process management system called Process Designer. ONEWEB Process Designer supports the implementation of end-to-end business process automation. The users can design, implement, execute, and monitor processes using the Process Designer. The activities in the business processes are steps that make the process move forward until it reaches the end of the process. Here is a sample scenario of activities in the "Order Management Process" designed by using the ONEWEB

Activity 1: A customer submits an order via Order Website Activity 2: The order routes to Fulfillment Department to fulfill the order Activity 3: Sending the order information to the ERP system for generating an invoice Activity 4: The invoice is sent to the customer via mail

From the above Order Management Process, Activity1 and Activity2 are Human Activities. ONEWEB - "Dynamic Page builder" can be used to build an Order Website for customers to submit orders on Activity1. The order fulfillment screen on Activity2 uses the ONEWEB Smart Form. Activity3 and Activity4 are System Activities that can be executed using Process activities like Java, Database Calling, Web Service, REST API, or File Integration.

ONEWEB AppSpace is an integrated platform from which you can create & manage the multiple components that constitute your application. It provides all the tools to create, manage, build, and deploy an enterprise application from a single control center.

Users can create UX/UI using Page Designer or App Designer. The back-end business process or business logic can be created using Process designer or Microflow designer, all via the AppSpace. AppSpace also allows easy switching between the different components that constitute an application.

AppSpace provides added functionality like user management, version control, and single-step deployment, which helps the user in collaborating, and managing the application life cycle much easier. Users can design & create the data model using the Data Designer component in AppSpace and convert the data models to DDLs using the export feature.

If you are migrating ONEWEB from an earlier release, then you should be aware of the various features that might have been deprecated in current and earlier releases. This tutorial is intended for System Administrators to help install and configure ONEWEB on a local server. ONEWEB can be used as a local service or cloud service, as per your client's requirements. In case you intend to use ONEWEB as a cloud service. Please reach out to the Avalant Staff to set up the cloud environment for you. The following section explains how to install and configure ONEWEB on a local server.

ONEWEB Runtimes are the workhorses of the ONEWEB Business Application Platform. These runtimes are engines that translate and execute the configurations generated by the designer studios. Each Designer Studio has its corresponding Runtime.

For example, the App Runtime can read the configurations generated by the App Designer to generate the web forms and host the form on the webserver.

All Runtimes except Page Runtime provide an environment for the end-user application to run. But for Page applications, the Page Runtime is used to build the HTML pack or the mobile application pack. The pack is then run on a Web Server or the mobile OS depending on the type of page application

ONEWEB Designer Studios are the most exciting part of the ONEWEB Business Application Platform. Using these designer tools, Users can design and create web forms, web pages, mobile applications, business processes, and microservices - all by using graphical interfaces. These designer tools are based on simple drag and drop so that any user with zero coding skills can create dynamic applications. ONEWEB Designer Tools also provide built-in integration with the other components of ONEWEB.

ONEWEB provides four different Designer studios

App Designer for creating Web Forms

Process Designer for creating Business Processes

Page Designer for Mobile Applications & Web Pages

Microflow Designer for Micro-services

ONEWEB is an Application Development Platform that is built on Java EE technology and supports a 3-Tiers Architecture consisting of Web Tier, Application Tier, and Database Tier. This technology is developed as an Enterprise-Grade Application that will enable you to scale capacity up to serve your business growth.

ONEWEB also supports containerized architecture for deployment on the cloud. There are many options for the users to choose the ONEWEB Architecture depending on your business demands. The standard architecture of ONEWEB as preferred are as follows:

• Standalone Architecture

• High Availability Architecture

• Cloud Architecture

Before you begin with the installation, please perform the following:

• Design the server architecture for your ONEWEB instance as per your application requirements.

• Evaluate the sizing for your server as per the expected load.

• Check the system prerequisites for installing the ONEWEB

You need to consider the type of environment you need to have when you want to develop an application. First, you can develop your application on your client's machine. Once you have completed the task, it needs to be tested. For that, you should have a Testing Environment. If your application works fine in Testing Environment and you have got the confidence to go live, you need to promote your Application in the Production Environment. If you would like to have continuity of business, you may need Disaster Recovery as a backup plan in case your Production Environment has encountered some problems. This is the most general scenario to develop an application.

Production Environment

Type of your Application - Is it a real-time application? Is it integrated with other systems? How much data is to be processed? Does it operate 24 hours per day? Type of your Business - How critical is your business? Who will be affected if this application is down? A number of the user (Active user and Name user) Number of Transactions - Number of transactions within a period of time such as the number of transactions in a month. Accepted downtime - Number of downtimes in a year and how long is the accepted downtime per each occurrence?

Disaster Recovery Environment

The Disaster Recovery Environment is the backup environment for your Production Environment and cannot be operated for a long duration. To design the Disaster Recovery Environment, you need to consider the following points.

• RPO (Recovery Point Objective) - How much of your data can be lost when you decide to turn on the Disaster Recovery Environment?

• RTO (Recovery Time Objective) - How long can it take when you decide to turn on the Disaster Recovery Environment?

• How much percent of your Production Environment Capacity do you expect to use in the Disaster Recovery Environment?

Testing Environment

Testing Environment is used for testing your application. To design the Testing Environment, you need to consider the following points.

• How many testers or people involved do you plan to use the testing environment?

• How many systems do you have to integrate with?

• How much data do you plan to be used in the testing process?

ONEWEB uses ELK stack for monitoring cloud infrastructure as well as the platform services.

ONEWEB can be setup in different configurations depending on the customer requirements. Customers can pick and choose the products to be included in their subscription.

When you consider the architecture of your Application you should ask the following questions.

Which environment are you considering? Production, Disaster Recovery or Testing Environment.

Is the Application a critical system? If your application is a critical system such that it needs to be online 24/7, like a payment processing or important transaction, you may need to consider Active-Active or Cluster Environment to make sure your operation can run continuously.

Can this system have some downtime for maintenance? What is the SLA? If your application can have downtime and has enough SLA for maintenance or some failure you can use the Standalone Architecture.

Do you need Disaster Recovery? What is your RPO (Recovery Point Objective) and RTO (Recovery Time Objective)? If you need DR (Disaster Recovery) for backup plan in case you cannot operate Production Environment. You need to consider RPO (Recovery Point Objective) and RTO (Recovery Time Objective) to choose the right solution for your DR.

How many Active User? The number of Active Users is one of the important things to consider for deciding the capacity of your architecture. You can choose Standalone Architecture with a high volume of CPU and Memory or you can choose to separate your server as Active-Active Architecture with a load balancer to spray your workload to multiple servers.

How many transactions (Per year or Per Month)? The number of transactions is as important as the number of active users. The number of transactions need to be considered as well to decide the capacity of your architecture because it impacts directly on your server capacity.

How many transactions at peak time or peak event? When you consider your architecture and server capacity your also need to consider number of transactions at peak time or peak event because your server needs to support that situation as well.

How many and how long your data will be kept in the system? (in term of record and size) Size of your data in the system is one of key factors that impact the performance of your system. You should consider this factor when you design the architecture.

1 core supports up to 200 active users, but the application can be a bit slower due to having all workers and background jobs running on the same core. 2 cores is the recommended number of cores and it supports up to 400 users

The number of core CPU can roughly be estimated by the number of users divide by 200. For example, 500 active users = 500/200 = 2.5 so need to round up to 3 CPU cores. For more accuracy, the complexity of your application and transaction should also be considered.

*Assume that 1 user generates 2 requests or transactions to the server per 1 minute.

Design is the most important part of creating any application. To get started with the design, you need to follow the below steps.

Set the goal for your app.

Setting a goal is very important as it acts as a reference to come back to throughout the entire process. It will keep you on track.

Make a plan.

Go deeper into your application capabilities and define the scope. It should include the road map of your app, its functionalities, how to achieve them and who is the targeted audience?

Research the market and the segment.

Research is an integral part of app design.

Create wire frames of your application.

The wire frame is the visual architecture of the application. It shows how the application is going to look and how it will function. It helps consolidate the application flow.

8GB RAM is the minimum memory size for the development environment.

16GB RAM is the minimum recommended memory size for production environment and supports up to 500 active users

32GB RAM is the minimum recommended memory size for production environment and supports up to 1,500 active users

For more accuracy, you should also consider the complexity of your application and transactions.

ONEWEB has 3 main components

Web Server

Web Server requires at least 2 GB of disk space. However, it depends on what Web Server you use. Please check with their website.

Application Server Application Server has 2 parts to consider about disk space

Middleware (Application Server) : It also depends on what Application Server you use. For common case, you should have at least 5 GB available disk space for this part. For accurate size please check with official website of your Application Server.

ONEWEB binary : ONEWEB binary is Application that runs on Application Server consists of App Designer, App Runtime, Process Designer, Process Runtime, Page Designer, Page Runtime, Microflow Designer, Microflow Runtime, AppSpace, etc. It requires at least 2 GB of disk space.

Database Server ONEWEB requires a Relational Database to store configuration and transaction data. Disk space for Database software usually requires at least 2 GB. But you have to check with their web site to be sure. Another part of the Database is ONEWEB data and your transaction data. ONEWEB data requires at least 200 MB and transaction data depends on the usage of the application.

Network bandwidth between Web Server, Application Server, and Database Server We recommend using at least 1 Gbps for Production and DR Environment. For Testing Environment, you can use 100 Mbps bandwidth. But we also recommend using 1 Gbps for all environments, if possible.

Network bandwidth between Web Server and Client machine For Intranet (LAN network) - If possible, we recommend using 1 Gbps (gigabit LAN), but you can also use at least 100 Mbps.

For Internet or WAN network - We recommend at least 10 Mbps internet bandwidth for normal application (not more than 50 fields of data per 1 form/page). If your application has more than 50 fields of data or has more than 3 pictures per 1 form/page, you should increase your internet bandwidth to relate with your data. To calculate what bandwidth you should have, we should base with 10 Mbps + your additional data size (data field that more than 50 fields and your additional image or attached file).

This tutorial is written for beginner to intermediate-level systems administrators who may never have installed or configured the ONEWEB application server. Before you begin, you need to be aware of the hardware and software prerequisites for ONEWEB installation.

Given below are the software requirements to install and run ONEWEB on a machine.

ONEWEB requires a relational database. It has 2 parts, one for the configuration and another for the transaction data. ONEWEB configuration schemas and application transaction schema can be on separate instances or can be on the same instance depending on your design.

Supported Databases - Given below are the supported database servers

Oracle 11g or later PostgreSQL 9.6. MySQL 5.6 or later DB2 10.5 or later MS SQL Server 2012 or later MariaDB 10.1.22 or later Tibero 6.0 or later

Schemas - ONEWEB requires 9 database schemas for ONEWEB configuration data and 2 schemas for your transaction data

The ONEWEB configuration data schemas are as follows: eaf_master - To store AppDesigner configuration data erp_oneweb - To store AppDesigner transaction data. ONEWEB can use any schema name. This is only a sample name. pd - To store ProcessDesigner

mfd - To store Microflow configurations page - To store PageDesigner configurations bpm - To store Process transaction data asp - To store AppSpace configurations dpc2 - To store Deployment Center configurations iam2 - To store User data and Authorization data for IAM dashboard_widget - To store the widget dashboard configurations survey_rabbit - For storing survey configurations

Tablespaces - We recommend separating table space by at least one schema per one table space.

For best practice we also recommend separating table space for data and table space for index to get the best performance. You fine tune such by following these techniques:

Separate table space for transaction data table and index data table. Separate table space by following the data size of the table. Place table space file in different physical disk.

Data Files - Data File is a physical file of the Table space. One table space needs to have at least one Data File. For designing the Data File please consult your DBA.

Given below are the hardware requirements to install and run ONEWEB on a machine.

TCP/IP Network – A physical TCP/IP network is required for ONEWEB. All Client machines, Web servers, Application Servers, Database servers and Load Balancers communicate using this network. Install at least one network adapter in each computer running ONEWEB.

Load balancing is required whenever two or more Web Servers or Application Servers are used for running ONEWEB in a cluster configuration. Either hardware or software load balancing can be used.

Hardware Specification

CPU: x86-64 (Intel or AMD) 1.5 GHz or faster Processor RAM: 8 GB or higher

Software Specification

OS: Windows: Windows 8 or Windows 10 Linux: Ubuntu 16.04.3 LTS or Later MacOS: OS 10.10 or Later

Web browsers: Google Chrome 60 or higher Mozilla Firefox 57 or higher Microsoft Edge 40 or higher

The tasks you perform to complete the installation are listed in the following section. The section also gives a summary of each task and explains if the task is required or optional, along with links to sections that describe the task in more detail.

Git Server To manage customized source code, allow team customization and collaborations, we recommend using Git as the repository and version control system. You can use any Git server to do version control either on cloud or on-premise.

Eclipse To do customization on ONEWEB designed applications, you need Eclipse tool as the code editor for customized code. To download eclipse, please go to http://www.eclipse.org/downloads/packages/ then select Eclipse IDE for Java EE Developers. We recommend using Mars Version or later with JAVA version 8

You can install ONEWEB as an administrative user (root) or as a non-administrative user (non-root) and later you must use the same user to install the required software. For example, you must install ONEWEB, Java and WebSphere Application Server using the same user.

Administrator user - If you want the administrator user (root) to install products on a computer, please make sure the files have all privilege to execute.

Non-administrator user - If you want a specific user to install products on a computer, please make sure the user has all the privileges on directory. If you want a group of users to install products on a computer, please make sure the group has all privileges on directory using the group mode. You can install ONEWEB by using one account and offerings by using another account that is in the same group.

A web server is responsible for accepting HTTP requests from clients (web browsers) and serving them HTTP responses along with optional data content, such as web pages (HTML documents) and linked objects such as images. ONEWEB supports both Apache Web as well as IBM HTTP server.

An application server is a software framework that provides both facilities to create web applications and an environment to run them. ONEWEB supports the following Application Servers

• Websphere Application Server

• JBOSS EAP

• Wildfly

This section includes the step by step preparation procedure to install ONEWEB on the application server.

To use ONEWEB on a new instance of Wildfly 10.0.0.Final, you must establish your database, deploy the provided archives for this server, and perform a number of configuration tasks. You can use one of two operating modes: stand-alone server or managed domain. As a stand-alone server, the operating mode is similar to the previous versions of Wildfly.

ONEWEB requires a full profile. A sample full profile is provided for both stand-alone and domain modes.

The Wildfly Management Console and Management CLI interfaces allow administrators to manage application deployments in a production environment.

To configure ONEWEB on Wildfly you must follow a series of steps:

To configure ONEWEB database you must follow the below steps.

Step1: Create Schema & role authorization. Use following details to create database schema on postgresql server. Create schema for ONEWEB Application by using SQL script. Execute: create_schema.sql Create role authorization for ONEWEB Application by using SQL script. Execute: create_role.sql Alter password to user role by using SQL script. Execute: alter_password.sql

Step2: Restricting database user permissions. Alter administrator's privilege and search_path on schema for each user. Alter privilege for ONEWEB Application by using SQL script. Execute: alter_priviledge.sql

Step3: Create table and initial data.

Reference: https://www.postgresql.org/docs/9.3/tutorial-install.html

To plan your database configuration, you need to know which databases must be configured to use the software. You also need to know the following like which components of ONEWEB you will use and their associated databases, the tasks required for administering the databases, and the security privileges associated with the database system.

Database creation is the mandatory first step so that you can connect the data source when you deploy the ONEWEB archives.

Below is the list of database schemas and their associated component name in ONEWEB.

Recommendation

Separate table spaces for each application This makes sure that the issues with one table space do not impact the second application. Table space can be taken offline without impacting all applications instead of the one that has data files in it.

Table and indexes must be maintained in separate table spaces This is a typical implementation in production systems.

Properly name data files that are part of table space Easily readable convention EAF_MASTER_data_01.datafile , BPM_data01.datafile

High Availability Architecture is to be considered for serious critical systems, which can tolerate a certain amount of failure and errors before they no longer work properly. The design of this architecture comes from a key criterion for the capability of your service to meet your expected service level agreement (SLA).

The key aspects to design High Availability Architecture are as follows.

Avoid single points of failure - To avoid single points of failure and to maximize system availability, it needs to have some degree of redundancy. The solution typically involves horizontal scaling across multiple machines.

1. Hardware redundancy - Eliminate single points of failure in the system by including hardware redundancy. There are many techniques to design hardware redundancy. - Use horizontal scaling to distribute application servers across multiple physical machines (Active-Active) - User backup server (Active-Standby)

2. Process redundancy - Provide process redundancy and isolation so that a failing server does not impact the remaining healthy servers.

Load balancing (Active-Active) - Use Load balancing techniques to make sure that the individual servers are not overwhelmed with client requests while other servers are idle.

Fail-over support (Active-Standby) - The environment must be able to continue processing client requests, even if one or more components are offline.

Cloud Architecture is an alternate way for you to host your Application on a Cloud Provider. This type of architecture has many benefits such as lower cost of server maintenance, lower cost of hardware investment, etc. If you are looking for Cloud there are many choices for Cloud solutions such as PaaS (Platform as a Service), IaaS (Infrastructure as a Service), and SaaS (Software as a Service). ONEWEB can be hosted on the cloud as PaaS or SaaS solution based on your customer preferences.

Standalone Architecture is simple, easy to maintain, and most budgetary to cost. This architecture is suitable for less critical systems that can accept some downtime to recover or upgrade the system. This architecture has 3 tier components which consist of the Web tier, Application tier, and Database tier as shown in the following diagram.

Web tier - This tier is used to receive a request from the client or load balancer, then process the static content request and forward a business logic request to the Application Server in the Application tier.

Application tier - This tier is used to process the request from the client using Application Server Middleware.

Database tier - This tier is used to persist data into storage.

The Standalone Architecture diagram above is shown as three instances of servers, which is the best virtue for Architecture. You can also separate each component using a firewall or network infrastructure to secure your system and improve performance. But it is not necessary to separate each component (Web, Application, and Database), as these components can also run on the same server but in that case, the server should have enough capacity for all components. You may also choose to separate these into two servers, one for the Web, whereas the Application, and the database on the second server. This decision certainly depends on your resources and your security policy.

ONEWEB can be installed as distributed containers using simple docker engine or as an orchestrated container architecture using Kubernetes. The ONEWEB containerized installation include the following containers.

• oneweb-iam2 - Authentication & Authorization

• oneweb-uxp - User Experience Runtime

• oneweb-bpp - Business Process Runtime

• oneweb-mfr - Microflow Runtime

• oneweb-mfd - Microflow Designer

• oneweb-pgd - Page Designer

• oneweb-pgb - Page Builder

• oneweb-designersuite - AppSpace, App Designer, Process Designer and other Utilities

• apache conatiner - Web Server

• database container - Database

The sample Kubernetes architecture followed by ONEWEB is depicted in the image below.

Log in to the Wildfly Management Console (By default, http://(IP Address):9990)

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.AD.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/EAFUIWeb

Firewall - ONEWEB supports firewall to enhance your security. Either hardware or software firewall can be used.

Recommended firewall in ONEWEB Architecture is shown in picture below.

Firewall between Internet and DMZ Zone is the most recommended to protect your application and network from the internet. Firewall between DMZ Zone and Internal Network Zone to protect your local network as the second tier from the internet.

As some network security policies may require more firewall added between Application Server and Database Server. ONEWEB also supports that case. But some cases may require firewall policy parameter tuning to prevent database connection problem.

SSL - ONEWEB supports SSL/TLS using Application Server features such as Wildfly, JBoss EAO or IBM WebSphere Application Server. You can configure SSL Certificate at Application Server which commonly supports Self Sign Certificate or Certificate from CA.

To configure Apache2 you must follow below steps.

Setting Apache reverse proxy. Configure a new virtual host or site, copy that file into the same directory

Disable and Enable the new VirtualHost using the a2dissite, a2ensite utility and restart Apache2

Disable

Enable

Restart

Apache2 Modules. Use the a2enmod utility to enable a module:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_ajp
sudo a2enmod rewrite
sudo a2enmod deflate
sudo a2enmod headers
sudo a2enmod proxy_balancer
sudo a2enmod proxy_connect
sudo a2enmod proxy_html

Setting port. Change Apache default port to a custom port. Edit: port.conf

Testing your application's context root.

The first step concerns your choice of persistence and permissions on the database. Create a database for ONEWEB before the deployment of the WAR file. You should create the database schema using the SQL scripts following the details in Prepare Database Server

Connection to the ONEWEB database, as shown in the data source credentials and any subsequent requests to the database are handled through a database user. This database user is for example erp_oneweb.

Refer to section Install ONEWEB Application Components for the detailed step by step information on how to deploy ONEWEB.

This document provides access to the detailed system requirements information on the supported releases of ONEWEB.

The following table shows the detailed system requirements information for the specified release and operating system for ONEWEB.

Operating System

AIX

Windows

Linux

Application Server Prerequisites

Databases Prerequisites

Java

Web Browsers

In this section we will detail the step by step process of installing the ONEWEB Application Components. You can deploy ONEWEB Application Components using the Wildfly Management Console or the Management CLI. This example illustrates using the Management Console.

This section provides step by step process of installing the ONEWEB Process Components. You can either deploy ONEWEB Components using the Wildfly Management Console or the Management CLI. This example illustrates using the Management Console.

The management interfaces in Wildfly are secured by default to prevent security violation from remote systems. Local non-HTTP access is protected by a SASL mechanism which consists of a negotiation between the client and the server when the client connects for the first time from the localhost. To access the Wildfly administration console, you must register an Administrator user as follows:

Open a command prompt in the <JBOSS_HOME>/bin directory. Enter ./add-user[.sh|.bat] <username> <password> <ManagementRealm>

After configuring Wildfly administrator user restart the application server. Verify by logon to Wildfly management Console with admin user.

http://(IP Address):9990

System will redirect user to the Wildfly admin console on successful logon.

This document will guide on how to enable single sign-on to access different applications deployed into different servers, where these applications belong to the same security domain.

Before you begin You need to have configured security domain which handles authentication and authorization. Verify the application EAR, WAR have use same security-domain

To enable SSO Turn on SSO in Wildfly server configuration Edit the standalone.xml as follows

/{WILDFLY_HOME}/standalone/configuration/standalone.xml.

If you use data source persistence, you must install a driver before creating the data source. Use the below details to install database driver.

Download the JDBC driver from your database vendor. (ex. postgresql.jar)

Add the driver to Wildfly, using Wildfly Management console.

• Click on " Deployments" -> " Add" and select "postgresql.jar", click "Next"

• Check ✔ on Enable and Click "Finish"

The database driver is installed successfully.

The following table gives the datasource connection details for the ONEWEB database.

You can configure the data source by using the JBoss Management Console or the Management CLI. Here, you use the Management Console.

Log in to the JBoss Management Console. By default, http://(IP Address):9990 Navigate to the Datasources panel. Configuration -> Subsystems -> Datasources Select Type "Non-XA" -> and then click add (5) Create datasource -> Choose datasource "custom" and then click "Next"(7)

Specify the details for the new data source. Datasource Attribute Name: Datasource Name JNDI Name: Specifies the JNDI name for the datasource

JDBC Driver Select Detected Driver "postgresql.jar" and then click "Next"

Verify the datasource connection, click "Test Connection" and then click "Finish"

The org.apache.catalina org.apache.catalina.connector property was used to set UTF-8 encoding in the Wildfly 10 configuration. These properties have no impact since Wildfly now uses Undertow. In order to set UTF-8 encoding instead of changing:

<system-properties>
<property name="org.apache.catalina.connector.URI_ENCODING" value="UTF-8" />
<property name="org.apache.catalina.connector.USE_BODY_ENCODING_FOR_QUERY_STRING" value="true" />
</system-properties>

Editing the standalone.xml as follows

/{WILDFLY_HOME}/standalone/configuration/standalone.xml

Add: system-properties tag

Edit: servlet-container

<servlet-container name="default">

Edit the standalone.xml as follows

/{WILDFLY_HOME}/standalone/configuration/standalone.xml

Before you configure you should have informed LDAP for configuration authentication with Wildfly Refer to section LDAP Integration

Example:

Add: <login-module> tag

Edit: value ldap setting

Before you Begin To integrate ONEWEB application with the Wildfly authentication, you must register an Application user. Refer to section Step2: Configure access to Wildfly Management Console. You should select type to add user for Application user (b)

Authentication with Wildfly - Edit the standalone.xml as follows

/{WILDFLY_HOME}/standalone/configuration/standalone.xml

Add: <login-module> tag

Wildfly use Subsystem configurations. A subsystem is an added set of capabilities added to the core server by an extension. A subsystem provides servlet handling capabilities a sub system provides and EE, EJB, IO etc. A profile is a named list of subsystems, along with the details of each subsystem's configuration EE Subsystem The EE subsystem allows you to configure common functionality in the Java EE platform, such as defining global modules, enabling descriptor-based property replacement, and configuring default bindings. managed executor service context-service The name of the context service to be used by the executor. core-threads The minimum number of threads to be used by the executor. If left undefined the default core-size is calculated based on the number of processors. A value of zero is not advised and in some cases invalid. See the queue-length attribute for details on how this value is used to determine the queuing strategy. hung-task-threshold The runtime, in milliseconds, for tasks to be considered hung by the managed executor service. If value is 0 tasks are never considered hung. jndi-name The JNDI Name to lookup the managed executor service. keepalive-time When the number of threads is greater than the core, this is the maximum time, in milliseconds, that excess idle threads will wait for new tasks before terminating. long-running-tasks Flag which hints the duration of tasks executed by the executor. max-threads The maximum number of threads to be used by the executor. If left undefined the value from core-size will be used. This value is ignored if an unbounded queue is used (only core-threads will be used in that case). queue-length The executors task queue capacity. A length of 0 means direct hand-off and possible rejection will occur. An undefined length (the default), or Integer.MAX_VALUE, indicates that an unbounded queue should be used. All other values specify an exact queue size. If an unbounded queue or direct hand-off is used, a core-threads value greater than zero is required. reject-policy The policy to be applied to aborted tasks. thread-factory The name of the thread factory to be used by the executor. IO Subsystem The IO subsystem allows you to define workers and buffer pools to be used by other subsystems. worker io-threads Specify the number of I/O threads to create for the worker. If not specified, a default will be chosen, which is calculated by cpuCount * 2 stack-size The stack size (in bytes) to attempt to use for worker threads. task-keepalive Specify the number of milliseconds to keep non-core task threads alive. task-max-threads Specify the maximum number of threads for the worker task thread pool.If not set, default value used which is calculated by formula cpuCount * 16 buffer-pool buffer-size The size of each buffer slice in bytes, if not set optimal value is calculated based on available RAM resources in your system. buffers-per-slice How many buffers per slice, if not set optimal value is calculated based on available RAM resources in your system. direct-buffers Does the buffer pool use direct buffers, some platforms don't support direct buffers Processor Core A processor core (or simply “core”) is an individual processor within a CPU. Many computers today have multi-core processors, meaning the CPU contains more than one core.

For many years, computer CPUs only had a single core. In the early 2000s, as processor clock speeds began plateauing, CPU manufacturers needed to find other ways to increase processing performance. Initially, they achieved this by putting multiple processors in high-end computers. While this was effective, it added significant cost to the computers and the multiprocessing performance was limited by the bus speed between the CPUs. By combining processors on a single chip, CPU manufactures were able to increase performance more efficiently at a lower cost. The individual processing units became known as “cores” rather than processors. In the mid-2000s, dual-core and quad-core CPUs began replacing multi-processor configurations. While initially only high-end computers contained multiple cores, today nearly all PCs have multi-core processors.

Thread The threads of a computer program allow the program to execute sequential actions or many actions at once. Each thread in a program identifies a process that runs when the program asks it to. Threads are typically given a certain priority, meaning some threads take precedence over others. Once the CPU is finished processing one thread, it can run the next thread waiting in line. However, it's not like the thread has to wait in line at the checkout counter at Target the Saturday before Christmas. Threads seldom have to wait more than a few milliseconds before they run. Computer programs that implement "multi-threading" can execute multiple threads at once. Most modern operating systems support multi-threading at the system level, meaning when one program tries to take up all your CPU resources, you can still switch to other programs and force the CPU-hogging program to share the processor a little bit. The term "thread" can also refer to a series of related postings in an online discussion. Web-based bulletin boards are made up of many topics, or threads. The replies posted in response to the original posting are all part of the same thread. In e-mail, a thread can refer to a series of replies back and forth pertaining a certain message. JVM Options there are three types of options that you can include to your JVM, standard, non-standard, and advanced options. If you try an advanced option, you always use the option with -XX . Similarly, if you’re applying a non-standard option, you use -X . Standard options don’t prepend anything to the option. Java heap size

-Xms - set initial Java heap size -Xmx - set maximum Java heap size -Xss - set java thread stack size

Xms – This option is to define starting heap size for JVM, e.g.,Xms2048m which means an initial heap size of JVM is 2 GB around. So, when a JVM starts, the heap memory will be this much big. Surprisingly yes! This is carried to prevent resizing during startup and enhance the startup time of JVM. Xmx – This option is to define the maximum heap size of JVM, e.g.,Xmx2048m which means the maximum heap size of JVM will be 2 GB only. You will essentially always have-Xms and -Xmx together. PermGen Size Earlier JVM options define the size of heap memory but -XX:PermSize is to define the size of PermGen space, where the string pool and class metadata is saved. This option is particularly effective for a web server like Tomcat, which often loads classes of the web application during deployment. By the way, It’s worth realizing that PermGen space is taken over by Metaspace in Java 8, and this option is not applicable if you are running with JRE 8 JVM. Handling ‘OutOfMemory’ Error To trigger heap dump on out of memory, you can use -XX:+HeapDumpOnOutOfMemoryError This JVM option produces a stack dump when your JVM dies with OutOfMemory Error. There is no expense involved unless an OOM really occurs. This flag is a requisite for production systems as it is usually the only way to determine the problem deeply.

The heap dump will be set up in the “current directory” of the JVM by default. If you wish to create heap dumps on specific directory, then run

-XX:HeapDumpPath= [path-to-heap-dump-directory] -XX:+UseGCOverheadLimit -XX:OnOutOfMemoryError="< cmd args >;< cmd args >"

The heap dump file can be huge in size, up to gigabytes, so assure that the target file system allows sufficient capacity. If we want to restart the server immediately after out of memory occur, then we can set this parameter of the same purpose –XX:OnOutOfMemoryError="shutdown -r" Trace class loading and unloading -XX:+TraceClassLoading and -XX:+TraceClassUnloading are two JVM options that we use to print logging information whenever classes loads into JVM or unload from JVM. These JVM flags are useful if you have any type of memory leakage linked to classloader and suspecting to it that classes are not unloading or garbage collected.

Recommended Standard Configure for ONEWEB:

Log in to the Wildfly Management Console. (By default, http://(IP Address):9990)

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.PGR.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Before you start you need to configure the following data in database.

Log in to the Wildfly Management Console. (By default, http://(IP Address):9990)

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application EAR file. (Package name: "ONEWEB.AR.x.x.x.x.YYMMDD24HHMM.wildfly.ear") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/FrontWeb

Before you start you need to configure the following data in database.

Log in to the Wildfly Management Console (By default, http://(IP Address):9990 )

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.PD.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/PD

Before you start you need to configure the following data in database.

Log in to the Wildfly Management Console (By default, http://(IP Address):9990 )

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.PR.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/BPMREST

Log in to the Wildfly Management Console. (By default, http://(IP Address):9990)

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.PGD.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Open ONEWEB Page Designer console by typing URL http://<ip>:<port>/PageDesigner/#/settings/db/migration

Click "Install"

Install page application. Application will respond with "Validated"

The Application package has been deployed and initialized successfully.

Verify application with URL: http://(IP Application server):(port)/PageDesigner

This section provides step by step process of installing the ONEWEB Integration Components. You can deploy ONEWEB Components using the Wildfly Management Console or the Management CLI. This example illustrates using the Management Console.

This chapter will tell you how to verify all the components of the ONEWEB platform once all the components are installed. If any of the components are not installed properly then the verification procedure might fail.

When you design an application using the ONEWEB platform, they can be of different types.

• UI/ UX Applications to provide static web pages.

• Process Apps - Applications which use ONEWEB only for managing the business process.

• Interface Apps - Applications which use ONEWEB for integration between different systems.

• Complex Apps - Applications that consists of a combination of the above three types of application.

ONEWEB Application Archive Package for IAM Feature is shown below.

Before you start you need to configure the following data in database.

Log in to the Wildfly Management Console (By default, http://(IP Address):9990 )

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

1. oose the Application WAR file. (Package name: "IAM2RESTService.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

2. Select Enable and then click "Finish"

3. Once successfully deployed, deploy the other packages as well.

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/IAM2Web

Before you start you need to configure the following data in database.

Log in to the Wildfly Management Console (By default, http://(IP Address):9990 )

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.MFD.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/MicroFlow

Before you start you need to configure the following data in database.

Log in to the Wildfly Management Console (By default, http://(IP Address):9990 )

Navigate to the Deployment panel (Highlighted as 1 in below figure). Click on Add (2)

Select "Upload new deployment" and then click Next (4)

Choose the Application WAR file. (Package name: "ONEWEB.MFR.x.x.x.x.YYMMDD24HHMM.wildfly.war") and then click Next.

Select Enable and then click "Finish"

Wait for the confirmation message to be shown. The Application package has been deployed successfully.

Verify application with URL: http://(IP Application server):(port)/MicroFlowRest

Once the ONEWEB Platform is installed, you can verify the application by the following details.

App Designer

Login to the application with URL: http://(IP Application server):(port)/FrontWeb

Locate to App Designer -> Import Entity

Import Entity: EN_v001.entity.cfg.json

Go to App Designer >> Menu Configuration >> Create New Menu under APP Zone

When creating a new application in ONEWEB you need to select the type of application you want to develop according to your project's requirements. For each development scenario, different tools and features are available.

What is a Web App?

A Web App is a browser-based application that has a responsive interface and displays user experiences optimized for all screen sizes and devices. Users do not need to install a Web App on a device, but only a URL to open it in their browser, in a desktop, laptop, mobile device or any device with a browser. Most of these types of apps are used to display large amounts of data, such as tables and constraints when targeting web pages, desktops, and apps.

What is a Mobile App?

A Mobile App is a hybrid app shell, developed using a mobile application framework like Apache Cordova. The app has mobile-optimized user experience and can access the device capabilities and features using plugins. It can work offline and have data caching features to access the local storage of the device. The code is mostly developed as cross-platform, which means you only have to develop one project and that application project works on both supported mobile platforms (iOS and Android).

Mobile App or Web App: which to choose?

Mobile apps and web apps should be utilized for different purposes, to maximize the advantages in each case. Below we will list several focal points to let you make an informed decision when choosing to develop a mobile app or a web app for your project.

UI Apps are apps which have only a User Interface with no back-end processes, or Apps which use ONEWEB for generating UI's and may use back end systems from another vendors. Users can also consider the following UI Design Patterns while developing UI forms. These patterns can apply to the user interface section of any application type.

Design Pattern 1 - Structured Format, can be used when

Data should adhere to predefined structure.

Limit the format of input data.

Split large input fields into smaller parts.

Give attention to the order of input fields.

Design Pattern 2 - Morphing Controls, can be used when

Some controls on UI form are not required to be displayed always.

Present user with selective controls.

Declutter the screen.

Design Pattern 3 - Inline Editor, can be used when

Edit in the same place as displayed.

Edit without redirecting.

Quick and Easy.

Hover effects are used to invite editing.

Design Pattern 4 - Good Defaults, can be used when

Pre-fill form.

Default with data most likely to match.

E.g. signing up to a newsletter / accepting the terms and agreements.

Design Pattern 5 - Module Tabs, can be used when

Content separated into sections.

Accessed via a single content area using a flat navigation structure.

Each tab can be viewed separate from each other.

Design Pattern 6 - Categorization, can be used when

Categorize content into a hierarchical section using Tabs / Modules.

Categorize contents to groups.

Categorize to main category or section (nested)

Design Pattern 7 - Progressive Disclosure, can be used when

Present minimum data required.

Move complex and less frequently used options out.

Manage confusion by decluttering.

Maintain Focus & Attention.

Design Pattern 8 - Adaptable view, can be used when

UI to fit the specific needs.

Compatibility on multiple devices/ themes.

Switch/alter between different styles.

Tailor usability and the experience to their specific need.

Design Pattern 9 - Pagination, can be used when

To view subset of sorted data.

Dataset is ordered.

All Data cannot display on a single page.

Once ONEWEB Application is installed successfully, you can verify the application with following detail.

MicroFlow Designer

Login to the application with URL: http://(IP Application server):(port)/FrontWeb

Navigate to MicroFlow -> Create blank Project

Create New Process with Name: XXX Service

Go to "Import"

Choose file getCurrencyFixer and Click "Import"

Once import is complete, go to Design tool and you can see the getCurrencyFixer Service

Once ONEWEB Process is installed successfully, you can verify the application with following detail.

Process Designer

Login to the application with URL: http://(IP Application server):(port)/FrontWeb

Navigate to Process Designer -> Create blank Project

Create New Process Name: Occurrence Management

Import File: Occurrence Management

Go to design tool

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.

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.

Interface Apps are apps which use ONEWEB for providing integration service among the different components of the application or to provide an interface for external systems to interact with their application. ONEWEB has built in integration for interacting between its components. It can also use Microflow to expose a service to another system to interact. Given below are some of the most common types of integration using Microflow.

• Web Service Integration

• Integration using Files

• Integration using Java

• Integration through Database

Complex Apps are apps which use ONEWEB to generate a mixture of web and mobile UI, web forms, business processes and integration services to create an enterprise application. ONEWEB provides different designers to create each of these components and they can be integrated using ONEWEB Microflows.

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.

Process Apps are apps which use ONEWEB for managing the business process. There can be different types of business processes depending on the user business. Given below are some of the most common business process design patterns.

Design Pattern 1 - Sequential

Most common type of process flow

Tasks follow one another

Tasks only start when the preceding task completes.

Design Pattern 2 - Parallel

Multiple activities are active at the same time.

Tasks are performed in parallel.

Different users/groups need to work on the same workflow at the same time.

Design Pattern 3 - Hybrid

Design Pattern 4 - Parent Child

Design Pattern 5 - Loop

Use a loop to recreate the same activity infinitely until a certain condition is met.

Either there would be a start rule to delay start of the activity, or a destination rule to move the task forward.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.