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 components:
Create any template using handlebar as per your requirements.
Here is a sample template for customizing Auto Suggest form component.Code Block <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
Once a template is created in Canvas Studio, the created template is available in "Template" Tab in 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.
Code Block {
...
'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 thirdparty jars
import org.rendersnake.HtmlCanvas; //class name of thirdparty jars
import org.rendersnake.Renderable; //class name of thirdparty 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 |
|
Textfield |
|
Listfield |
|
ListofHashMapField | File Upload Panel |
HtmlPanel | Html Editor |
TextArea |
|
WidgetPanel | Widget Panel |
Composite | Composite Field |
Container |
|
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.
...