Writing a Simple Glue Component

To write a custom display widget and assign it to a Service Form Item can requires the addition of a vue template prefixed with "glue-".

In this example we will create a simple container that will add additional formatting and messages around any child view nodes.

Where to put it

The base directory for all .vue is resources/vueglue/template. Any templates added to this directory will automatically have a JavaScript implementation using the gluebase mixin to provide standard methods and functionality. The default.js file in this directory is used to provide this base implementation.

Under this directory are additional directorys. Each of these directories can have their own default.js to provide additional base functionality to templates in that directory.

You also need to decide which module of your project should have the template. Typically this would be the common module of your project to allow all applications in your cluster to utilize the template.

Disclaimer Box

Our template will be called "glue-disclaimer-box.vue" and will be placed in our common module under resources/vueglue/template. To use this template on a view node configure the SFI to have the widget="disclaimer-box".

Template

Our component is going to add some disclaimer text above its children and an optional summary after the children.

<div class="borderedContainer">
    <cat-error :level="3" :message="text('disclaimer')"/>
    <hr/>
    <widget v-for="child in children" key="child" :viewtree="viewtree" :nodeid="child"/>
    <hr/>
    <div v-if="hasText('summary')" class="ptm pbm">{{text('summary')}}</div>
</div>

• The class “borderedContainer” is a utility class from the Verne Design System that will visually separate this container’s contents from the rest of the page.
• The “cat-error” component comes from the Verne Design System and provides multi level error/info display. In this case the level of the message has been set to info. The text method comes from the gluebase mixin and retrieves the text for the specific text type.
• A horizontal rule is displayed above the contents of the container.
• For each child of the container use the ‘widget’ component to render the child.
• The “v-for” allows multiple invocations of the widget component.
• A “key” attribute should also be specified whenever the “v-for” is used. This is a Vue requirement to ensure that the Virtual DOM is accurate.
• The viewtree is a default property of all glue-components and needs to be passed on to the widget component.
• The nodeid is the ID of the child to render.
• A second horizontal rule is displayed beneath the children.
• An optional summary is displayed underneath the children. This is using 2 more utility classes to set the top and bottom padding of the summary. This uses a v-if along with the hasText method to only display the div if there is text specified for the ‘summary’ text type.

Using our new component

To use this new template add the attribute widget to the Service Form Item with the value of "disclaimer-box".

<box shortCode="disclaimer" widget="disclaimer-box">
    <textKey key="disclaimer.disclaimer" type="disclaimer"/>
    <textKey key="disclaimer.summary" type="summary"/>
    <attribute attribute="AgreeYn" dataConstraint="yesNo" mandatory="true">
        <textKey type="label" key="agree.label"/>
    </attribute>
    <attribute attribute="AgreeDate" dataConstraint="dateOnly" mandatory="true">
        <textKey type="label" key="agreeDate.label"/>
    </attribute>
</box>

Our container, in this case a box, will use out new glue component and render the attributes as children.