Blank rows for a "select" html widget on a web page built using Structr 4.1.2 Community edition

Question

Structr version 4.1.2 on Structr managed Sandbox (Community edition)

I'm investigation Structr and I have hit a problem related to the way an "html" select operates on a Structr built page.

I have a table of 'consultants' and one of 'countries' with an isBasedIn relation set between them: a 'consultant' 'is-based-in' a 'country'. I have a 'page' displaying a 'consultant' record where a user can update its properties, one of which is this isBasedIn relation.

I've come across three problems related to filling and use a 'select' html widget(?) which if resolved will give me a better understanding of data management in 'pages' built with Structr.

Q1) I build a 'select' widget using a function query ${'Country'} but on the page the 'select' widget has many "blank" rows. How do I enable the 'select' widget to show the "Country.name" property. I have tried setting the "value" property to ${current.id}, or ${Country.id} or ${dataKeyName.id}, and other "randomly" chosen settings, with no luck.

Q2) I want the user to assign/update which country the 'consultant' 'is-based-in'. How to I implement this so the Country ID is assigned to the isBasedIn property of the current 'consultant' record?

Q3) I want a user to assign a list of countries the 'consultant' hasWorked. Is this done by replicating the single choice 'select' widget and adding "multiple" to the style property?

So far the documentation and YouTube channel doesn't appear to offer any pointers on these questions.

Answer 1

The function query should probably look like this: find('Country'). A repeater with a function query is by default a (StructrScript) scripting environment, so you do not need the opening ${ and closing }.

If your function query is more complex and you would like to use JavaScript, then you could write the function query with a starting { and closing } and use the JavaScript functionality like so:

{
    return $.find('Country');
}

A good primer on this is available in the structr documentation: https://docs.structr.com/docs/step-by-step-tutorial?highlight=repeater#dynamic-content-repeater

For updating or creating data you simply need to issue a REST request (POST for creating objects, PUT for updating them). A good primer on this is available at https://docs.structr.com/docs/rest-guide

For linked data, you can simply send the UUID (the id attribute) of the node you want to link as the node value. So if you would like to update a User objects isBasedIn relationship you could do the following in JavaScript:

let domain   = 'www.example.com'; // replace with your domain or localhost:8082
let typeName = 'User';            // type of the node you want to update
let objectId = 'abcdef123';       // replace with the uuid of the user node you want to update
let countryId = '123abcdef';      // replace with the uuid of the target country the user is based in

fetch('http://' + domain + '/structr/rest/' + typeName + '/' + objectId, {
    method: 'PUT',
    body: JSON.stringify({
        isBasedIn: countryId
    })
});

This works for a relationship with cardinality 1 (as defined in the schema). The user can only be based in one country. If the schema relationship is of cardinality *, then simply send an array of uuids to link to.

Answer 2

Thank you @vigorouscoding for you feedback and I'll follow up on the links you suggest.

So on this occasion the initial issue of names not showing was inexperience with html: I needed to a 'content' node beneath the "option" node (where the 'option' node is a child of the 'select' node).