<xbl:binding>element and multiple
<xbl:binding>can be grouped under an
<xbl:xbl>element. The Form Builder toolbox shows components, grouped by "types of components", e.g. "Text Controls", as shown at the right of this text. To instruct Form Builder that multiple component should be grouped together in the toolbar, place then inside the same
<xbl:xbl>. Then, as a child element of
<xbl:xbl>, you provide the title for the group inside an
<fb:metadata>, as in (see the full source as of Orbeon Forms 2018.1):
<fb:metadata>section inside the
<xbl:binding>of your component. That
<fb:metadata>provides to Form Builder the localized display name for the component, an icon, and the markup to be inserted by Form Builder into the form when the component is used. For instance, the
<metadata>section for the Explanatory Text component look like (see the full source as of Orbeon Forms 2018.1):
<fb:small-icon>to point to an image file:
<fb:large-icon>was present in a number of XBL components but never used by Form Builder. We recommend, starting with Orbeon Forms 2018.1, using
<fb:icon-class>which allows for scalable icons.
<fb:icon-class>element allows you to specify a set of CSS classes used in the toolbox to show a scalable font icon. This is useful with icons from Font Awesome and similar. In that case, don't use
<fb:small-icon>. For example:
<fb:templates>for your component you declare:
<fb:view>, the markup that goes in the view, e.g.
<xf:input>for a plain XForms input.
<fb:bind>, attributes you might want to add to the
<xf:bind>Form Builder adds for your component.
<fb:templates>, you can just use an
<fb:template>element, as in:
<fb:control-details>element, which you add under
<fb:control-details>can contain any XForms control. This allows for more flexible layouts:
<xf:model>, which can be used for:
<xf:model>is available to the control specified.
instance(), which contains the control being edited.
<xf:input>controls. These are bound to attributes or elements inside the template you provided inside
<xf:alert>, can either be:
langattribute indicating the language. This is what the author of the Dynamic Data Dropdown control did for the first