solid-form

Receives the URL of a ressource via its data-src attribute, and displays a form to edit the resource. If given the URL of a container of ressources, and displays a creation form to add a resource to the container.

<solid-form data-src="http://server/todos/"></solid-form>

Mixins

This component uses the following mixins:

Please check their documentation to know more about their capabilities.

Specific attributes

`fields`

List of the fields used to create the form (by default, all of them are used).

More details on its use below (in widget-mixin attributes).

`label-[field]`

When displaying a form, the default labels are the fields names of the model. If you want something fancier, you can set this attribute. i.e. label-username="Your name"

`naked`

When the attribute is set, the submit button will be removed. It’s particularly useful to prevent the nested forms to display their own submit button.

`upload-url-[field]`

URL to upload file for field [field], it automatically set widget-[field] to solid-form-file if net defined. It’s particularly useful with a dropdown field.

`submit-button`

Text of the submit button of the form.

`class-submit-button`

Define the class of the div containing the submit button.

`range-[field]`

URL of a container which list the accepted values for the field [field]. It’s particularly useful with a dropdown field.

`enum-[field]`

Available from version 0.13

List of values of your choice for the field [field]. They have to be filled manually and must be separated by commas. It’s particularly useful with a dropdown or radio field.

Two formats are possible:

enum-[field]="value 1, value 2, value 3" : each value will be displayed

and loaded in value attribute

enum-[field]="value1 = a, value2 = b, value3 = c": each value will be displayed

and “a”, “b”, “c” will be loaded in value attribute.

`order-asc-[field]` or `order-desc-[field]`

Name of the field used to order the range list [field]. i.e. order-asc-users="username"

`partial`

Add this attribute when the form does not include all the fields of the resource to update.

`required-[field]`

Add this attribute to make the [field] required by adding the required attribute to the input.

`min-[field]`

Add this attribute for the field [field] to define its minimum value. It works only with solid-form-number and solid-form-time widgets.

`max-[field]`

Add this attribute for the field [field] to define its maximum value. It works only with solid-form-number and solid-form-time widgets.

`pattern-[field]`

Available from version 0.13

Add this attribute for the field [field] to define a regular expression to check the input’s value. It works only with a solid-form-text widget.

`title-[field]`

Available from version 0.13

Add this attribute for the field [field] to precise extra information about an element. It works only with a solid-form-text widget.

`autocomplete-[field]`

Available from version 0.15

Equal to the value off, it cancels the automatic entry of values in the relevant [field]. It can be added to inputs, textarea and select.

`autosave`

Available from version 0.16

If the attribute is defined, each change in an input will trigger a request to update the resource. This attribute works only when editing resources, not creating them.

`maxlength-[field]`

Available from version 0.16

Add this attribute for the field [field] to define the maximum number of characters that can be typed. It works only with solid-form-text, solid-form-email or solid-form-password and solid-form-textarea widgets.

`minlength-[field]`

Available from version 0.16

Add this attribute for the field [field] to define the minimum number of characters that can be typed. It works only with solid-form-text, solid-form-email or solid-form-password and solid-form-textarea widgets.

`step-[field]`

Available from version 0.16

Add this attribute for the field [field] to define the stepping interval number to use as constraint validation. Its based on the min-[field] value. It works with :

solid-form-time widget : Its value is given in seconds (default value is 60).

solid-form-number widget : Its default value is 1.

Mixin attributes

From next-mixin :

It can also be used to indicate the name attribute of the <solid-route> to reach after :

a click on a <solid-delete> button (only after the resource is correctly deleted);

a click on the submit button in a <solid-form> (only after the resource is correctly saved).

See the documentation of <solid-router> for more details.

From store-mixin :

`data-src`

The uri of the LDP resource you want to fetch and use in the component.

Each time this attribute is changed, the data is fetched again.

When the data has been successfuly fetched, the mixin ask the component to render.

`nested-field`

The name of the field of the requested resource to display. Useful when the source url is auto-generated (for instance, with the attribute bind-resources) but you need to display another field of this source.

The example below illustrates how to use nested-field attribute :

The profile is a resource nested in the current resource, it will automatically fetch the city, phone, website values to display them.

The second solid-display shows another way to display the values from a nested resource with dot ..
<solid-display
    data-src="data/list/user-1.jsonld"
    nested-field="profile"
    fields="city, phone, website"
></solid-display>

<solid-display
    data-src="data/list/user-1.jsonld"
    fields="profile.city, profile.phone, profile.website"
></solid-display>

`extra-context`

The id of the <script> tag which contains the context you want to add for this component. An extra context looks like this:
<script id="custom-context" type="application/ld+json">
    { "user": "https://api.test-paris.happy-dev.fr/users/" }
</script>
If your <script> tag has the attribute data-default-context, this extra context will be applied on all the components which doesn’t have an extra-context attribute.

`loader-id`

Id of the loader element you want to display during the loading time.

Exemple of use :

<section>
    <h1>Solid-form</h1>
    <div id="form-loader"  >
        Loading&#8230;
    </div>
    <solid-form
        data-src="https://api.startinblox.com/users/"
        fields= "first_name, last_name, email"
        label-first_name = "First name"
        label-last_name = "Last name"
        label-email = "Email"
        loader-id = "form-loader">
    </solid-form>
</section>

`no-render`

Available from version 0.13

While this attribute is present on a component, no data will be fetched. This attribute is automatically removed by the router when the component is in a view which has been activated. This allow to lazy-load components.

`store://` attribute values

Available from version 0.13
This mixin decode all attribute values starting by store://resource, store://container or store://user and replace them by the values fetched from the store.

It can be a value fetched from the current resource or the current logged in user (works with sib-auth).

This example will create a text input filled with the username of the current user:
<solid-form
    data-src="https://api.startinblox.com/circles/"
    fields="user"
    value-user="store://user.username"
></solid-form>
This example will write the name of the circle in the custom field:
<solid-display
    data-src="https://api.startinblox.com/circles/1/"
    fields="custom-field"
    value-custom-field="store://resource.name"
></solid-display>

From validation-mixin :

`confirmation-type`

It is a prerequisite and can take two options :

confirm: to access to a basic modal dialog.

dialog: to get a <dialog> more customizable.

`confirmation-message`

Message displayed in the modal dialog (confirm or dialog type). The message by default is “Please, confirm your choice” in English, “Merci de confirmer votre choix” in French.

The attributes below only concern ``dialog`` type.

`confirmation-submit-text`

Text displayed on the submit button (by default, “Ok” in English, “Oui” in French).

`confirmation-cancel-text`

Text displayed on the cancel button (by default “Cancel” in English, “Annuler” in French).

`confirmation-submit-class`

Submit button class name (undefined by default).

`confirmation-cancel-class`

Cancel button class name (undefined by default).

Some examples of the use of validation mixin attributes :

<solid-delete
    data-src="http://server/user/"
    confirmation-type="confirm"
    confirmation-message="Thank you to confirm the data deletion."
></solid-delete>

<solid-form
    data-src="../data/list/events.jsonld"
    confirmation-type="dialog"
    confirmation-message="Are you sure you want to create this event ?"
    confirmation-submit-text="Yes, I am"
    confirmation-submit-class="submit-button"
    confirmation-cancel-class="cancel-button"
></solid-form>

`confirmation-widget`

Available from version 0.17

Allows to insert a widget in the modal dialog, instead of confirmation-message (confirmation-widget prevails over confirmation-message). The widget can contain a <solid-display> to display data from the resource concerned.

Example of confirmation-widget attribute use :
<solid-widget name="confirm-delete-widget">
    <template>
        <div>
            <p>Are you sure to delete <strong><solid-display fields="name" data-src="${value}" style="display:inline-block"></solid-display></strong> ? </p>
        </div>
    </template>
></solid-widget>

<solid-delete
    data-src="http://server/user/"
    confirmation-type="dialog"
    confirmation-widget="confirm-delete-widget"
></solid-delete>

From widget-mixin :

`fields`

The ordered list of fields to be displayed, separated by commas.

By default, all the fields of the resource are used.

To not show any fields, put an empty fields (eg. <solid-display fields />).

By default, all displayed fields are inserted into a <div>.

It is possible to use the dot . to display data from a nested resource.

Sets

To group fields within a <div> tag, enclose some fields in parenthesis.

In this example, a <div name="fullName"> will be created, and it will contain the widgets of the first name and the last name of the user.
<solid-display
    data-src="http://server/users/1/"
    fields="fullName(first_name, last_name), email"
></solid-display>
Make sure you don’t give your set the same name as a field as it would result in an infinite loop.

You can customize the group widget, see the Sets widgets page for more info.

Strings

To display static strings in the fields list, put it inside quotes.
<solid-display
    data-src="http://server/users/1/"
    fields=" 'Email: ', email "
></solid-display>
It will create a <span> element filled with the text ``Email: ``.

`value-[field]`

To display a string not contained within the data.

<solid-display
    fields="title"
    value-title="My custom and static title"
></solid-display>

`default-[field]`

Value displayed for [field] when it’s empty or not defined.

`action-[field]`

Displays a link with a <solid-link> tag with the current resource as data-src and the value of the attribute as next.

`link-text-[field]`

Works only with solid-display-link(-mailto/tel/blank) and solid-action Available from version 0.18

Modify the displayed value as link in :

<a> for solid-display-link,

<solid-link> in solid-action.

`src-[field]`

Defines the data-src in the solid-link created by the action-[field] attribute.

`label-[field]`

Set the label for the [field].

`placeholder-[field]`

Set the placeholder for the [field].

`class-[field]`

Set the class applied to the widget of the [field] or the set.

`editable-[field]`

Works only with display widgets

Add an “edit” button next to the [field] to let the user edit it. The changes are saved as soon as the field loses focus.

The editable attribute works with the following templates:

display-div

display-link
<solid-display
    data-src="http://server/users/1/"
    fields="name"
    widget-name="solid-display-div"
    editable-name
></solid-display>

`alt-[field]`

Works only with solid-display-img

Set the alt for the field [field].

`empty-[set]`

Available from version 0.17

Name of the widget to display when all the fields in [set] are empty.

`empty-[set]-value`

Available from version 0.17

Value to pass to the empty widget if all fields in [set] are empty. It is accessible in ${value}

<solid-display
    data-src="http://server/users/"
    fields="fullname(first_name, last_name)"
    empty-fullname="no-name-widget"
    empty-fullname-value="add-name"
></solid-display>

<solid-widget name="no-name-widget">
    <template>
        <small>No fullname filled in. <solid-link next="${value}">click here to add one</solid-link></small>
    </template>
</solid-widget>

`multiple-[field]`

Allows to display the container [field] nested in the current resource.

It takes a container URI as a value, fetch all the resources of this container and display them.

Multiple widget can be specified, example: multiple-skills="my-custom-multiple-widget". If argument is used without value, default multiple widget is used.

It can be used in :

solid-display: a nested solid-display will be created with the container URI as data-src.

All attributes of the form multiple-[field]-[attribute] are transfered on the nested solid-display as [attribute]. For example, to choose the fields you want to display, you can set: multiple-[field]-fields="name, @id"
<solid-display
    data-src="http://server/users/1/"
    fields="skills"
    multiple-skills
    multiple-skills-fields="name"
></solid-display>
solid-form : all the resources of the container are displayed in a text widget.

Buttons are automatically created to add and remove elements.

For solid-form only :

multiple-[field]-add-label : Text of the “+” button used to add an element
multiple-[field]-remove-label : Text of the “x” button used to remove an element

Available from version 0.18

multiple-[field]-add-class : Class of the “+” button used to add an element
multiple-[field]-remove-class : Class of the “x” button used to remove an element

Widgets

By default, the widget used is <solid-form-label-text>. Cf the Widget page for more info.

Events

`formChange`

Triggered when the form values change

`save`

Triggered when the response of the submit has been received successfully

solid-form

Mixins

Specific attributes

fields

label-[field]

naked

upload-url-[field]

submit-button

class-submit-button

range-[field]

enum-[field]

order-asc-[field] or order-desc-[field]

partial

required-[field]

min-[field]

max-[field]

pattern-[field]

title-[field]

autocomplete-[field]

autosave

maxlength-[field]

minlength-[field]

step-[field]

Mixin attributes

data-src

nested-field

extra-context

loader-id

no-render

store:// attribute values

confirmation-type

confirmation-message

confirmation-submit-text

confirmation-cancel-text

confirmation-submit-class

confirmation-cancel-class

confirmation-widget

fields

value-[field]

default-[field]

widget-[field]

default-widget

default-widget-[field]

action-[field]

link-text-[field]

src-[field]

label-[field]

placeholder-[field]

class-[field]

editable-[field]

alt-[field]

empty-[set]

empty-[set]-value

multiple-[field]

Widgets

Events

formChange

save

`fields`

`label-[field]`

`naked`

`upload-url-[field]`

`submit-button`

`class-submit-button`

`range-[field]`

`enum-[field]`

`order-asc-[field]` or `order-desc-[field]`

`partial`

`required-[field]`

`min-[field]`

`max-[field]`

`pattern-[field]`

`title-[field]`

`autocomplete-[field]`

`autosave`

`maxlength-[field]`

`minlength-[field]`

`step-[field]`

`data-src`

`nested-field`

`extra-context`

`loader-id`

`no-render`

`store://` attribute values

`confirmation-type`

`confirmation-message`

`confirmation-submit-text`

`confirmation-cancel-text`

`confirmation-submit-class`

`confirmation-cancel-class`

`confirmation-widget`

`fields`

`value-[field]`

`default-[field]`

`widget-[field]`

`default-widget`

`default-widget-[field]`

`action-[field]`

`link-text-[field]`

`src-[field]`

`label-[field]`

`placeholder-[field]`

`class-[field]`

`editable-[field]`

`alt-[field]`

`empty-[set]`

`empty-[set]-value`

`multiple-[field]`

`formChange`

`save`