CustomControl Control

The CustomControl control allows you to set up a custom control from scratch, both on the server side and on the client side. Relies on the Control class, Control component name, and Custom control options properties for customizations.

Personalization

To add server-side logic , you must specify namespace and class name in the control's CustomControlClass property by inheriting from the Control class or a subclass.

On the client side, the name of the registered Vue component must be set in the CustomControlComponent field:

The component must be registered in the Scripts/Config/DataWebConfig.ts file as in this example:

import Vue from "vue";

import ControlDemo from "@Scripts/DataWeb/Components/Controls/ControlDemo.vue";

export default {
    install: (Vue, options) => {

        // Add DataWeb components here
        Vue.component("app-controldemo", ControlDemo);
    }
};

The component is structured as follows:

// ControlDemo.ts
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";

import { Control } from "@DataWeb/Scripts/Infrastructure/Data/Control";

@Component({ name: "ControlDemo" })
export default class ControlDemo extends Vue {
    @Prop() readonly control: Control;
    @Prop() readonly controls: Control[];
    @Prop() readonly store: string;
    @Prop() readonly context: any;
    @Prop() readonly isDisabled: boolean;
    @Prop() readonly isFormUpdating: boolean;

    private items: any[] = [];

    get navigationContext(): any {
        return this.$store.getters["navigationStore/navigationContext"];
    }

    private created() {
        this.$emit("created", this.control);
    }

    private addItem() {
        this.items.push({ title: "This is a new item in the list" });
        this.$emit("changeValue", this.control);
    }
};

// ControlDemo.vue
<script lang="ts" src="./ControlDemo"></script>

<template>
    <div :id="control.fullName" v-if="control.isVisible" class="pty-box-wht cf">
        <label class="fl-l">{ { control.title } }</label>
        <div class="fl-l">
            <div>
                <div @click="addItem()" :disabled="isDisabled" class="pty-box-gry">Add item</div>
            </div>
            <div v-for="(item, index) in items">
                <div class="pty-box-wht">{ { item.title } }</div>
            </div>
        </div>
        <div v-if="control.isRequired" class="fl-l">*</div>
        <div v-if="control.validationMessage" class="fl-l">{ { control.validationMessage } }</div>
    </div>
</template>

DataEditor Control