Field Extensions

Introduction

Goal

Extend the functionality of Enterprise Forms fiels using field extensions.

Background

Enterprise Forms supports extensibility through field extensions to further enrich the functionality of the provided fields. A field extension can add custom properties that can be used to configure fields in the CMS editor. The delivery tier can read out a field's custom properties and adjust the way the field is rendered accordingly.

A demo implementation of field extensions can be found in the eforms demo that is available for download here.

Note: in order to access the demo you must have an Enterprise Maven repository account and be logged in.

Example

Create a Field Extension

Our example field extension will add an extra text field called "first". The field extension can be of any other valid type like boolean for example.

First add the file cms/src/main/java/com/example/fieldextensions/FieldExtensionExample.java:

import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.TextField;
import org.hippoecm.frontend.plugin.IPluginContext;
import org.hippoecm.frontend.plugin.config.IPluginConfig;

import com.onehippo.cms7.eforms.cms.fieldextensions.AbstractFieldExtensionPlugin;
import com.onehippo.cms7.eforms.cms.fieldextensions.model.FieldExtensionModel;
import com.onehippo.cms7.eforms.cms.model.SingleValuePropertyModel;

public class FieldExtensionExample extends AbstractFieldExtensionPlugin {

  public FieldExtensionExample(final String id, final FieldExtensionModel extensionModel, final IPluginConfig config, final IPluginContext context) {
    super(id, extensionModel, config, context);

    final Label label = new Label("label", "First example");
    final TextField<String> textField = new TextField<>("first", new SingleValuePropertyModel<String>(extensionModel.getNodeModel(), "first"));

    textField.setEnabled(true);
    add(textField);
    add(label);
    setOutputMarkupId(true);
  }

}

Next, add the Wicket markup file cms/src/main/java/com/example/fieldextensions/FieldExtensionExample.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"
  xml:lang="en"
  lang="en">

  <wicket:panel>
    <div class="property">
      <div class="label-wrapper">
       <span class="label" wicket:id="label">[Label]</span>
      </div>
      <div class="field-wrapper">
       <input type="text" class="textfield" wicket:id="first"/>
      </div>
    </div>
  </wicket:panel>

</html>

Make sure that in your CMS pom.xml in the build section you are including the below to include the HTML files in your build:

<resources>
  <resource>
    <filtering>false</filtering>
    <directory>${basedir}/src/main/java</directory>
    <includes>
      <include>**/*.html</include>
    </includes>
  </resource>
</resources>

Rebuild and restart your project.

Configure a Field Extension

Use the Console to configure the field extension. Navigate to the path:

/hippo:namespaces/eforms/form/editor:templates/_default_/fieldextensions/cluster.options

and configure the property field.extensions by adding the fully qualified class name:

com.example.fieldextensions.FieldExtensionExample

Now your field extension will be available in a separate section called Field extensions in the right side of the content editor below the Edit Field Properties section.

Use a Field Extension in the Delivery Tier

In your Freemarker template where you render your form document and its fields you can utilise the field extension to alter the functionality of your field. For example append a CSS class or hide a field.

You can access all your extensions via the getCustomProperty and by passing the appropriate name of your extension.

<#if field.getCustomProperty("first") == "foo">bar</#if>

 

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?