Rendering custom components for a predicate - view-a-LOD/Valeros GitHub Wiki

By default, each triple's predicate and object are rendered in a table cell (components/node/node-render-components/node-table-view/node-table/node-table-cell) as links or literals (components/node/node-link).

Sometimes, however, you might want to render objects differently based on the corresponding predicate.

As an example, for the mdto:omvang predicate, data is originally stored as a byte string (e.g., "5799618"), which we might want to convert into a human readable format before rendering (e.g., "5.8 MB").

To create a custom render component for a given predicate:

1. Create a custom predicate render component. From the CLI: ng g c components/custom-render-components/by-predicate/mdto-omvang.
2. Make sure the component inherits from PredicateRenderComponent:

export class MdtoOmvangComponent extends PredicateRenderComponent

3. Add an entry to the renderComponents/[RenderMode.ByPredicate] field in config/settings.ts:

renderComponents: {  
  [RenderMode.ByPredicate]: [
    {
      component: MdtoOmvangComponent,
      predicates: ['https://data.razu.nl/def/mdto/omvang'],
    },
    ...
  ]
}

4. Implement your custom logic in the newly created component. The node's object value is automatically passed in the data prop, and can be used directly in your component.

In MDTO, the mdto:URLBestand predicate might refer to different file types that need to be rendered differently.

For an example of a custom render component that first executes a SPARQL request and then renders data conditionally based on the retrieved file format, see the RAZU fork mdto-url-bestand component here.