InformationGrid webcomponents documentation

ig-resource-detail #

Overview #

A Resource detail component retrieves a single record from a configured data source and renders it in a read-only detail view.

Properties #

Property Attribute Description Type Default
closeCallback – Callback which will be called upon closing the detail component Function undefined
config – Configuration options to influence the behaviour of the resource detail component Config undefined
data – Instead of passing a resourceId, the data to render can also be specified directly using this property. Object undefined
form – Instead of passing a resourceDetailId, the form blueprint to render can also be specified directly using this property. Form undefined
labelProvider – A label provider function can be provided which will be called for every label (both section labels as field labels) to provide translations. Label providers will be called with 2 arguments: the default label (string), and the path of the property the label belongs to (string). Function undefined
renderTemplate – When provided, the returned custom template function is used to render the resource detail 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 detail. Example:

this.resourceDetailCmp.renderTemplate = (templateArgs) => { return <div>${Object.keys(templateArgs.data).map(key =>${key} - ${templateArgs.data[key]}
).join('')}</div>; };		 (templateArgs: TemplateArguments) => String \| HTMLElement undefined
resourceDetailId resource-detail-id The identifier of the resource detail configuration as configured in InformationGrid. string undefined
resourceId resource-id The identifier of the resource to be displayed in this detail component string undefined
tenantId tenant-id Identifier of the tenant the resource to display belongs to (in case the datasource is tenant aware) string undefined

Events #

Event Description Type
dataRetrieved Emitted when this detail component has retrieved the data. CustomEvent<any>

Methods #

getData() => Promise<any> #

Returns the data which was retrieved using the resourceDetailId and resourceId properties.

Returns #

Type: Promise<any>

getLabelProvider() => Promise<Function> #

Returns the label provider (if set)

Returns #

Type: Promise<Function>

refresh() => Promise<void> #

Refreshes the contents by fetching the resource detail again for the given resourceDetailId and resourceId.

Returns #

Type: Promise<void>

Dependencies #

Depends on #

Graph #

graph TD;
  ig-resource-detail --> ig-resource-detail-section
  ig-resource-detail-section --> ig-tooltip
  ig-resource-detail-section --> ig-resource-detail-field
  ig-tooltip --> ig-popover
  ig-resource-detail-field --> ig-file
  ig-resource-detail-field --> ig-resource-detail-field-dsl
  ig-resource-detail-field --> ig-resource-detail-field
  ig-resource-detail-field --> ig-resource-detail-section
  style ig-resource-detail fill:#f9f,stroke:#333,stroke-width:4px