Examples

Create your widget

To display a field in a div tag, create your widget like this:

  • solid-: all the widgets of the core start with solid keyword

  • display-: to use the display directory of templates

  • div: to use the div template

Which gives us:

<solid-display
   bind-resource
   fields="name"
   widget-name="solid-display-div"
></solid-display>

This code generates:

<solid-display
   bind-resource
   fields="name"
   widget-name="solid-display-div"
>
   <!-- auto generated part -->
   <div>
      <solid-display-div name="name" value="John Doe">
         <div name="name">John Doe</div>
      </solid-display-div>
   </div>
   <!-- /auto generated part -->
</solid-display>

Add a feature

If you want to add a label, just add -label to your widget name

<solid-display
   bind-resource
   fields="name"
   widget-name="solid-display-div-label"
>
   <!-- auto generated part -->
   <div>
      <solid-display-div-label name="name" value="John Doe">
         <label>name</label>
         <div name="name">John Doe</div>
      </solid-display-div-label>
   </div>
   <!-- /auto generated part -->
</solid-display>

Mix keyword order

You can mix the order of the keywords, for the same result. For example, you can replace solid-display-div-label by solid-label-div-display:

Warning

Be careful because the generated widget will also have the name you give him. It can also have impact on CSS if you target widgets by their names.

<solid-display
   bind-resource
   fields="name"
   widget-name="solid-label-div-display"
>
   <!-- auto generated part -->
   <div>
      <solid-label-div-display name="name" value="John Doe">
         <label>name</label>
         <div name="name">John Doe</div>
      </solid-label-div-display>
   </div>
   <!-- /auto generated part -->
</solid-display>

Customize the label

To customize the label, you can set the label-name attribute on the solid-display

<solid-display
   bind-resource
   fields="name"
   widget-name="solid-label-div-display"
   label-name="User name:"
>
   <!-- auto generated part -->
   <div>
      <solid-label-div-display name="name" value="John Doe">
         <label>User name:</label>
         <div name="name">John Doe</div>
      </solid-label-div-display>
   </div>
   <!-- /auto generated part -->
</solid-display>

Handle multiples

In the case of a form, you may have to handle a field where you need to add or delete values. It can be done like this:

<solid-form
   bind-user
   fields="skills"
   multiple-skills
></solid-form>

As skills is a container, you will see each line as a text input, containing the id of the resource. You will also have the ability to add or remove lines. The default multiple widget used is solid-form-multiple.

Add a dropdown

If you want to limit the selection of the skills to a list, add a range-skills attribute.

<solid-form
   bind-user
   fields="skills"
   multiple-skills
   range-skills="http://ldpserver/skills"
></solid-form>

Your text inputs will be replaced by dropdowns showing the available options.

Customize the multiple widget

If you need to have only one dropdown to select multiple values, you can change the multiple widget:

<solid-form
   bind-user
   fields="skills"
   multiple-skills="solid-form-multipleselect"
   range-skills="http://ldpserver/skills"
></solid-form>

Like for other widgets, you can choose to add features by adding them to the widget name. The following example will add a label before the widget, and initialize the SlimSelect plugin used for autocompletion.

<solid-form
   bind-user
   fields="skills"
   multiple-skills="solid-form-multipleselect-autocompletion-label"
   range-skills="http://ldpserver/skills"
></solid-form>