Skip to content

Element tab fields

Intro

Elements tab fields are the core component of elements, and will be built to be displayed in the Flowcode elements. Each of the three element tab types (Custom, Primer, Strategy) have their own set of defined and ordered fields

Field types

Field types are defined in the FieldTypes.php enums file.

The possible field types are:

  • FieldTypes::HEADING => 'Heading',
  • FieldTypes::CONTENT => 'Content',
  • FieldTypes::SINGLE_LINE => 'Single-line text',
  • FieldTypes::MULTI_LINE => 'Multi-line text',
  • FieldTypes::NUMBER => 'Number',
  • FieldTypes::DATE => 'Date select',
  • FieldTypes::DROPDOWN => 'Dropdown select',
  • FieldTypes::CHECKBOX => 'Checkbox options (multi-select)',
  • FieldTypes::RADIO => 'Radio options (single-select)',
  • FieldTypes::TABLE => 'Table',
  • FieldTypes::FILE_UPLOAD => 'File upload',
  • FieldTypes::CALCULATE => 'Calculate field',

Calculate fields

A calculate field displays the output of a mathematical operation performed on two or more number fields or other calculate fields selected by the admin. The front-end render is performed by the resources/ts/Components/Common/Fields/FieldCalculate.vue component. The calculation itself is performed by the calc method of app/Http/Controllers/Api/ApiElementFieldController.php which returns a JSON object by API request.

The following calculation types are available:

  • Sum
  • Average
  • Minimum
  • Maximum
  • Multiply
  • Subtract
  • Divide

Optional features available for calculate fields

Include static value in calculation

The admin can choose to include a static value in the calculation. This value will be included in the calculation along with the values from the fields the admin has normally selected. A slt-admin-form-toggle component is used to toggle the static value on and off and a slt-admin-form-input component is used to enter the value in the resources/ts/Components/Admin/Common/Fields/AdminFormCalculateField.vue component.

Optional suffix for calculation result

The admin can choose to add a suffix to the calculation result. This is useful for displaying a currency symbol or percentage sign. A slt-admin-form-input component is used to enter the suffix in the resources/ts/Components/Admin/Common/Fields/AdminFormCalculateField.vue component.

Hide this calculation field from users

The admin can choose to hide the calculation field from users. This is useful if the calculation is being used to perform a calculation that is not relevant to the user. A slt-admin-form-toggle component is used to toggle the visibility of the calculation field on and off in the resources/ts/Components/Admin/Common/Fields/AdminFormCalculateField.vue component. Despite being hidden from the front-end view, admins can still select the field as an input for another calculation.

Advanced table fields

Advanced table fields use the community package of Ag Grid. This is a powerful package that allows advanced table functionality within your app.

Currently the functionality is limited by the free version of the package but allows for am editable table to be displayed with column and row headings. The table can have currency columns and is exportable by csv.

The data for the advanced table field is stored in the element meta within the advancedTable attribute. This is where column and row data is stored via the field builder.

All front-end logic to display the table is handled in the FieldAdvancedTable.vue file.

Field groups

Field groups are linked together using a parent_id column on the fields which links to the parent field of type FieldTypes::FIELD_GROUP or FieldTypes::FIELD_GROUP_REPEATER

Field groups cannot have children fields of a a group type, this is managed using the selectGroupValues() method in the FieldTypes enum.

Field group relationships

Field group relationships are handled alongside element tab field relationships in the ElementTabFieldController. The store, update, storeOrder functions all check for a parent_id parameter and then handle the relationship for the field group if present.

Changing of a non-group field to a field group type

Progress and other field-related logic is handled differently between field groups and non-field groups. It is therefore important that admins be prevented from changing a field type to field-group or field-group-repeater if that field is not already one of these types and if that field already has progress against it. This logic is in place in the edit method of the app/ElementTabFieldController where field-group and field-group-repeater are excluded from the field types being passed through to the view if $non_group_field_has_progress is true.

Field replicator

When creating a field, admins can choose to replicate an existing field in the same element to avoid repeatedly adding similar information for similar fields. This option is only available when creating a field (not editing an existing field).

Replicate a field

At the top of the create field modal, you can choose to replicate an existing field and submit. When submitted this:

  • Creates a new element field
  • Mirrors all the data of the field selected
  • Links the new field in the position given (nested or not)
  • Returns the user to the edit page of the field created

Only non-group type fields can be replicated

Archived fields

Archived fields are fields that have been created in an element but have been removed from an element tab, ie: it is no longer being used / linked with an element.

Unarchive a field

It is possible to unarchive a field using when creating a field. You can select an archived field to use in a field tab.

This functionality also allows for the creator to move a field from one tab to another, or even move the field to a different area of the element tab, eg: nest the field