InformationGrid webcomponents documentation

ig-resource-master #

Overview #

Component which does the actual rendering of both the (searchable) resource master and nested resource master.

Properties #

Property Attribute Description Type Default
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
resourceId resource-id In case the resource master is nested, this property should be set to the id of the parent resource. string undefined
resourceTable – The resource table to render ResourceTable undefined
searchRequest – the search request options SearchRequest { byFieldQueries: [], filters: [], numItems: null, start: 0, sortField: '', sortDirection: '', query: '' }
selectedRecordId selected-record-id Identifier of the selected / clicked record. The rendered table cell will get the classname ‘selected’. string undefined
tenantId tenant-id The tenant identifier 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>
searchRequestUpdated CustomEvent<any>

Methods #

refresh(closeDetailWhenOpen: boolean, refreshResourceMasterCallback: Function) => 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.
refreshResourceMasterCallback Function callback function which will be called once the resource master must be refreshed.

Returns #

Type: Promise<any>

refreshPagination() => Promise<void> #

Returns #

Type: Promise<void>

Dependencies #

Used by #

Depends on #

Graph #

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