InformationGrid webcomponents documentation

Overview #

Component which does the actual rendering of both the resource detail and nested resource detail.

Properties #

Property Attribute Description Type Default
closeCallback – Callback which will be called upon closing the detail component Function undefined
data – The data to render Object undefined
form – The form blueprint to render Form undefined
inline inline Determines whether the resource detail should be rendered inline (default) or as a new page. boolean true
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

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
  ig-resource-detail-renderer --> 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-rich-text
  ig-resource-detail-field --> ig-resource-detail-field
  ig-resource-detail-field --> ig-resource-detail-section
  ig-nested-resource-detail --> ig-resource-detail-renderer
  ig-resource-detail --> ig-resource-detail-renderer
  style ig-resource-detail-renderer fill:#f9f,stroke:#333,stroke-width:4px