Table

• Custom Objects: if you select one of the custom objects collections, the data from this collection in the database is read. See Using custom objects in the database for more information on custom objects.
• The Jobs collection: if you select this option, the data from the Jobs collection in the database is read.
  Note: Job table is a dedicated component for reading Job tables.
  Note: CLOUDFLOW returns recursive Job data. This means that Job information of nested Jobs are also returned.
• Start from DBIO: if you select this option, the data is collected from a workable that was created by a workflow that starts with the Start from DBIO and sets a reply with the Set DBIO Reply.
  Note: In case you want to use filters in a generic table that is driven by a workflow containing a Start From DBIO node, the returning interface of HTTP Reply node must be a parameter columns with an array containing objects with a column interface. A column must contain a name as a string and a data_type as a string, number or boolean.
  • Item ID: here you can define the key name of an item in the collection.
• Data Connector - Data Link : if you select this option, the DATALINK connections set up on your CLOUDFLOW are connected to read the data.
  • Item ID: here you can define the key name of an item in the collection.
• *Define own list*: if you select this option, your own defined data object is used in the table.
  Note: You can only use this option in case of one fixed list in a record (for example separations or a fixed URL list).
  • List: here you can define the array with objects to use in the table.
  • Item ID: here you can identify the name of the unique key that identifies each item (row in the table). This key’s value is what will be passed for certain actions to identify the row(s) selected.
• File: if you select this option, the data from a JSON file is read.
  • Data file url: here you can define the URL to the JSON file you want to read the data from.
  • Item ID: here you can define the key name of an item in the collection.

• Select + or Add column to add a column.
• Select to drag the column to another position.
• Select to remove the column.
• Select to close the tab.

• Type: here you can select the column type. Depending on the type you select, the sort and search options will differ. Options:
  • text: if you select this type, the column content will be interpreted as text.
  • styled text: if you select this type, the column content will be interpreted as styled text.
  • number: if you select this type, the column content will be interpreted as a number.
  • image: if you select this type, the column content will be interpreted as an image. Extra options:
    • Max width: here you can select the maximum width of the image.
    • Max height: here you can select the maximum height of the image.
  • true/false: if you select this type, the column content will be interpreted as a boolean. See mapping type for more boolean functionalities.
  • date (ISO-format): if you select this type, the column content will be interpreted as a date. Extra options:
    • Display format: here you can define if you want to display the local date only or the local date and time.
  • link: if you select this type, the column content will be interpreted as a link. Extra options:
    • Link label format: here you can define the label of the link.
  • unit: if you select this type, the column content will be interpreted as a unit. Extra options:
    • Unit type: here you can select the unit type (for example length, resolution, scaling...
    • Storage unit: here you can select the storage symbol.
  • mapping: if you select this type, you can create a fixed list with column items and map them in order to display them as an image, an icon or text in the column. Select at the bottom to define the fixed list and the mappings. For each value you want to map, you have to add a mapping configuration ().
    • Type of the values: here you can select the type of the values in the fixed list.
    • Compare: here you can enter the value you want to map.
    • Display: here you can select the type of value to which you want to map. Type options:
      • Icon: if you select this option, the predefined value will be mapped to and displayed as an icon. You can select the icon in the icon list.
      • Image: if you select this option, the predefined value will be mapped to and displayed as an image. You can define the image URL in the text field and you can define the maximum width and height.
      • Text: if you select this option, the predefined value will be mapped to and displayed as text. You can enter the text in the text field.
    • Selector: here you can enter text in a text field that will be displayed in case the column content is searchable.

    Example

    You have table with a column Status, where you want to display the print status of a file. The values of that column are retrieved from the database as a boolean (true or false) from a field called print. In your table you want to map the boolean value true to an icon. To do so, take the following steps:

    • Add a column to your table with mapping as the column Type, Print Status as the Title and print as the Key (path).
    • Select to open the mapping configuration.
    • Select true/false as the value type.
    • Select icon as the Display type and select the icon you want to use to display the true values, for example the Printer icon ()
    • If needed, enter a text in the text field that will be used in the file selector (for example All files that are ready to print). In that case, make sure to select the checkbox Searchable.

    The files that are ready to print are now displayed in the column Print Status with the icon . You can also filter on all the rows that contain All files that are ready to print.
  • next state buttons: if you select this type, a column with the next state buttons of a Job is present. If next states are set to a Job (via the Update Job node), these will be visible in this column. If you select one of the states, this state will be set to the Job.
• Title: here you can enter the title of the column that is displayed on the column header.
• Key (path): here you can define the key of the database collection that you want to display in the column. If you start typing, a list with one or more auto fill suggestions appears. Select the key you want to use.
• Sortable: if you select this checkbox, you can sort the content in the column.
  Note: If you have selected mapping as the Type, a message appears to warn the users that the sorting is based on the key value and not on what is displayed.
• Searchable: if you select this checkbox, a search field appears and you can search the content in the column.
• Default search: here you can specify a default search string.
• Width: here you can select the column width.

Example

You have a customobjects database collection that contains the collection customers (customobjects.customers). This collection contains a record for each customer, containing the fields _id, name, info, country and address( for all of which the dot notation is customobjects.customers.X. For example, customobjects.customers.name).

[
{ 
    "_id" : ObjectId("5a676619c60c00ad00000005"), 
    "name" : "Customer A", 
    "info" : "blocked", 
    "country" : "NL"
    "address" : "Tulpstraat 1\nGent"
},
{ 
    "_id" : ObjectId("5a6766f3ea0c00e300000005"), 
    "name" : "Customer B", 
    "info" : "beta customer", 
    "country" : "BE"
    "address" : "Klaproosstraat 1\nGent"
},
{ 
    "_id" : ObjectId("5aa119348761655a34d73a53"), 
    "name" : "Customer C", 
    "info" : "", 
    "country" : "BE"
    "address" : "Roosstraat 1\nGent"
},
{ 
    "_id" : ObjectId("5aa129a98761655a34d73a57"), 
    "name" : "Customer D", 
    "info" : "beta customer", 
    "country" : "BE"
    "address" : "Leliestraat 1\nGent"
}
]

You want to create a table that contains three columns: one that displays the name of the customers, one that displays the country and one that displays some extra info. In that case, you will have to configure your columns this way:

Note: In scenarios where the array does not contain objects (for example an array of strings), CLOUDFLOW will generate a key named value that will refer to each element in the array. Use the key named value in these circumstances if no unique id is available or needed.

1. Select Add rule or Add group. A rule is a single rule, a group is a group of single rules.
2. Select the criteria.
3. If you want to add a rule for a combined filter, select AND or OR and define the additional rules or groups.
4. If needed, select Delete to delete a rule or a group of rules.
5. Select Save.

Example

info equal blocked

info equal blocked
AND
country equal BE

• Select + or Add column to add a column.
• Select to drag the column to another position.
• Select to remove the column.
• Select to close the tab.

• Icon: here you can select an icon you want to use for the button.
• Label: here you can enter the name that appears on the button.
• Action name: here you can define a name for an action. The action name appears in the section Actions in the component settings. For each action name there is a dedicated action. See Working with Actions for more information.
• Enabled when: here you can define when the button is available and the action can be triggered. Options:
  • Always: the button is always enabled.
  • No selection: the button is enabled if no table row is selected.
  • Only one selected: the button is enabled if only one table row is selected.
  • One or more selected: the button is enabled if one or more table rows is selected.
  • Multiple selected: the button is enabled if two or more table rows are selected.
  • Conditional multiple: the button is enabled if one or multiple rows are selected that match a conditional query. Select to open the tab to create the rule(s) for the conditional query.
  • Conditional only one: the button is enabled if one row is selected that matches a conditional query. Select to open the tab to create the rule(s) for the conditional query.
• Tooltip: here you can enter a tooltip that appears when hovering over the button.

Select Save to save the configuration.

• Row conditional styling: here you can define style classes for each row based on conditions. Select to open the dialog where you can manage the conditional queries. To define query and a matching Style, follow these steps:
  1. Define the Conditional query:
     1. Select the key from the drop-down list and select the matching criteria.
     2. If you want to add a second rule or group, select AND or OR. A rule is a single rule, a group is a group of single rules.
  2. Select the Style to apply to this query.
  3. Select to add define another Conditional query and Style.

Example

In this example, the Primary style will be applied to all to table rows with a key name that is equal to Customer A, and the Secondary Style will be applied to all table rows with a key name that is equal to Customer B.

• Disclosure button: if you select this checkbox, a disclosure button is added. This disclosure button can be expanded or collapsed to show more details about the row element.
• Disclosure content: here you can select the component that will be displayed when the disclosure button is expanded.

  Example

  In your table, you want to add a disclosure button to display the customer's address. In that case, you have to create a new Pagebuilder file that contains the address for each customer. To do so, follow these steps:

  1. Create a new Pagebuilder file called address.html.
  2. Add a Title component to the page and select Text as the Type of title.
  3. In VARIABLES, connect to your collection customers in the customobjects database collection. This way, you load Page Variables in your page. See Working with Page Variables for more information on Page Variables.
  4. Since you have loaded Page Variables in your page, the pencil to open Expression Builder appears next to the Text component settings:

     

     Select the pencil to open Expression Builder.
  5. In Expression Builder, select Page Variables > address and drag address to the area where you can build the expressions. Select Save:

     

  The page that contains the address is now ready. The next step is to load it the table. To do so, follow these steps:

  1. Open the page where you have created the table.
  2. Select the checkbox next to add disclosure button.
  3. In Disclosure content, select to the page you have just created (address.html).
  4. This is the result:

     

• Input type: here you can select the input type that sends data to the disclosure content. Options:
  • default: if you select this option, the default input type is selected.
  • workflow: if you select this option, you can specify a workflow to input data in the disclosure content. In this case, a workflow is started when the disclosure content is revealed. The variables generated by the workable can be used in the disclosure content.
  • Workflow*: here you can select the workflow to start when the disclosure content is revealed. You need to select a workflow that starts with a Start From Web Request node.
  • Input*: here you can select the input of the workflow.
  • Open workflow: if you select this link, the workflow that you specified is opened in the Workflow Editor.
• Only one disclosure panel open: if you select this checkbox, only one disclosure panel can be opened at the same time.

• stick to the top: if you select this checkbox, the header of the table sticks to the top of the browser window when scrolling through a long table.