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 setwidget-[field]
tosolid-form-file
if net defined. It’s particularly useful with a dropdown field.
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 displayedand loaded in value attribute
enum-[field]="value1 = a, value2 = b, value3 = c"
: each value will be displayedand “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 therequired
attribute to the input.
min-[field]
Add this attribute for the field
[field]
to define its minimum value. It works only withsolid-form-number
andsolid-form-time
widgets.
max-[field]
Add this attribute for the field
[field]
to define its maximum value. It works only withsolid-form-number
andsolid-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 asolid-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 asolid-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 toinputs
,textarea
andselect
.
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 withsolid-form-text
,solid-form-email
orsolid-form-password
andsolid-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 withsolid-form-text
,solid-form-email
orsolid-form-password
andsolid-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 themin-[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 thecity
,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 attributedata-default-context
, this extra context will be applied on all the components which doesn’t have anextra-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… </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
orstore://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
ordialog
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.
widget-[field]
The widget to be used to display the
[field]
. This widget can be:
A core widget. More informations on the widget reference page.
A custom widget. More informations on the solid-widget page.
A native HTML tag (ie:
h1
). The value will be inserted as text content of the tag.
default-widget
The widget to use for all the fields, except if a specific one is defined for a field.
default-widget-[field]
The widget displayed by default if the
[field]
is empty.
action-[field]
Displays a link with a
<solid-link>
tag with the current resource asdata-src
and the value of the attribute asnext
.
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 theaction-[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 nestedsolid-display
will be created with the container URI as data-src.All attributes of the form
multiple-[field]-[attribute]
are transfered on the nestedsolid-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 elementmultiple-[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 elementmultiple-[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