Displaying a table on a form

65 views
Skip to first unread message

Tim Smith

unread,
Mar 29, 2023, 2:36:10 PM3/29/23
to topbrai...@googlegroups.com
Hi,

I have a need to display a table on a form as part of the standard forms displayed for instances.  Historically, I have used dash:ValueTableViewer for this purpose.  However, in this case, this will not work because the contents of each column are calculated separately and thus relationships cannot be displayed correctly.  What I need is effectively a stylized SPARQL results table.

Thus, I need a way to create such a table and have it appear as the value of a property shape.  My current thought is to use ADS to execute a SPARQL query to gather the data, map the bindings into a table with desired styling, and finally, return HTML from the script for display on the form using something like graph.html().  The property shape would have a datatype of HTML.

Does this sound like an effective strategy?  If so, is there a javascript table object in EDG that I can use?  

Thank you in advance for your insight!

Tim

Holger Knublauch

unread,
Mar 30, 2023, 4:06:48 AM3/30/23
to topbrai...@googlegroups.com
Hi Tim,

yes that's built in. See dash:JSONTableViewer

skos:Concept-narrowerConceptsOverview
  a sh:PropertyShape ;
  sh:path g:narrowerConceptsOverview ;
  dash:viewer dash:JSONTableViewer ;
  sh:datatype rdf:JSON ;
  sh:name "narrower concepts overview" ;
  sh:values [
      dash:js """DataViewers.createTableViewerJSON(
focusNode.select(`
SELECT ?narrower ?type
WHERE {
?narrower skos:broader $focusNode .
?narrower rdf:type ?type .
}
`, {
focusNode: focusNode
}))""" ;
    ] ;
.

PastedGraphic-1.png


HTH
Holger



--
The topics of this mailing list include TopBraid EDG and related technologies such as SHACL.
To post to this group, send email to topbrai...@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "TopBraid Suite Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to topbraid-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/topbraid-users/CAF0WbnJ%3DzMBxavBfCjNNvBvWOHRNK3gVUXRJx2eEbGNxnm%3DQSw%40mail.gmail.com.

Tim Smith

unread,
Apr 2, 2023, 11:03:22 AM4/2/23
to TopBraid Suite Users
Hi Holger,

This will definitely save some time!

Is there a way to stylize the headers (color, font, etc...)?  Do you know if the query returns HTML, will the table display it as HTML or as a text string?

Thanks for your insight,

Tim

Holger Knublauch

unread,
Apr 3, 2023, 4:04:00 AM4/3/23
to topbrai...@googlegroups.com
The solution that I have outlined does exactly what the screenshot shows: a prepared table with various built-in features, based on a JSON data structure. All this is hard-coded, and you cannot stylise the headers. However, if you want to take full control you can instead construct an rdf:HTML literal that returns a full <table> with whatever content and style that you prefer. In that case you may need to live with some other limitations such as you won’t get the Export buttons, ability to sort by column and more, unless you also return those as part of the HTML snippet.

Holger


Tim Smith

unread,
Apr 3, 2023, 8:55:54 AM4/3/23
to topbrai...@googlegroups.com
Thanks Holger!

I was thinking that such features were hard-coded.  I will dust off my HTML knowledge, LOL.  

One last question that is somewhat related to my other create link thread... Links on forms in EDG that EDG "knows" are resources in EDG, all have a right-click context menu.
image.png

For links to EDG resources that I will create and place in a HTML table and display by returning an rdf:HTML literal, is it possible for those links to be treated similarly?  I'm guessing there is some sort of UI element defined for such behavior that may not be accessible to me.

Tim



Holger Knublauch

unread,
Apr 3, 2023, 9:17:45 AM4/3/23
to topbrai...@googlegroups.com
Please try to return something like

<a href="URL">Label</a>

as part of your rdf:HTML, assuming URL is the URI of the resource you want to link to. This should then become a proper link with right-click menu automatically, by the dash:HTMLViewer.


Holger


On 3 Apr 2023, at 1:55 pm, Tim Smith <smith...@gmail.com> wrote:

Thanks Holger!

I was thinking that such features were hard-coded.  I will dust off my HTML knowledge, LOL.  

One last question that is somewhat related to my other create link thread... Links on forms in EDG that EDG "knows" are resources in EDG, all have a right-click context menu.
Reply all
Reply to author
Forward
0 new messages