Form Design

Form design is used to customize the property layout of an entity and setup the ViewConfig of nested entity or entity list form beans. The layout of properties can be customized using layoutCode that is a HTML code with expressions. For example, to customize the Expense Claim of the ExampleHR module:

<div class="ui-form-design">

<h1>#{bundle.ExpenseClaim}</h1>

<div class="ui-grid-a ui-grid-responsive">
	<div class="ui-block-a">#{bundle.Employee}: #{employee}</div>
	<div class="ui-block-b">#{bundle.Nid}: #{nid}</div>
	<div class="ui-block-a">#{bundle.Summary}: #{summary}</div>
	<div class="ui-block-b">#{bundle.CreatedDate}: #{createdDate}</div>
</div>

#{OBJECT:expenseClaimItems}

<div class="ui-grid-b ui-grid-responsive">
	<div class="ui-block-a">#{bundle.Approver}: #{approver}</div>
	<div class="ui-block-b">#{bundle.ApprovedDate}: #{approvedDate}</div>
	<div class="ui-block-c">#{bundle.Creator}: #{creator}</div>
</div>

</div>

Supported Expressions

Form Bean ViewConfig

Form bean ViewConfig setup includes the properties to show, newspaper columns, entity list table header, statistics row label.

Enable Form Design

To let user create new Form Designs or modify existing Form Designs, define FormDesignDescriptor(s) in module implemenation class. For example, to enable form design for ExpenseClaim of ExampleHR module:

	@Override
	public Map<Class, FormDesignDescriptor> getFormDesignDescriptorMap() {
		Map<Class, FormDesignDescriptor> formDesignViewConfigDescriptorMap = new LinkedHashMap<Class, FormDesignDescriptor>();
		
		// ExpenseClaim, use default FormDesign implementation
		ViewConfigDescriptor ecViewConfigDescriptor = new ViewConfigDescriptor(
			ExpenseClaim.PROPERTY_EXPENSE_CLAIM_ITEMS, ViewType.ENTITY_LIST_NARROW,
			null, true
		);
		formDesignViewConfigDescriptorMap.put(ExpenseClaim.class, 
			new FormDesignDescriptor(null, new ViewConfigDescriptor[]{ecViewConfigDescriptor}));
		
		return formDesignViewConfigDescriptorMap;
	}
To add a menu node for managing Form Designs of a module, call getFormDesignTypeDescriptor(viewConfig) to get the the TypeDescriptor for FormDesign, and then add it to the module menu. For example,

public class HrMenuNodeFactory extends ModuleMenuNodeFactory {

	@Override
	protected void createSubMenu() throws SystemException {
		MenuViewConfig viewConfig = this.viewConfig.clone();

		MenuNode setupMenuNode = addSetupMenuNode(rootMenuNode);

		TypeDescriptor[] setupTypes = new TypeDescriptor[] {												
			getFormDesignTypeDescriptor(viewConfig)
				
		};
		addTypedMenuNodes(this, setupMenuNode, setupTypes);
	}
}

Configure Form Design

Fetch an existing Form Design or create a new one, and then set in EntityViewConfig. For example,

Fetch a Form Design for Expense Claim of ExampleHR module:


	EntityViewConfig viewConfig = new EntityViewConfig(ViewType.ENTITY);
	BackingBeanContext context = BackingBeanContext.getInstance();
	PersistenceEntityManager peManager = context.getPersistenceEntityManager();
	
	FormDesign formDesign = (FormDesign)peManager.getEntity(FormDesign.class,
		new CriteriaElement[]{
			DetachedCriteria.eq(FormDesign.PROPERTY_ENTITY_TYPE, new DataType("ExampleHR.EC")),
			DetachedCriteria.eq(FormDesign.PROPERTY_FORM_ID, "1001")});	
	viewConfig.setFormDesign(formDesign);
Or create a lazy loading FormDesign by setting its formId, and set partiallyInitialized to true.

	EntityViewConfig viewConfig = new EntityViewConfig(ViewType.ENTITY);
	
	FormDesign formDesign = TypeMapping.newImplementationInstance(FormDesign.class);
	formDesign.setEntityType(ExampleHR.EC);
	formDesign.setFormId("1001");
	formDesign.setPartiallyInitialized(true);
	
	viewConfig.setFormDesign(formDesign);
Create a new Form Design with layout code:

	EntityViewConfig viewConfig = new EntityViewConfig(ViewType.ENTITY);
	FormDesign formDesign = TypeMapping.newImplementationInstance(FormDesign.class);
	formDesign.setLayout("#{photos}<br/>#{name} #{department}");
	formDesign.setDecoded(true);
	viewConfig.setFormDesign(formDesign);
If a Form Design is not set in EntityViewConfig, an existing form design will be fetched from persistence if form design is automatically enabled(default).

	protected boolean isFormDesignAutoEnabled(PersistenceDataBackingBean<T> backingBean, T entity) throws SystemException {
	
	}

Form Design for Embedded Objects

For an embedded object, use viewConfig XML to configure a form design to render an entity.

Use an existing Form Design. For example, use Expense Claim form design 0001.


<viewConfig>
	<viewType>ENTITY</viewType>
	<formDesign type="System.FD">
		<entityType>ExampleHR.EC</entityType>
		<formId>0001</formId>
	</formDesign>
</viewConfig>
type and entityType are optional. FormDesign type is default to System.FD, and entityType will be obtained from its EntityBackingBean.

<viewConfig>
	<viewType>ENTITY</viewType>
	<formDesign >
		<formId>0001</formId>
	</formDesign>
</viewConfig>
Create a new Form Design with layout code and optional style sheet. For example,

<viewConfig>
	<viewType>ENTITY</viewType>
	<formDesign type="System.FD">
		<layout><![CDATA[#{photos}<br/>#{name} #{department}]]></layout>
		<style>...</style>
	</formDesign>
</viewConfig>
Default form design type is System.FD (the FormDesign implementation in System module), which can be omitted.