Forms and Elements

//TODO Not finished yet.

Introduction

Forms are the highest level visual components in Dynamo. They are the collection of all the UI elements that should appear in a particular step.
Elements are the fundamental building blocks for a particular UI element in the form. They are custom Dynamo definitions for some of the popular UI elements that could possibly be used in a particular application.

Forms Overview

Forms are tied to a step and can be found in the form property of a particular step.

Elements Overview

Elements are members of a particular form and are the definitions for the actual platform specific UI elements that will be rendered either on mobile or on web. Elements can either be created directly on the Designer interface for creating forms or programmatically using the ElementFactory object. Usage of the ElementFactory object has been abstracted into a createElement library and can be accessed in processor code using

this.libs.createElement(...args);

Element Types

The following are the types of elements available on Dynamo and how they can be created programmatically:

Input

This can be thought of as the regular input element that can be found in web applications. It can either be of type TEXT, NUMBER, DATE, CHECKBOX, or PASSWORD. Example using the createElement library to create an input element -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.INPUT,
{
type: this.constants.INPUTTYPE.NUMBER,
default: SOME_DEFAULT_VALUE,
disabled: false
},
[VALIDATOR_OBJECT]
);

Hidden

This is an element with the hidden attribute. It is used to hold a value without displaying in the form. Example creating this element programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.HIDDEN
);

Label

This can be thought of as a regular label element that is used to display textual information. Example creating this element programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.LABEL
);

Select

This is an element that is used to select a particular value from a list of values. The values can either be hardcoded in the items property of the element args or can be fetched from a processor that returns an array of objects having both _id and displayLabel properties. Example creating a Select programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.SELECT,
{
type: this.constants.ELEMENT_SELECT_SOURCETYPE.PROCESSOR,
mode: this.constants.ENTRYMODE.OBJECTID,
config: {
value: PROCESSOR_ID_OR_UID,
customArgs: JSON.stringify(ARGUMENTS_TO_BE_PASSED)
}
},
[VALIDATOR_OBJECT]
);

Select Set

This is an element just like the Select that has the ability to display more options depending on the value that is chosen in the Select. It is also called Options Group in the form designer. Example creating a Select Set programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.SELECTSET,
{
mode: this.constants.ENTRYMODE.OBJECTID,
type: this.constants.ELEMENT_SELECT_SOURCETYPE.PROCESSOR,
processor: PROCESSOR_ID_OR_UID,
path: '', //path that defines the nested object into which to place the elements values.
items: [
//useful if you already know a fixed list that should be the items in the select
{
_id: 1,
displayLabel: 'First Item',
elements: [DynamoElement]
}
]
}
);

Section

This behaves just as the html section. It provides a container into which to group logically related elements. Example creating this element programmatically -

this.libs.createElement.call(
processorContext,
SECTION_NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.SECTION,
{
elements: [DynamoElement]
}
);

Accessing the values of the elements in this section in a processor -

this.args[SECTION_NAME][ELEMENT_NAME];

Nav

This is a navigation element that provides a means of directing to a particular process. Example creating this element programmatically -

this.libs.createElement.call(processorContext, NAME, LABEL, this.constants.ELEMENTTYPE.NAV, DESCRIPTION, {
type: "DYNAMO" | "CLIENT"
text: LABEL,
config: {
value: PROCESSOR_ID_OR_UID
}
})

File Upload

This is an element used for uploading files to Dynamo that can be accessible within a particular process. Example creating this element programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.FILEUPLOAD,
{
fileType: 'png|jpeg|jpg', //acceptable file types
showPreview: true //useful for previewing images and excel sheets.
},
[VALIDATOR_OBJECT]
);

List

This is an element that is useful for capturing an array of values that can be dynamically added. It defines a template of elements that add values to the array as many times as the add button is being clicked. Example creating the LIST element programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.LIST,
{
itemTemplate: [DynamoElement],
unique: [DynamoElement.name],
isTableList: true, //useful for creating list that display as a table of elements.
fixedNoOfItems: Number //useful for removing the add button if it is a table list.
},
[VALIDATOR_OBJECT]
);

Grid

This is an element that provides easy setup for CRUD functionality for a particular process. It has a section for adding items, viewing items, editing particular items and deleting items. You will mostly be creating this element from the graphical designer interface.

HTML View

This element is used as a container for displaying HTML templates. It takes a string of valid html template and renders that template within its container. It also provides the ability to display a print button for printing the html template body. Example creating the HTMLVIEW element programmatically -

this.libs.createElement.call(
processorContext,
NAME,
LABEL,
DESCRIPTION,
this.constants.ELEMENTTYPE.HTML,
{
html: `<div>
some html text here
</div>`
}
);
Edit this page