Extend a new Control

Introduction

For a good reason, sometimes we must extend a new control for our special cases. This has to be done in order to reach the requirement from the end-users, customers,...

So "Extensible" is very important. That's why I found a solution to deal with.

Requirements to extend a new control

• Vue knowledge

Concept

To extend a new control, we need to prepare 3 Vue Components:

• Template component - How the control will look like in the Configuration/Template page
• Sidebar component - To handle your own data/config for your custom control
• GUI Component - To show up for the end-users.

Note: You don't need to fork my project and build your own library to deal with this. You can create the Vue Component in your current project. Let me show you more below.

For example, I will create a new control using this library http://www.bootstraptoggle.com/ instead of using a normal checkbox.

Create a Template Control

Because of the toggle, it based on the checkbox concept. So I will copy the Checkbox Template Control which already created in the Vue Form Builder.

Normal code:

<template>
    <div class="controlItemWrapper" :class="control.className" :data-control-name="control.name">
        <div class="controlItem row" :id="control.name" v-if="labelPosition === 'left'">
            <div class="col-md-4">
                <label :class="{'bold': control.labelBold, 'italic': control.labelItalic, 'underline': control.labelUnderline}">
                    {{control.label}}
                </label>
            </div>
            <div class="col-md-8 input-group">
                <div class="text-center w-100">
                    <input type="checkbox" :name="control.fieldName" :checked="control.isChecked">
                </div>
            </div>
        </div>
        <div class="controlItem row" :id="control.name" v-else>
            <div class="form-group col-md-12">
                <label :class="{'bold': control.labelBold, 'italic': control.labelItalic, 'underline': control.labelUnderline}">
                    {{control.label}}
                </label>
                <div class="input-group">
                    <div class="text-center w-100">
                        <input type="checkbox" :name="control.fieldName" :checked="control.isChecked">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CheckboxControl",
        props: ['control', 'labelPosition'],
    }
</script>

<style scoped>

</style>

You can see that we can use the control object and labelPosition string.

For the "labelPosition" concept, please check it out at the Documentation for the Vue Form Template.

So I'm creating a new Vue Component: "TemplateToggleControl.vue" in my own project.

First, we'll change the template part of Vue Component:

<template>
    <div class="controlItemWrapper" :class="control.className" :data-control-name="control.name">
        <div class="controlItem row" :id="control.name" v-if="labelPosition === 'left'">
            <div class="col-md-4">
                <label :class="{'bold': control.labelBold, 'italic': control.labelItalic, 'underline': control.labelUnderline}">
                    {{control.label}}
                </label>
            </div>
            <div class="col-md-8 input-group">
                <div class="text-center w-100">
                    <input type="checkbox" :name="control.fieldName" :checked="control.isChecked">
                </div>
            </div>
        </div>
        <div class="controlItem row" :id="control.name" v-else>
            <div class="form-group col-md-12">
                <label :class="{'bold': control.labelBold, 'italic': control.labelItalic, 'underline': control.labelUnderline}">
                    {{control.label}}
                </label>
                <div class="input-group">
                    <div class="text-center w-100">
                        <input type="checkbox" :name="control.fieldName" :checked="control.isChecked">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

... To be continue