Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
  • dev
  • djangoldp-quickstart
  • 0.13
4 results
Blame Permalink
Reference.rst 6.21 KiB

Widgets API Reference

Widgets are created at the moment you ask for it for the first time. The name of the widget is analyzed to build a widget which uses the features and template you want.

Here is a schema of how it works:

Widget API 1

A widget is built like this.

solid-[type]-[template]-[features]

All the keywords must be separated by ``-`` but can be put in any order.

type

Can be display , form or set. Will select the directory of template to use.

template

Name of the template to use. Available templates:

  • display directory
    • value: displays value directly in the widget tag.
    • div: displays value inside a <div> tag.
    • link: displays value as an href attribute in a <a> tag.
    • img: displays value as a src attribute in a <img> tag.
    • boolean: displays label (or name) in a <label> tag if value == true.
  • form directory
    • text: set value in an <input> of type text.
    • textarea: set value in a <textarea>.
    • richtext: set value in an <div> and initialize a light rich text editor by using Quill.
    • checkbox: create a checkbox, which is checked if value == true.
    • date: set value in an <input> of type date.
    • rangedate: set 2 values in 2 <input> of type date. Used for filtering with min and max. Possible to add start-value-[field] and end-value-[field] attributes to set min and max values. Date format to follow : "YYYY-MM-DD". Each attribute accepts today as value.
    • number: set value in an <input> of type number.
    • rangenumber: set 2 values in 2 <input> of type number. Used for filtering with min and max. Possible to add start-value-[field] and end-value-[field] attributes to set min and max values.
    • hidden: set value in an <input> of type hidden. If you need to use a boolean or numeric value you can add a bool or num mixin (ie: solid-form-hidden-bool).
    • dropdown: set value in a <select>. The list is provided via the range attribute, which expects a container’s URL, or via the enum attribute, which takes a list of the values separated by commas.
    • radio: set value in a list of radio buttons. The list is provided via the range attribute, which expects a container’s URL, or via the enum attribute, which takes a list of the values separated by commas.
    • multiple: Accept a container URI as a value, and inserts one widget per resource with a “remove” button for each widget, and an “add” button.
    • multipleselect: Accept a container URI as a value, and inserts a dropdown widget with the multiple attribute.
    • checkboxes: Accept a container URI as a value, allow to select multiple values with in a list of checkbox inputs. The list is provided via the range attribute, which expects a container’s URL, or via the enum attribute, which takes a list of the values separated by commas.
    • file: Inserts an <input/> and an <input type="file"/>. When a file is selected it’s uploaded, URL of file is returned by request and set as the <input/> value. The upload URL is provided via the upload-url attribute.
    • image: Works like file but allow only images in the input, and create a preview of the image when selected by the user.
    • color: set value in an <input> of type color.
    • password: set value in an <input> of type password.
    • time: set value in an <input> of type time. The format value is hh:mm.
  • set
    • default: inserts widgets directly in the set tag.
    • div: inserts widgets in a <div> tag.
    • ul: inserts widgets in a <ul> tag.
  • default (no template keyword defined)
    • action: Displays a link inside a <solid-link> tag with src for the data-src attribute, value for the next attribute and label as text content.
    • multiple: insert a solid-display with the @id of a container as data-src. The fields to display are chosen with the multiple-[field name]-fields attribute.

features

Features to add to the widget. You can choose as many as you want

  • label: adds a label before the template. Uses the attribute name if label is not defined.
  • labellast: adds a label after the template. Uses the attribute name if label is not defined.
  • autocompletion: initializes the SlimSelect plugin. Works only with dropdown and multipleselect templates.
  • autolink: analyzes widget content, and transforms all links in anchor.
  • mailto: adds mailto: at the beginning of an href attribute. Works only with links.
  • tel: adds tel: at the beginning of an href attribute. Works only with links.
  • blank: adds an attribute target="_blank". Works only with links.
  • placeholder: adds a placeholder in the input. Uses the attribute name or label if placeholder is not defined. Works only with input widgets.
  • date: transforms the value in a date, in the browser’s default locale format.
  • datetime: transforms the value in a date and time, in the browser’s default locale format.
  • multiline: shows a value on multiple lines (replace \n by <br>).
  • markdown: takes markdown code and displays formatted text. Works only with a display template (value, div, link).
  • addable: adds a <solid-form> that allows to add data on the field concerned. It accepts attributes from :ref:`solid-form <solid-form>` by using addable-[field]-[attribute]="value" format. If addable-data-src is not provided, the solid-form will use the URI in range-[field] as data-src, if declared.
  • oembed: displays the video content of an oEmbed link filled with the associated value-[field] attribute.