Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


Panel
borderColorgreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition
Spreadsheet Form Element allow users to perform many actions in an excel-like environment, depending on the use cases. A few examples of uses of spreadsheets are:
  • Database editing
  • Configuration controlling
  • Data merging
  • Workforce planning
  • Sales reporting
  • Financial analysis
Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature
This is a new feature in Joget Workflow v6.



Image Modified

Figure 1 : Sample Spreadsheet Form Element in the Userview

Image Removed

...


Spreadsheet Properties

Edit Spreadsheet

NameDescription
SpreadsheetElement ID of the form element.

Image Added

Figure 2 : Edit Spreadsheet Properties

LabelSpreadsheet label/title.
Columns

The spreadsheet column(s) is defined here.

Sub-elementDescription
ValueField ID of the column.
Label

Column header title/label.

You can also include a tooltip that shows up when someone hovers over the column label.

Info
titleSample

Example label:

<span title='This tooltip will show when someone hovers over the column'>Column Label A</span>

Format Type

Defines the type of input to store.

Default format type is Text.

Available Data Types:

  • Text - format the value as text
  • Numeric - accepts a numeric value (See Format documentation)
  • Date - accepts a date type value
  • Time - accepts a time type value
  • Checkbox - appears as a checkbox to check
  • Dropdown - appears as a dropdown menu to select options
  • Autocomplete - autocompletes any known phrases
  • Password - obscures any alphanumerical value into a password
  • File - Accept file upload and render a file download link
  • Image - Accept image file upload and render a thumbnail
  • URL - Convert value to an URL
  • Hidden - Hidden column for storing formular value
  • Custom - Use custom setting to configure the column. Examples: Spreadsheet Custom Formats
Format

Defines the format to show data on the spreadsheet based on the chosen format type.

  • Numeric - Key in format accepted by numbrojs library. (For example, 0.00 is to create 2 decimal places)
  • Date - Key in format accepted by moment.js library. (Default value: DD/MM/YYYY)
  • Time - Key in format accepted by moment.js library.(Default value: h:mm:ss a)
  • Dropdown - Key in the Form ID that contains the equivalent dropdown element.

    Info
    titleDynamic Cascading Select Box

    Dynamic Cascading Select Box is supported when the target select box is making use of Options Binder and with the attribute "Use AJAX for cascade options?" is checked.

  • Autocomplete - See handsontable for samples.
  • File- Key in Form Def ID that contains File Upload form element.
  • Image - Key in Form Def ID that contains Image Upload form element.
  • URL - Provide an URL syntax. Example: http://www.joget.org?id={id}&name={name}
  • Hidden - Key in default value to be saved.
  • Custom - See handsontable for samples. Please put the setting json in {{ and }}. Example: {{"editor":"text"}}

Please note that any string within {{ and }} will be treat as setting json and used to configure the column.

Regex ValidationValidates input value to match the defined Regular Expression pattern.
Formula

Defines a formula to perform

processing. Info
titleSample

Example: sales + profit-loss

Image Removed

a calculation, for example: "Quantity * Unit_Price" in Formula column.


Please refer to formula.

ReadonlyDefines if the column is editable.




Figure 3 : Spreadsheet Form Element Properties - UI

...

For example, to make spreadsheet pull and display the population value after the user picks the city name (pulldown menu), use FORMDATA("city_formId",select_city,"population") where 'select_city' is the first field id in your spreadsheet.


Below is a sample app to demonstrate the use of Spreadsheet form element: