Customizable fields

To add a customizable field to the process:

1. In the Forms Designer, drag-and-drop a Customizable field in a table ;
2. Select the field to assign to the graphical control.
3. In the properties panel, enter the configuration needed in the “Graphic control class” zones.

Existing fields

The following sections present the different types of customizable fields deployed and supported by Process.

Document fields

Auto-complete list for a high data volume

This field allows you to plug a list (internal or external) into an auto-completion field, and load the data using Ajax. This ensures that the loading of the form is not slowed down in the case of a large volume of data.

Auto-complete list attributes

Directory selector

Single selector

Multiple selector

FileCenter selector

The associeted field type must be “Text (reference to an object)”.

Configuration

Example

Here are examples with multiple selectors:

• Documents:
• Folders:
• Categories:
• Datastore:

Source : https://wiki.myvdoc.net/xwiki/bin/view/Dev+Floor/FileCenterSelector

JSP page selectors

The FCK Editor field

The EnhancedUrl field

Color picker

Champ de sélection d’une couleur.

Classe : com.axemble.vdp.ui.core.document.fields.ColorPickerField

Stockage : String

Pas d’attributs sur ce champ.

Screen embedder

Enables to embed new screens

Class: Com.axemble.vdp.ui.core.document.fields.ScreenEmbedderField

Shortcut: screen_embedder

Java type: java.util.Map

Storage table: vdp_byte_values

Example:

<field name="fldEmbedder" label="fldEmbedder" ctrl="com.axemble.vdp.ui.core.document.fields.ScreenEmbedderField" mode="write" screen="jsp_selector" method="select" />

Implementation

The UI framework enables to create new fields that may be easily integrate in the process documents or generic screens.

To create a customizable field, you just have to create a Java class which extends the basic class named com.axemble.vdoc.sdk.document.fields.base.BaseField.

The following code delivers the required methods to implement in order to create a field class:

public class SimpleField extends BaseField {
    public void init(Element element) {
    }

    public void updateControl() {
    }

    public void updateValue() {
    }

    public boolean isEmpty() {
        return false;
    }

    public IWritable render() throws RenderException {
        return new CtlButton("okButton", new CtlText("Bouton OK"));
    }
}

The method init() receives as an argument the object org.w3c.dom.Element representing the fields XML description in the customization forms or the definition file screens.

The method updateControl() is called each time the field internal value is affected. The framework requests the implemented field to update depending on its value.

The method updateValue() is called each time the user modifies the values in the HTML document.

The method isEmpty() must be filled in by the implemented field. In the case of the field is set as compulsory and if this method returns the “true” value, the framework will indicate the field must be filled in.

The method render() is called by the framework to integrate the field graphical part in the HTML document. In the previous example, the graphical component displayed will be a button.

HTML templates definition

The customizable fields may be composite components of graphical elements suggested by the Process framework (using of Container widget). In this case, there is no need to define a HTML template.

However, in several cases, you will need to define several HTML templates functions of an internal state of the field ( example: write mode, read mode). The Process graphical interface framework has a “custom” folder to put the specific HTML templates: WEB-INF\storage\custom\controls. By delivering the HTML templates in the folder, it will be possible to reach them via the method getTemplateWriter().

Example of HTML template

In this example, a whole of tags surrounded by the « $ » symbol is displayed.

<input type="text" name="$id$" value="$label$">
$error-message$

Example of using an HTML template

This example shows how to bring a TemplateWriter object back from an HTML file (HTML template).

Once the TemplateWriter is brought back, it is possible to replace the $xxx$ tags by some IWritable-type elements thanks to the setEntry() method of the TemplateWriter class. It is also possible to bring a EntryWriter object back to log several elements of IWritable-type in one tag: using of the getEntryWriter() method in the TemplateWriter class.

public IWritable render() throws RenderException {
	if ( isHidden() ) {
	  return null;
	}
	
	TemplateWriter tw = null;
	if ( this.isEditable() ) {
	  tw = this.getTemplateWriter( "CtlTextBox.edit.html" );
	  tw.setEntry( "id", new TemplateToken( this.getNavigator().registerWidget( this ) ) );
	  tw.setEntry( "label", new TemplateToken( HTMLUtils.getHTMLAttrString( this.textValue ) ) );
	
	  if ( checkErrorMessage() ) {
		tw.setEntry( "error-message", this.renderErrorMessage() );
	  }
	} else {
	  tw = this.getTemplateWriter( "CtlTextBox.read.html" );
	  tw.setEntry( "label", new TemplateToken( HTMLUtils.getHTMLString( this.textValue ) ) );
	}
	
	return tw;
}

Implementation of a customizable field dedicated to the process

A field dedicated to process document can just be used in the process document context. It can only be defined in a generic screen.

To implement such a field, you just have to create a Java class which extends the class named com.axemble.vdoc.sdk.document.fields.base.BaseWorkflowField.