a ; ; "2026-06-16T20:33:21.911Z"^^; ; "How to customize the layout of an application and the UI of the resources"; "Change layout"; ; . a ; ; "change-layout-suppress.png"; "change-layout-suppress.png"; "e1a566461208a41faee39238f395f2f79fec8421" . a ; ; "change-layout-default.png"; "change-layout-default.png"; "74b49af5c822acf41ad661d0d27a60443151838d" . a ; ; "change-layout-augment.png"; "change-layout-augment.png"; "38d12825c3927e2d5493ca76f2b744c7b5fe867b" . a ; "
\n

How to customize the layout of an application and the UI of the resources

\n

LinkedDataHub's user interface is simply a rendering of the underlying Linked Data resource descriptions, which are exposed via the HTTP API.

\n

LinkedDataHub provides XSLT stylesheets that render a default UI layout. When building an application you might want to render a custom\n layout however. The recommended way of doing that is to create a new stylesheet which imports the system stylesheet and only override specific templates, while reusing the rest of the layout.

\n
\n

Create a stylesheet

\n

First we need to create a new XSLT 3.0 stylesheet and use <xsl:import> to import the system stylesheet static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/layout.xsl.

\n

See an example in the SKOS demo app.

\n
\n
\n

Configure the dataspace

\n
\n \n
\n
\n
\n

First, either upload the XSLT file or mount it using Docker and docker-compose.override.yml:

\n 
version: \"2.3\"\nservices:\n  linkeddatahub:\n    volumes:\n      - ../LinkedDataHub-Apps/demo/skos/files/skos.xsl:/usr/local/tomcat/webapps/ROOT/static/com/atomgraph/linkeddatahub/demo/skos/xsl/index.xsl:ro
\n

Then change the value of ac:stylesheet on the dataspace with base URI https://localhost:4443/ to the relative URI of the stylesheet:

\n 
<urn:linkeddatahub:apps/end-user> a lapp:EndUserApplication ;\n    ...\n    ac:stylesheet <static/com/atomgraph/linkeddatahub/demo/skos/xsl/index.xsl> ;\n    ...
\n
\n
\n
\n
\n
\n
\n

Default layout

\n

In the examples below we assume that the graph contains a SKOS taxonomy with concept instances, which can also have broader/narrower concepts.

\n

At this point, the default layout of the current document, its topic concept, and narrower/broader concepts looks like this:

\n
\n \"Default\n
\n
\n
\n

Augment output

\n

Keep the default output using <xsl:apply-imports> or <xsl:next-match> and add new output before/after it:

\n 
<xsl:key name=\"resources-by-broader\" match=\"*[@rdf:about] | *[@rdf:nodeID]\" use=\"skos:broader/@rdf:resource\"/>\n        \n<xsl:template match=\"*[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources-by-broader', @rdf:about)]  | *[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources', skos:narrower/@rdf:resource)]\" priority=\"1\">\n    <xsl:next-match/>\n\n    <h3>Narrower concepts</h3>\n    <ul>\n        <xsl:apply-templates select=\"key('resources-by-broader', @rdf:about) | key('resources', skos:narrower/@rdf:resource)\" mode=\"bs2:List\">\n            <xsl:sort select=\"ac:label(.)\"/>\n        </xsl:apply-templates>\n    </ul>\n</xsl:template>
\n

The match pattern will match the resource descriptions that:

\n
    \n
  • are the primary topics of the requested document (i.e. its concept) and is a broader concept of some other resources in the RDF graph
    • \n
  • are the primary topics of the requested document (i.e. its concept) and has narrower concept(s) in the RDF graph
    • \n
\n

We can render broader concepts by making a copy of the key and the template above and replacing all occurences of skos:narrower with skos:broader and vice versa.

\n

With the overriding template, the layout looks like this:

\n
\n \"Augmented\n
\n
\n
\n

Override output

\n

To completely change the layout without keeping the default one, use the same logic as for augmenting it, but do not call <xsl:apply-imports>/<xsl:next-match>.

\n
\n
\n

Suppress output

\n

In the above example, we have rendered skos:narrower properties in our own special way. Which means that the default output of the same properties from bs2:PropertyList is no longer desired.

\n

You can specify an empty template at any level (graph/property/resource) to disable output of that layout mode. For example, this will suppress the default rendering of concepts which are\n now shown in the customized broader/narrower list:

\n 
<xsl:template match=\"*[key('resources', skos:narrower/@rdf:resource)/foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri] | *[key('resources', skos:broader/@rdf:resource)/foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri] | *[@rdf:about = key('resources', key('resources', $ac:uri)/foaf:primaryTopic/@rdf:resource)/skos:narrower/@rdf:resource] | *[@rdf:about = key('resources', key('resources', $ac:uri)/foaf:primaryTopic/@rdf:resource)/skos:broader/@rdf:resource]\"/>
\n

The match pattern will match the resource descriptions that:

\n
    \n
  • have narrower concept(s) in the RDF graph that are the primary topic of the current document
    • \n
  • have broader concept(s) in the RDF graph that are the primary topic of the current document
    • \n
  • are narrower concept of the primary topic of the current document
    • \n
  • are broader concept of the primary topic of the current document
    • \n
\n 
<xsl:template match=\"*[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources', skos:broader/@rdf:resource)]/skos:broader | *[foaf:isPrimaryTopicOf/@rdf:resource = $ac:uri][key('resources', skos:narrower/@rdf:resource)]/skos:narrower\" mode=\"bs2:PropertyList\"/>
\n

The match pattern will match the resource properties that:

\n
    \n
  • are skos:broader properties of a resource that is the primary topic of the current document and has broader concepts in the RDF graph
    • \n
  • are skos:narrower properties of a resource that is the primary topic of the current document and has narrower concepts in the RDF graph
    • \n
\n

With the supressing templates, the layout now looks like this:

\n
\n \"Suppressed\n
\n
\n
"^^ .