About the Nobel example

In this example we will use data from data.nobelprize.org, more specifically RDF expressing facts about the Nobel Laureate Marie Curie. For a more in depth view of what is expressed in this dataset take a look at the Nobel Prizes as Linked Data specification.

We utilize the same RDForms templates as used on the nobeprize.org webb with a few small tweaks to illustrate the features of RDForms. The RDF for Marie Curie is also changed slightly to illustrate the strength of the validator view.

The example is shown in four different subpages corresponding to the four renderer configurations provided directly in RDForms. Furthermore, for each renderer configuration (subpage) we show all the available views.

The code for the Nobel example is given below. The code shows how to initialize the Editor view with the React & Material UI rendering configuration. The other views are more or less identical and switching to another rendering configuration is as simple as replacing rdforms.react.js with rdforms.bootstrap.js, rdforms.bmd.js or rdforms.jquery.js.

The HTML

<script src="/lib/rdforms.react.js"></script>
<script src="/lib/rdfjson.js"></script>
<script src="/examples/dummyChooser.js"></script>

<div id="rdformsEditorAnchor"></div>

The HTML code does the following:

1. Loads the RDForms framework with the React & Material UI renderers.
2. Loads the RDFJson library for working with RDF.
3. Initializes a chooser (only needed for editor views, see section further down for an explanation).
4. Provides a node where the editor will be inserted.

The javascript

const itemStore = new rdforms.ItemStore();
await rdforms.bundleLoader(itemStore, [['/examples/nobel/foaf.json'],
    ['/examples/nobel/dbpo.json'], ['/examples/nobel/nobel.json']]);
const template = itemStore.getItem('nobel::Laureate');

const graph = new rdfjson.Graph(await fetch('/examples/nobel/marie.json')
    .then((response) => response.json()));
const resource = 'http://data.nobelprize.org/resource/laureate/6';

const editor = new rdforms.Editor({ resource, graph, template, compact: false },
                                  'rdformsEditorAnchor');

The code does the following:

1. Load the template bundles into the itemstore with help of the bundleLoader.
2. Get the template we need from the itemstore (using the identifier 'nobel::Laureate').
3. Load an RDF graph (here in the RDF/JSON format).
4. Identify the resource we want to edit (i.e. a URI).
5. Initialize the editor on a node.

The chooser

When using the Editor view of RDForms an integration with the surrounding application is needed for all non-trivial templates. More specifically, whenever you need to choose resources in dropdowns or dialogs that are drawn from a larger dataset an integration is needed. This integration is done via registering one or several choosers. A trivial (dummy chooser) can look like:

const fixedChoices = [
  { value: 'http://example.com/1', label: { en: 'Example 1' }, description: { en: 'hoppla' } },
  { value: 'http://example.com/2', label: { en: 'Example 2' } },
];

rdforms.renderingContext.chooserRegistry.itemtype('choice').register({
  getChoice(item, value) {
    return { value, label: { en: value }};
  },
  show(binding, onSelect, field) {
    if (confirm("Custom dialog where you integrate with your system to select values.\nSelect the value \"http://example.com/\"?")) {
      onSelect({ value: 'http://example.com', label: { en: 'example.com' } });
    }
  },
  search() {
    return new Promise(success => success(fixedChoices));
  },
  supportsInlineCreate(/* binding */) {
    return true;
  },
});

See the documentation on choosers for a more in depth explanation.