Creating Custom Form Components

Scenario

Let's say the implementation teams want to control a particular form component, e.g. 'Auto Suggest' form component must display user names as well as their profile picture. To accomplish this, a public registry is maintained for the XType templates and based on the parameters the templates are loaded on the form component. This way the implementation teams can provide a different template for a given XType. This is made controllable at a global level as well as at a more granular level (a custom template for an XType specific to a form).

Steps to Configure Custom Form Components

Create any template using handlebar as per your requirements.

Here is a sample template for customizing Auto Suggest form component.

<div class="ct-form__group ct-form__group-tm ct-{{xtype}}-bs {{itemId}}-bs">
  {{#if hideLabel}} {{#unless onlyInput}}

  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
    {{!--col-sm-12 begins--}} {{/unless}}

    <div class="input-group"{{anchorStyle}}>
      {{!--input-group--}} {{else}} {{#if_one_equals labelAlignType 'TOP' 'INLINE'}}
      {{> CTRIAFramework/UITemplates/jqtbs/fdf/ct-cmn-label.cttpl}}

      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        {{!--col-sm-12 begins--}}

        <div class="input-group"{{anchorStyle}}>
  		{{!--input-group--}} {{else}}
          {{> CTRIAFramework/UITemplates/jqtbs/fdf/ct-cmn-label-prop.cttpl}}  

	  		<div class='col-xs-{{getFieldLabelProportion this "field"}} 
              			col-sm-{{getFieldLabelProportion this "field"}} 
              			col-md-{{getFieldLabelProportion this "field"}} 
              			col-lg-{{getFieldLabelProportion this "field"}}'>
	    	{{!--col-sm-9 begins--}}

	    		<div class="input-group"{{anchorStyle}}>
	       			{{!--input-group--}} {{/if_one_equals}} {{/if}} 

	       			<input type="autosuggest" 
                 	data-item-field="{{itemId}}" 
              	 	name={{itemId}} 
              	 	class="form-control ct-form__ip" 
                  	{{#unless editableInd}}disabled{{/unless}} 
             			aria-labelledby="lbl_{{itemId}} fbl_{{itemId}}"/>

		  			<span id="suggestions" class="ct-form__ip-autosuggest-ico" 
                		data-item-id="ct-autosuggest">
		    			<i class="flaticon-expand_down"></i>
		  			</span>

		  			<span class="animline"></span>

		     		<input id="{{formId}}-{{itemId}}" 
                    	data-item-field="{{itemId}}" 
                    	data-event="blur" data-selection="single" data-model="true"
                    	name={{itemId}} class="form-control currency-input" 
            			{{#unless editableInd}}disabled{{/unless}} 
            			aria-labelledby="lbl_{{itemId}} fbl_{{itemId}}"/>
		    
           				<label class="currencyLabel ct-form__label"></label>
		      			{{> CTRIAFramework/UITemplates/jqtbs/fdf/ct-cmn-error-msg-alert.cttpl}}  
						{{> CTRIAFramework/UITemplates/jqtbs/fdf/ct-help.cttpl }}
				</div>
				{{!--input-group ends--}} {{#unless onlyInput}}
	      	</div>
	     	{{!--col-sm-12 ends--}} {{!--col-sm-9 ends--}} {{/unless}}
      
    			<div class="clearfix"></div>
     
          </div>   
 
        </div>
     
     </div>
  
  </div>

</div>

Register the template through Canvas Studio configuration.

CREATE -> TEMPLATE

The file path of userProfile.cttpl is defined in the Template Config field. The userProfile.cttpl is located in the application WAR folder (e.g. ctmodelhouse/templates/html).

Once a template is created in Canvas Studio, the created template is available in "Template" Tab in Canvas Studio.

Create a new form item by using the user defined template.

CREATE -> FORM ITEM

Enter a name for the custom form component in the Item Type field.
Enter a description for the custom form component in the Item Description field.
Specify the template for the View mode of the custom form component by clicking the Search icon in the View Template field and choosing a template.
The selected template appears in the lookup field.
Specify the template for the Edit mode of the custom form component by clicking the Search icon in the Edit Template field and choosing a template.
Different templates must be created in order to use in View mode or in Edit mode

Specify the JSON for configurations related to print and export of form items in the Export Configuration. It should hold the following key:value structure.

{
	'RenderableName':'Class Name'
	'RenderableClass': 'Path'
}

An empty JSON {} can be given if export or print functionality is not required.

RenderableName – This represents the namespace for the class name. Any new class that is created to handle functionalities for form components must implement Renderable.
RenderableClass – This represents the path of the Java class that handles the logic for printing and exporting functionalities for the custom form component.

When a new Java class is added for a custom component, it should import Rendersnake. Rendersnake is a third-party JAR to generate the export/print content for the form components.

For the Auto Suggest example, the key:value must be as follows:
For Canvas Class,

{
	'RenderableName' : 'Textfield'
}

The implementation teams can create their own Renderable (Java) class if they require customized behavior for printing and exporting and specify the Class name in Export Configuration.
For customized Class,

{
	'RenderableName' : 'CustomHtmlEditor',
	'RenderableClass' : 'com.intellectdesign.modelhouse.CustomHtmlEditor'
}

Sample Customized Java Class to handle print and export functionalities:

package com.intellectdesign.modelhouse;
import java.io.IOException;
import java.util.Map; 
import org.rendersnake.HtmlAttributes; //class name of third-party jars 
import org.rendersnake.HtmlCanvas; //class name of third-party jars 
import org.rendersnake.Renderable; //class name of third-party jars 
import com.intellectdesign.canvas.common.UserValue; //To get the format of files to export and print
import com.intellectdesign.canvas.formexport.framework.FormExportModel; //To get the formObject 

/*
*	The CustomTextField class renders the Text Box that produce HTML pages
*/

public class CustomTextField implements Renderable
{
	FormExportModel formModel;
	Map item; 
	@SuppressWarnings("unused")
	private CustomTextField()
	{
		// Nothing to do here
	}

	/*
	* Constructor of the class which is associated with the params
	* 
	* @param item
	*/

	public CustomTextField(Map item)
	{
		this.item = item;
	}

	public CustomTextField(FormExportModel formModel, Map itemMetadata)
	{
		this.item = itemMetadata;
		this.formModel = formModel;
	}

	public void renderOn(HtmlCanvas html) throws IOException
	{
		UserValue userValue = this.formModel.getUserInfo();
		String direction = userValue.getDirection();
		if (direction != null && (direction.equalsIgnoreCase("RTL"))
		&& this.formModel.getExportFormat().equalsIgnoreCase("FORMPDF"))
		{
			renderValue(html);
			renderKey(html);
		} else
		{
			renderKey(html);
			renderValue(html);
		}
	} 
	
	private void renderKey(HtmlCanvas html) throws IOException
	{
		if (!"Y".equals(item.get("HIDE_LABEL")) && !"Y".equals(item.get("CONTAINER_HIDELABEL")))
		{
			html.td(new HtmlAttributes().width("20%")).div(new HtmlAttributes().class_("headerTD_PDF REV_UNICODE"))
			.content((String) item.get("FIELD_LABEL"))._td();
		}
	}

	private void renderValue(HtmlCanvas html) throws IOException
	{
		html.td(new HtmlAttributes().width("30%")).div(new HtmlAttributes().class_("NormalTD_PDF REV_UNICODE"))
		.content((String) item.get("screenViewData"))._td(); 
	}
}

The following table lists the predefined Java classes for the form components that take care of the print and export. Each Renderable Class is internally mapped to certain form components.

Renderable Class	Form Component Mapping
Emptyfield	Button Conditional Mandatory Text Empty Cell Hidden Line Mandatory Text
Textfield	Amount Field Autosuggest CheckBox Group Static Field Color Field Combo Box Date Field Editable Lookup Hyperlink Icon ComboBox Lookup Radio Group Radio Group Static Field Slider Field Spinner Field Static Amount Field Static Combo Box Static Date Field Static Field Text Field Toggle
Listfield	Checkbox Checkbox Group Item Selector Multi Select Combobox Slider Field Static Multi Select Combobox
ListofHashMapField	File Upload Panel
HtmlPanel	Html Editor
TextArea	Static Text Area Text Area
WidgetPanel	Widget Panel
Composite	Composite Field
Container	Field Set Lazy Form Panel Lazy Panel Panel
Tabpanel	Tab Panel
FormImage	Logo

Once a form item is created in Canvas Studio, the created form item is available in "Custom Form Item" Tab.

Add the custom form item on the required form.

CREATE -> FORM
Custom form item is available in "Custom" category.
To access the custom form component,
1. Click the custom form component that you want to include on the form.
2. Click Save.
Link the form to the appropriate View, App and Workspace. Custom component will be rendered in the end application. The following screen shot showcases the custom Auto Suggest form component.

Here, the data is fetched through the data support class from which the user names and image locations are returned as JSON in the client side and are listed in auto suggest.

Refer the following page:

Registering the Custom Form Components and their Events