validation-mixin.rst

validation-mixin

Available from version 0.16

The validation mixin creates a modal dialog before deleting or submitting data.

Used by:

• :ref:`solid-delete <solid-delete>`
• :ref:`solid-form <solid-form>`

Attributes

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>