Resource Table

Resource Table

• module: module_identifier the identifier of the module where resources will be loaded from

• workflow: webhook_identifier the identifier of the workflow event if you want to use a workflow to fill the resource table

• pre_filters: array<PreFilterObject > defines prefilters for the table

• hide_crud_buttons: boolean hides the default ‘read’, ’edit’, ‘delete’ buttons from the ‘actions’ col

• buttons: array<Buttons> contains an array with button definitions that will be rendered in the ‘actions’ col

• selectable: boolean determines if the entries of the table can be selected. Defaults to true.

• columns: array<string>|ColumnDef array of columns to be displayed/fetched. By default, all fields (except for list fields) will be shown. Only the visible columns are fetched by default. If needed, the list of fetched columns can be expanded when using aColumnDef` definition.

• bulk_actions: array<Buttons> array of buttons shown over the resource table that are hidden until an entry is selected.

• aggregates: array<AggregateDef > defines which aggregates should be loaded to be available in recipes.

• summary: array<SummaryDef > defines what the “summary”-rows at the bottom of the table should display.

• options: pageSize : int default number of entities which get shown upon load

  An array of IDs of the selected entries, ordered by their position in the table, will be sent to the given webhook event.

  Standard actions (currently only deletions) can still be used by using the “action” property.

Options for custom Buttons

• title: String translation key. will be prefixed with buttons. (title: test) will be passed as buttons.test to the translator.
• icon: String name of the antd icon type
• type: primary|secondary|dashed|danger|link antd button type
• event: String webhook event name that will be triggered on a click. The Event gets the resource the current row represents.

{
  "type": "resource_table",
  "options": {
    "module": "module_for_resources",
    "hide_crud_buttons": true,
    "buttons": [
      {
        "title": "button_title_translation_key",
        "icon": "ant_icon_name",
        "type": "ant_button_type",
        "event": "webhook_event_name"
      }
    ]
  }
}

{
  "type": "resource_table",
  "options": {
    "module": "<module_for_resources>",
    "selectable": true,
    "bulk_actions": [
      {
        "identifier": "<Name of webhook event>",
        "icon": "<ant_icon_name>"
      },
      {
        "action": "delete",
        "icon": "<ant_icon_name>",
        "style": "<ant_button_style>",
        "title": "_.bulk_delete"
      }
    ]
  }
}

Pre-Filters

schema of a pre-filter Object:

{
  "column": "column_name",
  "operator": "operator",
  "value": "value"
}

Pre-filter Object using current module’s field:

{
  "column": "column_name",
  "operator": "operator",
  "field": "field_identifier"
}

Pre-filter Object using recipe:

{
  "column": "column_name",
  "operator": "operator",
  "recipe": "this.field_identifier + _context.context_field_identifier"
}

full example of a resource table using a ColumnDef object

{
  "type": "resource_table",
  "options": {
    "module": "module_for_resources",
    "row_settings": {
      "recipes": {
        "style": "field_needed_for_recipe ? 'background: green' : ''"
      }
    },
    "columns": {
      "display": [
        "field_displayed_1",
        "field_displayed_2"
      ],
      "fetch": [
        "field_displayed_1",
        "field_displayed_2",
        "field_needed_for_recipe"
      ]
    }
  }
}

schema of a computed style:

{
  "type": "resource_table",
  "options": {
    "module": "manufacturers",
    "column_settings": {
      "status": {
        "recipes": {
          "style": "(status == 'good') ? 'background-color: green; color: white;' : '' || (status == 'bad') ? 'background-color: red; color: white;' : ''"
        }
      }
    },
    "row_settings": {
      "recipes": {
        "style": "on_hold ? 'background-color: lightgray' : ''"
      }
    }
  }
}

AggregateDef schema

The key within the functions object determines the key the loaded aggregate can later be referenced in recipes by the key $.aggregates.<function_name>. The function can be every aggregate function that MySQL supports (like count, sum, min, max, avg).

Example definition

{
  "functions": {
    "totalCount": {
      "function": "count",
      "fields": [
        "id"
      ]
    }
  }
}

With pre-filters:

{
  "pre_filters": [
    {
      "column": "completed",
      "operator": "=",
      "value": true
    }
  ],
  "functions": {
    "completedCount": {
      "function": "sum",
      "fields": [
        "completed"
      ]
    }
  }
}

SummaryDef schema

This definition consists of an object, whose keys are a field_identifier that determine under which column the defined data should be displayed. The SummaryDef is defined within an array, every new array element means another summary row will be appended to the table. Use the recipe option to calculate a fitting display of your data. The type allows the following values:

• text - Displays the data as text. Supports HTML.
• statistic - Displays the data as an AntDesign “Statistic” component.
• progress - Displays the data as a progress-bar. Needs to be a value between 0-100.

Example definition

{
  "completed": {
    "type": "text",
    "recipe": "$.aggregates.completedCount"
  },
  "total_amount": {
    "recipe": "sum(this[*].total_amount)"
  }
}

Example definition of a progress bar summary field

{
  "completed": {
    "type": "progress",
    "title": "completed",
    "recipe": "round(sum(this[*].completed) / len(this[*].completed) * 1000) / 10"
  }
}

Workflow resource:

You can get data from your workflow and put this to your resourceTable by using an event/webhook and a response/ResourceTable. Your workflow should return data structured like this:

{
  "your_key": "data",
  "your_key_a": "data_a"
}

with the same keys as your resource_table

"columns": [
    {
        "identifier": "your_key",
    },
    {
        "identifier": "your_key_a",
    },
]

Differences to modules:

• No persistent data. ( No Edit / Delete or View)
• No row selection
• You have to use the input data in workflow to add searching, filtering and sorting functionalities

Example of Workflow Resource Table

{
  "type": "resource_table",
  "options": {
    "workflow": "YourWorkflowsWebhookName",
    "columns": [
      {
        "identifier": "your_key"
      },
      {
        "identifier": "your_key_without_sorter",
        "options": {
          "no_sorter_in_entity_table": true
        }
      },
      {
        "identifier": "your_key_without_search",
        "options": {
          "no_filter_in_entity_table": true
        }
      }
    ]
  }
}

What a workflow must consist of:

The event/webhook event which receives the following data:

• result: Result count
• page Current page
• filters : array Searchfilter for columns Example: [column_key] => ( [0] => „searchstring“)
• sortField : string Column to filter
• sortOrder : string Sort Order ( Ascend / Descend )
• seach : string Global search string
• entity : array Current Resource / Entity

you could get these by adding a variable to output like:

    Key  | Value
    data | input:

An elment to get your data Array like source/entities or a just an op/recipe with data

And at least the response/resourceTable Element which needs following data:

• Resource Data - Array of your Data
• Current Page - Number of your Current Page (You could use $data.page if you have this set up)
• Entity per Page - The number of entities per page
• Total - The total amount of entities (Input will be ignored if you use Auto Pagination)
• Auto Pagination - If it is set to True, your input array will be divided into the number of entries per page.