ig-resource-master #

Overview #

A Resource Master components retrieves records from a configured data source and renders it in a table overview together with pagination, sorting and filtering options. By default, only primitive properties for each record are displayed in the table. This can be adjusted in the Resource Master configuration.

A Resource Master can be used in combination with a Resource detail component. If so, the Resource Detail will be displayed upon clicking a record in the master table which shows the complete record.

A Searchable Resource Master will use a datasource which is capable of searching and offers additional features like free-format search and filtering using search facets.

Properties #

Property	Attribute	Description	Type	Default
`defaultSortDirection`	`default-sort-direction`	Sort direction to apply by default.	`string`	`"ASCENDING"`
`defaultSortField`	`default-sort-field`	Field to sort on by default. Sorting on other fields can be done by clicking on the column header.	`string`	`undefined`
`dslFilter`	`dsl-filter`	Besides applying preconfigured filters, it is also possible to provide a DSL snippet which must be applied as filter.	`string`	`undefined`
`filter`	`filter`	Identifier of the filter to apply when retrieving the resource master.	`string`	`undefined`
`filterInput`	`filter-input`	input object for the specified filter.	`any`	`undefined`
`getRowClassNames`	–	When provided, this function will be called to determine additional classnames for each record. The returned classname (if any) will be put on the tr (table row) tag. `this.resourceMasterCmp.getRowClassNames = (record) => { return record.values.hasError ? ‘error’ : null; };`	`(record: TableRecord) => String`	`undefined`
`renderRowActions`	–	When provided, this function will be called in order to render additional html as last table cell for each record. This can be used to display crud icons like edit, delete. The function should return an array of objects with the properties ‘html’ (the html to render) and ‘callback’ (callback function which is called upon clicking the element. Example: `this.resourceMasterCmp[‘renderRowActions’] = () => [{ html: <span title="Edit" class="glyphicon-pencil"></span>, callback: (record) => this.selectResource(record.id, true) }, { html: <span title="Delete" class="glyphicon-remove"></span>, callback: (record) => this.removeResource(record.id) }];`	`() => RowAction[]`	`undefined`
`renderTemplate`	–	When provided, the returned custom template function is used to render the resource master instead of the default (internal) template. The render function must return either a HTMLElement or a string (template literal) containing the HTML which will be parsed by the resource master. Example: `this.resourceMasterCmp.renderTemplate = (templateArgs) => { return <div>${templateArgs.resourceTable.records.map(record =>${record.id}).join('')} ${templateArgs.pagingCmp}</div>; };`	`(templateArgs: TemplateArguments) => String \\| HTMLElement`	`undefined`
`resourceMasterId`	`resource-master-id`	The identifier of the resource master configuration as configured in InformationGrid. The properties `resourceMasterId` and `searchableResourceMasterId` are mutually exclusive.	`string`	`undefined`
`resourceTable`	–	Normally this property shouldn’t be set as the component will do that automatically based on the `resourceMasterId` and `searchableResourceMasterId`. Used for demonstrating purposes when there is no running IG instance around.	`ResourceTable`	`undefined`
`searchableResourceMasterId`	`searchable-resource-master-id`	The identifier of the searchable resource master configuration as configured in InformationGrid. The properties `resourceMasterId` and `searchableResourceMasterId` are mutually exclusive.	`string`	`undefined`
`selectedRecordId`	`selected-record-id`	Identifier of the selected / clicked record. The rendered table cell will get the classname ‘selected’.	`string`	`undefined`
`startOffset`	`start-offset`	Offset to apply when loading the records (by default 0, which effectively means the first page). This property can be used to navigate the resource master to a specific page, e.g. the page where the user came from when returning back from a detail view.	`number`	`undefined`
`tenantId`	`tenant-id`	Identifier of the tenant for which the data should be displayed (in case the datasource is tenant aware).	`string`	`undefined`
`version`	`version`	In case the datasource has multiple versions, the version to retrieve the data from can be specified. Default the current version of the datasource will be used.	`string`	`undefined`

Events #

Event	Description	Type
`detailClosed`	Emitted when a detail panel is closed and the user returns back to the master table.	`CustomEvent<any>`
`fetchDataTable`	Emitted when the data needs to be fetched again, for example upon navigating to the next/previous page or upon searching. The searchRequest which should be used to fetch the data is attached to the event.	`CustomEvent<any>`
`recordSelected`	Emitted when a record (table row) is clicked. Depending on whether a resource-detail is configured, the detail panel will be shown or a custom action can be performed by listening to this event.	`CustomEvent<any>`

Methods #

`refresh(closeDetailWhenOpen?: boolean) => Promise<any>` #

Will refresh the resource table data (based on the configured resourceMasterId or searchableResourceMasterId attribute).

Parameters #

Name	Type	Description
`closeDetailWhenOpen`	`boolean`	when true, the detail (if any) will be closed and the overview will be refreshed and displayed. When false, the detail (if any) stays open and will be refreshed. Default true.

Returns #

Type: Promise<any>

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
  ig-resource-master --> ig-file
  ig-resource-master --> ig-search-facets
  ig-resource-master --> ig-pagination
  ig-aggregate-manager --> ig-resource-master
  ig-collection-manager --> ig-resource-master
  style ig-resource-master fill:#f9f,stroke:#333,stroke-width:4px