The Smart Forms created using ONEWEB are highly customizable - both in terms of look and feel as well as functionality. This is what makes ONEWEB a great tool for creating Enterprise level applications as well as simple basic applications.

Both Page and Smart form can be customized in order to give more control to the user to design the application as per their specific requirements. The following sections detail the different ways in which each component can be customized.

ONEWEB mainly controls the look and feel of the forms through CSS. Cascading Style Sheets (CSS) is a language for describing how content is presented. Its purpose is to help separate content (HTML) from the presentation.

ONEWEB provides a default custom CSS that the users can edit to create their individual styles. The name of the file is <CurrentTheme>_Custom_Style.css. To find the file, open Eclipse IDE, on the Project Explorer pane, go to on /MasterWeb/WebContent/theme/<CurrentTheme> folder, and open <CurrentTheme>_Custom_Style.css. For an example shown below, CurrentTheme is Responsive2016.

This file is blank when you start with ONEWEB. You can add any custom css that you want to apply to your project here. The styles that you define here are applicable across all Smart Forms. For e.g. to change the header color please add the below snippet to the custom CSS file.

Or to add the default background to all text fields add the following snippet.

Once the changes are saved, right-click the server and select Publish from the menu. The state changes to Synchronized once the project has been deployed to the server.

Compelling and functional UI is crucial for the success of any application. For achieving this high level of sophistication, sometimes the designers might need to introduce custom functionality to the UI elements. Pages and mobile applications developed using Page Designer can be customized to support such advanced features required in the applications.

On the Page Designer, a user can add customization at different levels. For e.g. users can add custom style to an HTML element to make it stand out on the screen. Users may also need to add custom actions or animations to an element action. All these can be done using Page Customization.

You can add calculation logic to ONEWEB Smart Forms using JavaScript & Manual Java Class. ONEWEB Smart Forms have Entity Actions to attach a JavaScript file to an entity. Please refer to Entity Actions section for more details on how to attach JavaScript to an entity.

JavaScript alone can be used for very simple calculations. But ONEWEB provides the ability to execute a Manual Java class through AJAX calls.

The Manual Java class needs to implement the ManualInterface and override the processManual method as shown below.

ONEWEB supports adding a custom manual SQL to an entity in two ways.

Inside Module configuration

Java Manual Class

Module Configuration

Inside Module Configuration, ONEWEB provides three options for inserting manual SQL commands to retrieve data in a module. When you open the Module Configuration panel on any module, you can see the three below options. You can choose the one that matches your requirement.

SQL ShowList - This SQL command is used to query the data to be shown as a list in a 1-Many module. (Insert/Update Mode)

SQL Select Row - This command is used to query data to be shown in a 1 -1 Module. (Insert/Update Mode)

SQL Work queue - This SQL Query is used in Search Mode to show data in the Search Results.

Java Manual Class

ONEWEB supports adding Java classes to be invoked on submit using Java Class Actions or by invoking Java Manual class through JavaScript functions. You can add your custom SQL commands to these Java classes just as you do in an ordinary java application.

There are two ways you can add validation logic to ONEWEB Smart Forms.

JavaScript Validation

ONEWEB Smart Forms have Entity Actions to attach a JavaScript file to an entity. Please refer to Entity Actions section for more details on how to attach JavaScript to an entity.

JavaScript validation is used mainly for client-side validations such as check field formats or mandatory fields. First add a JavaScript file to the module action.

Now open the workspace in Eclipse and create the JavaScript file specified in the module action. Add the method to validate.

Build and publish to server. Once deployed to server don't forget to add this validation check to the field on AppDesigner. Click on the pencil edit icon for the field to open the configuration panel. Add the validation call in the source Tag property.

Java Validation

ONEWEB Smart Forms have Entity Actions to attach a custom Java class to an entity. Please refer to Entity Actions section for more details on how to attach Java class to an entity. Java validations are used for server-side validations before saving an Entity. First step is to add an Entity Action and specify the Java class name in the Class Action property.

Once a java class is attached to an entity through Entity Action, open the ONEWEB workspace in eclipse; create the java class as extend from "ProcessHelper" and implements "ProcessAction" interface. Eclipse will create a stub of the class. Now override method "validateResult()" to add custom validation logic before saving entity. Please refer to the validation section in Sample Apps for more detailed examples.

package com.manual.doc.order.java;

import java.util.HashMap; import java.util.Vector;
import org.apache.log4j.Logger;

import com.manual.service.ManualDAOFactory; 
import com.master.form.EntityFormHandler; 
import com.master.util.EAFManualUtil; 
import com.master.util.ProcessAction; 
import com.master.util.ProcessHelper;

public class OrderRequestBackOfficeUpdateMode extends ProcessHelper implements ProcessAction { 
	private static Logger logger = Logger.getLogger(OrderRequestBackOfficeUpdateMode.class);
	
	@Override
	public boolean validateResult() {		
		String nextEntity = request.getParameter("goEntity");
		logger.debug("@@@@@ nextEntity :" + nextEntity);
	
		if(nextEntity == null || "".equals(nextEntity)) {
			String entityID = (String)getRequest().getSession().getAttribute("entityID");
			EntityFormHandler entityForm = (EntityFormHandler)getRequest().getSession().getAttribute(entityID +"_session");
			Vector errorVect = entityForm.getFormErrors();
			String moduleID = entityForm.getMainModuleID();
		
			HashMap mainRequestData = EAFManualUtil.getDataHashMapFromSession(moduleID, request);
			String requestID = (String)mainRequestData.get("REQUEST_ID");
		
			try{
				int inCompleteAmt = ManualDAOFactory.getManualDocOrderDAO().countInCompleteOrderUnit(requestID);
				logger.debug("@@@@@ completeAmt :" + completeAmt);
				if(completeAmt > 0){
					errorVect.add("Please verify un-assign order unit.");
					return false;
				}
			}catch(Exception e){
				errorVect.add(e.getMessage());
				return false;
			}
		}
		return super.validateResult();
	}
}

Once completed build and publish to server. Now ONEWEB will execute this validation check every time before saving the entity.

Style, look & feel are very important parts of any UI application. ONEWEB understands the importance of providing the ability to customize the style sheet. For this purpose, Page Designer provides the Style Editor panel to add custom CSS settings.

Click on the arrow at the bottom right of your designer panel to expand the Style Editor window. Users can write the custom CSS setting directly here on the editor.

Users can also add the custom CSS class to the HTML element. Opening the Setting and Data configuration panel on the left menu controls and type the CSS class name in the class list and click enter. The CSS class is added to the element properties. User can also set the ID for the HTML element in the Setting and Data controls panel and then use this id in the CSS to set style.

Sometimes users might need to add a specific custom action to an HTML element. Users can write the action as a JavaScript function on the JavaScript editor provided on the Action Menu Panel

Page Designer also allows including third-party JS libraries into the user application and invoking them from within the pages. Designers can include the JavaScript library files in the Resource tab under Settings. Click on the Add JavaScript icon, browse and choose your file to include in the application. These libraries will be included in the page build as well.

The entity action allows you to use Java code to extend the functionality of your application in ONEWEB. This section will show you how to add custom Java code to your entity.

Configuring Class Action

Go to AppDesigner and open your entity.

In the navigator pane, under Tool -> Action, Drag and drop to the entity.

1. Select Process Name: UPDATE

Enter Class Action: com.training.manual.ApplicationManualClass, click OK to save dialog.

Perform the steps 2 - 5. for the Process Name: INSERT

Create a Java Class file using Eclipse

From the Eclipse IDE, On the Project Explorer Pane, right-click on /MasterWeb/Java Sources/src folder, select New > Class, and name the class ApplicationManualClass. Click Finish to create the Java Class file.

The class generated should look like :

package com.training.manual;

import java.util.Vector;


import com.master.util.ProcessAction; 
import com.master.util.ProcessHelper;

public class ApplicationManualClass extends ProcessHelper implements ProcessAction {

	@Override
	public Vector modifyResult() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public boolean validateResult() {
		// TODO Auto-generated method stub
		return false;
	}
}

There are 2 default methods generated.

public Vector modifyResult(): to modify the submitted data model before process INSERT/UPDATE/DELETE to the database.

public boolean validateResult() : to validate submitted data model, return true if validate pass.

Modify ApplicationManualClass to print out submitted data and the name of clicked button.

package com.training.manual;

import java.util.HashMap; 
import java.util.Vector;

import com.master.util.ProcessAction; 
import com.master.util.ProcessHelper;

public class ApplicationManualClass extends ProcessHelper implements ProcessAction {

	@Override
	public Vector modifyResult() {

		Vector vDataModels = getResultForProcess();
		String buttonAction = request.getParameter("SUBMIT_BUTTON");
	
		System.out.println("######## data: " + vDataModels);
		System.out.println("######## buttonAction: " + buttonAction);
	
		return vDataModels;
	}

	@Override
	public boolean validateResult() {
		return true;
	}

	@Override
	public HashMap modifyLoadUpdateResult() {
		return super.modifyLoadUpdateResult();
	}
}

In the Servers view, right-click the server and select Publish from the menu. The state changes to Synchronized once the project has been deployed to the server.

To test the ApplicationManualClass class, open http://<host>:8080/FrontWeb in web browser and login application.

Click Create Application menu to open Create Application screen.

Click Add button.

In Application Detail, enter data of application and click Submit button.

In the Eclipse, Open Console tab, the standard out should display like this:

Page Designer provides features to support user-defined components as extensions in the Designer. It can be developed by anyone and are specific to either web or mobile application. To know more details about the Component Extension please go to the Component Extensions section.

ONEWEB Page Designer provides all tools required to design, test, and ultimately deploy the mobile apps across all kinds of devices and also to take advantage of the devices’ native functions, such as camera or geolocation.

Typically, mobile low-code development platforms consist of a mobile client application, a middleware server, and an assortment of services that facilitate connectivity to other applications as well as ensure that all security protocols are heeded. The mobile client application ensures connectivity to the middleware server and serves the business logic to the given mobile device. ONEWEB utilizes a microflow engine to handle the business logic and to provide services to ensure connectivity visually.

You can read about how to create a mobile client application in the section Create your first Mobile App and how to integrate the client application with Microflow in section Page Integration with Microflow.