Controllo CustomControl

Il controllo CustomControl permette di impostare da zero un controllo custom, sia lato server che lato client. Si appoggia alle proprietà Control class, Control component name e Custom control options per le personalizzazioni.
 
Personalizzazione
Per aggiungere logica server side è necessario specificare namespace e nome classe nella proprietà del controllo CustomControlClass ereditando dalla classe Control o da una sotto classe.
 
Lato client va impostato il nome del componente registrato Vue nel campo CustomControlComponent:
 
 
Il componente va registrato nel file Scripts/Config/DataWebConfig.ts come in questo esempio:
 
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);
    }
};
 
Il componente è strutturato come segue:
 
// 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>
Controllo DataEditor