.gitlab-ci.yml

@@ -14,6 +14,7 @@ test:
     - npm test
   except:
     refs:
+      - master
       - tags
     variables:
       - $GITLAB_USER_ID == $GIT_BOT_USER_ID
@@ -22,6 +23,7 @@ publish:
   stage: publish
   script:
     - npm run build
+    - npm test
     - npx semantic-release
   only:
     - master

package.json

 {
   "name": "@coscine/form-generator",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "main": "./dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -32,12 +32,15 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.21.0",
-    "@coscine/app-util": "^1.5.2",
+    "@coscine/api-connection": "^1.22.0",
+    "@coscine/app-util": "^1.6.0",
     "@types/jquery": "^3.5.2",
     "@types/vuelidate": "^0.7.13",
     "bootstrap-vue": "^2.17.3",
     "jquery": "^3.5.1",
+    "rdf-ext": "^1.3.0",
+    "rdf-parse": "^1.5.0",
+    "rdf-validate-shacl": "^0.2.3",
     "vue": "^2.6.12",
     "vue-i18n": "^8.22.0",
     "vue-material-design-icons": "^4.9.0",

src/FormGenerator.vue

@@ -3,14 +3,17 @@
     <div v-for="(formElement, index) in sortedSHACLDefinition" :key="index">
       <WrapperInput
         :componentDefinition="fieldDefinition(formElement)"
+        :idForFixedValues="fixedValueIds[index]"
         :formFieldInformation="formElement"
-        :formData="SHACLResponse"
+        :formData="formData"
         :resourceId="resourceId"
         :projectId="projectId"
         :fixedValueMode="fixedValueMode"
         :fixedValues="fixedValues"
         :disabledMode="disabledMode"
         :languageLocale="languageLocale"
+        :v="$v"
+        :errorMessages="errorMessages"
       />
     </div>
   </div>
@@ -30,6 +33,11 @@ import { LanguageUtil } from '@coscine/app-util';
 
 import FieldReader from './util/FieldReader';
 
+import factory from 'rdf-ext';
+import SHACLValidator from 'rdf-validate-shacl';
+import rdfParser from "rdf-parse";
+import { Readable } from 'stream';
+
 import WrapperInput from './components/WrapperInput.vue';
 
 Vue.use(BootstrapVue);
@@ -37,10 +45,13 @@ Vue.use(VueI18n);
 
 const i18n = new VueI18n({
   locale: 'en',
-  messages: coscine.i18n['form-generator'],
+  messages: (window.coscine && coscine.i18n) ? coscine.i18n['form-generator'] : {},
   silentFallbackWarn: true,
 });
 
+import Vuelidate from 'vuelidate';
+Vue.use(Vuelidate);
+
 export default Vue.extend({
   i18n,
   name: 'FormGenerator',
@@ -52,8 +63,12 @@ export default Vue.extend({
       default: '',
       type: String,
     },
-    SHACLResponse: {
-      default: {},
+    mimeType: {
+      default: 'application/ld+json',
+      type: String,
+    },
+    formData: {
+      default: () => ({}),
       type: Object,
     },
     projectId: {
@@ -73,41 +88,130 @@ export default Vue.extend({
       type: Boolean,
     },
     fixedValues: {
-      default: {},
+      default: () => ({}),
       type: Object,
     },
+    SHACLDefinition: {
+      default: '',
+      type: String,
+    },
+    languageLocale: {
+      default: () => LanguageUtil.getLanguage(),
+      type: String,
+    },
   },
   data() {
     return {
-      sortedSHACLDefinition: [] as object[],
-      SHACLDefinition: Object,
-      languageLocale: LanguageUtil.getLanguage(),
+      quads: [] as any[],
+      fixedValueIds: [] as any[],
+      sortedSHACLDefinition: [] as any[],
+      errorMessages: {} as any,
+      timeouts: {} as any,
+      timeoutInterval: 500,
+    };
+  },
+  validations() : any {
+    const me = this;
+    if (!this.fixedValueMode) {
+      const validator = {} as any;
+      for (const nodename of Object.keys(this.formData)) {
+        validator[nodename] = {
+          $each: {
+            value: {
+              async shaclValidated(value: any) {
+                // A debounce has been implemented based on the nodename
+                if (me.timeouts[nodename]) clearTimeout(me.timeouts[nodename]);
+                return new Promise((resolve, reject) => {
+                  me.timeouts[nodename] = setTimeout(async() => {
+                    // Validate the whole data and check if for the current nodename an error is logged
+                    const report = await me.validatorFunction();
+                    let resolveValue = true;
+                    if (report.results.some((entry: any) => entry.path.value === nodename)) {
+                      const result = report.results.find((entry: any) => entry.path.value === nodename);
+                      me.errorMessages[nodename] = result.message;
+                      resolveValue = false;
+                    }
+                    resolve(resolveValue);
+                  }, me.timeoutInterval);
+                });
+              },
+            },
+          },
+        };
+      }
+      return {
+        formData: validator,
+      };
+    }
+    return {
+      formData: {},
     };
   },
   beforeMount() {
     i18n.locale = this.languageLocale;
-    this.sortedSHACLDefinition = [];
-    if (this.applicationProfileId !== '') {
-      if (
-        this.resourceId !== '00000000-0000-0000-0000-000000000000' &&
-        this.resourceId !== ''
-      ) {
-        MetadataApi.getProfileComplete(
-          this.applicationProfileId,
-          this.resourceId,
-          (response: any) => {
-            this.handleApplicationProfiles(response);
-          });
+    this.handleApplicationProfiles();
+  },
+  watch: {
+    SHACLDefinition() {
+      this.handleApplicationProfiles();
+    },
+    formData() {
+      this.$v.$reset();
+    },
+  },
+  methods: {
+    async validatorFunction() {
+      const shapes = await this.loadDataset(this.SHACLDefinition, this.mimeType, this.applicationProfileId);
+      // RDF/JSON => JSON-LD since the loadDataset function doesn't support RDF/JSON
+      const dataObject = {} as any;
+      dataObject['@type'] = this.applicationProfileId;
+      for (const entry of Object.keys(this.formData)) {
+        for (const metadataEntry of this.formData[entry]) {
+          if (metadataEntry['value'] !== '') {
+            if (metadataEntry['type'] === 'uri') {
+              dataObject[entry] = {
+                '@id': metadataEntry['value'],
+                '@type': metadataEntry['datatype']
+              };
             } else {
-        MetadataApi.getProfile(
-          this.applicationProfileId,
-          (response: any) => {
-            this.handleApplicationProfiles(response);
-          });
+              dataObject[entry] = {
+                '@value': metadataEntry['value'],
+                '@type': metadataEntry['datatype']
+              };
             }
           }
+        }
+      }
+      const data = await this.loadDataset(JSON.stringify(dataObject), 'application/ld+json', null);
+      const validator = new SHACLValidator(shapes);
+      const report = validator.validate(data);
+      this.$emit('isValid', report.conforms);
+      return report;
+    },
+    async getQuads (data: string, mimeType: string, baseUri: string | null) : Promise<any> {
+      const input = new Readable({
+        read: () => {
+          input.push(data);
+          input.push(null);
+        }
+      });
+      const quads = [] as any[];
+      return new Promise((resolve) => {
+        rdfParser.parse(input, { contentType: mimeType, baseIRI: baseUri })
+          .on('data', (quad: any) => {
+            quads.push(quad);
+          })
+          .on('end', () => resolve(quads));
+      });
+    },
+    async loadDataset (data: string, mimeType: string, baseUri: string | null) {
+      const quads = await this.getQuads(data, mimeType, baseUri);
+      const dataSet = factory.dataset();
+      for (const quad of quads) {
+        dataSet.add(quad);
+      }
+      return dataSet;
     },
-  methods: {
     checkField(data: any, nodename: string, property: string = 'value') {
       return FieldReader.isValueAssignedToKey(data, nodename, property);
     },
@@ -116,14 +220,14 @@ export default Vue.extend({
         if (
           this.checkField(formElement, 'http://www.w3.org/ns/shacl#datatype')
         ) {
-          let datatype = formElement['http://www.w3.org/ns/shacl#datatype'][0];
+          let datatype = FieldReader.getObject(formElement, 'http://www.w3.org/ns/shacl#datatype');
           if (datatype['value'] === 'http://www.w3.org/2001/XMLSchema#string') {
             if (
               this.checkField(
                 formElement,
                 'http://datashapes.org/dash#singleLine'
               ) &&
-              formElement['http://datashapes.org/dash#singleLine'][0][
+              FieldReader.getObject(formElement, 'http://datashapes.org/dash#singleLine')[
                 'value'
               ] === 'false'
             ) {
@@ -151,22 +255,36 @@ export default Vue.extend({
       }
       return null;
     },
-    handleApplicationProfiles(response: any) {
-      this.SHACLDefinition = response.data;
-      let keys = Object.keys(this.SHACLDefinition);
-      for (let i = 0; i < keys.length; i++) {
-        for (let j = 0; j < keys.length; j++) {
-          let tmp = (this.SHACLDefinition as any)[keys[j]];
-          if (
-            this.checkField(tmp, 'http://www.w3.org/ns/shacl#order') &&
-            tmp['http://www.w3.org/ns/shacl#order'][0]['value'].toString() ===
-              '' + i
-          ) {
-            tmp['idForFixedValues'] = keys[j];
-            this.sortedSHACLDefinition.push(tmp);
+    async retrieveSHACLDefinition() : Promise<any> {
+      if (this.SHACLDefinition !== null && this.SHACLDefinition !== '') {
+        return this.getQuads(this.SHACLDefinition, this.mimeType, this.applicationProfileId);
+      }
+      return [];
+    },
+    async handleApplicationProfiles() {
+      this.quads = await this.retrieveSHACLDefinition();
+      
+      const unmappedSubjects = {} as any;
+      this.errorMessages = {} as any;
+      this.timeouts = {} as any;
+      for (let i = 0; i < this.quads.length; i++) {
+        if (this.quads[i].predicate.value === 'http://www.w3.org/ns/shacl#order') {
+          unmappedSubjects[this.quads[i].object.value] = this.quads.filter((entry) => 
+            entry.subject.value === this.quads[i].subject.value);
+          this.errorMessages[this.quads[i].subject.value] = '';
+          this.timeouts[this.quads[i].subject.value] = null;
         }
       }
+      
+      this.fixedValueIds = [];
+      this.sortedSHACLDefinition = [];
+      let keys = Object.keys(unmappedSubjects).sort((a, b) => parseInt(a) - parseInt(b));
+      for (let i = 0; i < keys.length; i++) {
+        this.fixedValueIds.push(unmappedSubjects[keys[i]][0].subject.value);
+        this.sortedSHACLDefinition.push(unmappedSubjects[keys[i]]);
       }
+
+      await this.validatorFunction();
     },
   },
 });

src/components/InputBooleanCombobox.vue

@@ -15,13 +15,25 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import VueI18n from 'vue-i18n';
 
 import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
+import FieldReader from '@/util/FieldReader';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages: (window.coscine && coscine.i18n) ? coscine.i18n['form-generator'] : {},
+  silentFallbackWarn: true,
+});
 
 export default Vue.extend({
+  i18n,
   name: 'InputBooleanCombobox',
   beforeMount() {
+    i18n.locale = this.languageCode;
     // set the datatype
     this.$set(this.formData[this.nodeName][0], 'type', 'literal');
     this.$set(
@@ -54,11 +66,13 @@ export default Vue.extend({
   },
   methods: {    
     input() {
-      if (this.selectedOption !== null) {
-        this.$set(this.formData[this.nodeName][0], 'value', (this.selectedOption as any).value);        
-      } else {
-        this.$set(this.formData[this.nodeName][0], 'value', '');
-      }
+      FieldReader.setField(
+        this.formData,
+        this.v,
+        this.nodeName,
+        this.selectedOption !== null ? (this.selectedOption as any).value : '',
+        this.$set
+      );
       this.updateFixedValues();
     },
     loadData() {
@@ -81,9 +95,8 @@ export default Vue.extend({
     locked: Boolean,
     required: Boolean,
     nodeName: String,
-    formFieldInformation: Object,
+    formFieldInformation: Array,
     formData: Object,
-    fixedValues: Object,
     fixedValueMode: Boolean,
     disabledMode: Boolean,
     checkField: Function,
@@ -91,6 +104,7 @@ export default Vue.extend({
     resourceId: String,
     projectId: String,
     languageCode: String,
+    v: Object,
   },
   components: {
     Multiselect,

src/components/InputCombobox.vue

@@ -23,12 +23,13 @@ import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
 
 import { MetadataApi } from '@coscine/api-connection';
+import FieldReader from '@/util/FieldReader';
 
 Vue.use(VueI18n);
 
 const i18n = new VueI18n({
   locale: 'en',
-  messages: coscine.i18n['form-generator'],
+  messages: (window.coscine && coscine.i18n) ? coscine.i18n['form-generator'] : {},
   silentFallbackWarn: true,
 });
 
@@ -42,12 +43,19 @@ export default Vue.extend({
         this.formFieldInformation,
         'http://www.w3.org/ns/shacl#maxCount'
       ) &&
-      parseInt(this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0][
+      parseInt(FieldReader.getObject(this.formFieldInformation, 'http://www.w3.org/ns/shacl#maxCount')[
         'value'
       ]) === 1;
 
+    this.class = FieldReader.getObject(this.formFieldInformation, 'http://www.w3.org/ns/shacl#class').value;
+
     // set the datatype
     this.$set(this.formData[this.nodeName][0], 'type', 'uri');
+    this.$set(
+      this.formData[this.nodeName][0],
+      'datatype',
+      this.class
+    );
 
     if (this.fixedValueMode) {
       this.updateFixedValues();
@@ -56,7 +64,7 @@ export default Vue.extend({
   mounted() {
     MetadataApi.getClassInstances(
       this.projectId,
-      this.formFieldInformation['http://www.w3.org/ns/shacl#class'][0].value,
+      this.class,
       (response: any) => {
         if (
           Array.isArray(response.data[this.languageCode]) &&
@@ -81,6 +89,7 @@ export default Vue.extend({
   },
   data() {
     return {
+      class: '',
       noMaxMode: true,
       selectableOptions: [] as object[],
       selectedOptions: [] as object[],
@@ -90,19 +99,16 @@ export default Vue.extend({
   methods: {
     getMax() {
       if (!this.noMaxMode) {
-        return this.formFieldInformation[
-          'http://www.w3.org/ns/shacl#maxCount'
-        ] !== undefined &&
-          this.formFieldInformation[
+        const maxCountObject = FieldReader.getObject(this.formFieldInformation,
           'http://www.w3.org/ns/shacl#maxCount'
-          ][0] !== undefined &&
-          this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0][
+        );
+        return 
+          maxCountObject !== undefined &&
+          maxCountObject[
             'value'
           ] !== undefined
           ? parseInt(
-              this.formFieldInformation[
-                'http://www.w3.org/ns/shacl#maxCount'
-              ][0]['value']
+              maxCountObject['value']
             )
           : this.maxNumberOfSelectedObjects;
       }
@@ -112,12 +118,15 @@ export default Vue.extend({
       const array = [];
       if (Array.isArray(this.selectedOptions)) {
         for (const field of this.selectedOptions) {
-          array.push({ value: (field as any).value, type: 'uri' });
+          array.push({ value: (field as any).value, type: 'uri', datatype: this.class });
         }
       } else {
-        array.push({ value: (this.selectedOptions as any).value, type: 'uri' });
+        array.push({ value: (this.selectedOptions as any).value, type: 'uri', datatype: this.class });
       }
       this.$set(this.formData, this.nodeName, array);
+      if (this.v.formData[this.nodeName]) {
+        this.v.formData[this.nodeName].$touch();
+      }
       this.updateFixedValues();
     },
     loadData() {
@@ -140,9 +149,8 @@ export default Vue.extend({
     locked: Boolean,
     required: Boolean,
     nodeName: String,
-    formFieldInformation: Object,
+    formFieldInformation: Array,
     formData: Object,
-    fixedValues: Object,
     fixedValueMode: Boolean,
     disabledMode: Boolean,
     checkField: Function,
@@ -150,6 +158,7 @@ export default Vue.extend({
     resourceId: String,
     projectId: String,
     languageCode: String,
+    v: Object,
   },
   components: {
     Multiselect,

src/components/InputDatePicker.vue

@@ -21,6 +21,8 @@ import Vue from 'vue';
 import Datepicker from 'vuejs-datepicker';
 import { de, en } from 'vuejs-datepicker/dist/locale';
 
+import FieldReader from '@/util/FieldReader';
+
 export default Vue.extend({
   name: 'InputDatePicker',
   beforeMount() {
@@ -54,21 +56,21 @@ export default Vue.extend({
     locked: Boolean,
     required: Boolean,
     nodeName: String,
-    formFieldInformation: Object,
+    formFieldInformation: Array,
     formData: Object,
-    fixedValues: Object,
     fixedValueMode: Boolean,
     disabledMode: Boolean,
+    checkDataField: Function,
     checkField: Function,
     updateFixedValues: Function,
+    v: Object,
   },
   components: {
     Datepicker,
   },
   methods: {
     replacePlaceholder() {
-      if (this.checkField(this.formData, this.nodeName)) {
-        let adjustDate = 0;
+      if (this.checkDataField(this.formData, this.nodeName)) {
         if (this.formData[this.nodeName][0]['value'] === '{TODAY}') {
           if (this.fixedValueMode) {
             return;
@@ -77,29 +79,26 @@ export default Vue.extend({
         } else if (this.formData[this.nodeName][0]['value'] === '') {
           this.selectedDate = new Date();
         } else {
-          adjustDate = 1;
           this.selectedDate = new Date(
-            this.formData[this.nodeName][0]['value']
+            this.formData[this.nodeName][0]['value'] + " UTC"
           );
         }
+        
         this.$set(
           this.formData[this.nodeName][0],
           'value',
-          `${this.selectedDate.getUTCFullYear()}-${
-            this.selectedDate.getUTCMonth() + 1
-          }-${this.selectedDate.getUTCDate() + adjustDate}`
+          this.selectedDate.toISOString().slice(0, 10)
         );
       }
     },
     updateFixedValuesOverwrite() {
-      this.$set(
-        this.formData[this.nodeName][0],
-        'value',
-        `${this.selectedDate.getUTCFullYear()}-${
-          this.selectedDate.getUTCMonth() + 1
-        }-${this.selectedDate.getUTCDate() + 1}`
+      FieldReader.setField(
+        this.formData,
+        this.v,
+        this.nodeName,
+        this.selectedDate.toISOString().slice(0, 10),
+        this.$set
       );
-
       this.updateFixedValues();
     },
   },

src/components/InputTextArea.vue

 <template>
   <b-form-textarea
     :id="cssId"
-    v-model="formData[nodeName][0]['value']"
-    @input="updateFixedValues"
+    v-model="textValue"
+    @input="input"
     :disabled="disabledMode || locked"
     :required="required"
+    :state="v.formData[nodeName] && v.formData[nodeName].$each[0]['value'].$dirty ? !v.formData[nodeName].$each[0]['value'].$error : null"
   ></b-form-textarea>
 </template>
 
@@ -12,6 +13,7 @@
 import Vue from 'vue';
 
 import { UserApi } from '@coscine/api-connection';
+import FieldReader from '@/util/FieldReader';
 
 export default Vue.extend({
   name: 'InputTextArea',
@@ -21,29 +23,56 @@ export default Vue.extend({
 
     // set the datatype
     this.$set(this.formData[this.nodeName][0], 'type', 'literal');
+    this.$set(
+      this.formData[this.nodeName][0],
+      'datatype',
+      'http://www.w3.org/2001/XMLSchema#string'
+    );
 
     if (this.fixedValueMode) {
       this.updateFixedValues();
     }
   },
+  mounted() {
+    this.loadData();
+  },
+  data() {
+    return {
+      textValue: '',
+    };
+  },
   props: {
     cssId: String,
     invisible: Boolean,
     locked: Boolean,
     required: Boolean,
     nodeName: String,
-    formFieldInformation: Object,
+    formFieldInformation: Array,
     formData: Object,
-    fixedValues: Object,
     fixedValueMode: Boolean,
     disabledMode: Boolean,
+    checkDataField: Function,
     checkField: Function,
     updateFixedValues: Function,
+    v: Object,
   },
   methods: {
+    input() {
+      FieldReader.setField(
+        this.formData,
+        this.v,
+        this.nodeName,
+        this.textValue,
+        this.$set
+      );
+      this.updateFixedValues();
+    },
+    loadData() {
+      this.textValue = this.formData[this.nodeName][0]['value'];
+    },
     replacePlaceholder() {
       if (!this.fixedValueMode) {
-        if (this.checkField(this.formData, this.nodeName)) {
+        if (this.checkDataField(this.formData, this.nodeName)) {
           if (this.formData[this.nodeName][0]['value'] === '{ME}') {
             UserApi.getUser((response: any) => {
               this.$set(
@@ -51,6 +80,7 @@ export default Vue.extend({
                 'value',
                 response.data.displayName
               );
+              this.textValue = this.formData[this.nodeName][0]['value'];
               this.$forceUpdate();
             });
           }

src/components/InputTextField.vue

 <template>
   <b-form-input
     :id="cssId"
-    v-model="formData[nodeName][0]['value']"
-    @input="updateFixedValues"
+    v-model="textValue"
+    @input="input"
     :disabled="disabledMode || locked"
     :required="required"
+    :state="v.formData[nodeName] && v.formData[nodeName].$each[0]['value'].$dirty ? !v.formData[nodeName].$each[0]['value'].$error : null"
   />
 </template>
 
@@ -12,6 +13,7 @@
 import Vue from 'vue';
 
 import { UserApi } from '@coscine/api-connection';
+import FieldReader from '@/util/FieldReader';
 
 export default Vue.extend({
   name: 'InputTextField',
@@ -21,29 +23,56 @@ export default Vue.extend({
 
     // set the datatype
     this.$set(this.formData[this.nodeName][0], 'type', 'literal');
+    this.$set(
+      this.formData[this.nodeName][0],
+      'datatype',
+      'http://www.w3.org/2001/XMLSchema#string'
+    );
 
     if (this.fixedValueMode) {
       this.updateFixedValues();
     }
   },
+  mounted() {
+    this.loadData();
+  },
+  data() {
+    return {
+      textValue: '',
+    };
+  },
   props: {
     cssId: String,
     invisible: Boolean,
     locked: Boolean,
     required: Boolean,
     nodeName: String,
-    formFieldInformation: Object,
+    formFieldInformation: Array,
     formData: Object,
-    fixedValues: Object,
     fixedValueMode: Boolean,
     disabledMode: Boolean,
+    checkDataField: Function,
     checkField: Function,
     updateFixedValues: Function,
+    v: Object,
   },
   methods: {
+    input() {
+      FieldReader.setField(
+        this.formData,
+        this.v,
+        this.nodeName,
+        this.textValue,
+        this.$set
+      );
+      this.updateFixedValues();
+    },
+    loadData() {
+      this.textValue = this.formData[this.nodeName][0]['value'];
+    },
     replacePlaceholder() {
       if (!this.fixedValueMode) {
-        if (this.checkField(this.formData, this.nodeName)) {
+        if (this.checkDataField(this.formData, this.nodeName)) {
           if (this.formData[this.nodeName][0]['value'] === '{ME}') {
             UserApi.getUser((response: any) => {
               this.$set(
@@ -51,6 +80,7 @@ export default Vue.extend({
                 'value',
                 response.data.displayName
               );
+              this.textValue = this.formData[this.nodeName][0]['value'];
               this.$forceUpdate();
             });
           }

src/components/WrapperInput.vue

 <template>
-  <div :class="componentDefinition" v-if="componentDefinition !== null">
+  <div :class="componentDefinition" v-if="componentDefinition !== null" :style="cssProps">
     <b-form-group
       v-bind:class="{
         mandatory: valueRequired,
-        invisible:
-          !fixedValueMode &&
-          checkField(
-            this.formFieldInformation,
-            'https://purl.org/coscine/invisible'
-          ) &&
-          this.formFieldInformation['https://purl.org/coscine/invisible'][0][
-            'value'
-          ] === '1',
+        invisible: !fixedValueMode && invisible,
       }"
       :label-for="cssid"
       label-cols-sm="3"
@@ -36,17 +28,14 @@
           :fixedValues="fixedValues"
           :disabledMode="disabledMode"
           :languageCode="languageLocale"
+          :checkDataField="checkDataField"
           :checkField="checkField"
           :updateFixedValues="updateFixedValues"
+          :v="v"
         />
         <b-button-group v-if="fixedValueMode" class="wrapper-input-button">
           <b-button
-            :disabled="
-              disabledMode ||
-              !formDataExists() ||
-              (formDataExists() && formData[nodeName][0]['value'] === '') ||
-              (this.valueRequired && this.invisible)
-            "
+            :disabled="fixedValueDisabled()"
             class="lockButton"
             variant="outline-secondary"
             @click.prevent="changeLockable()"
@@ -66,6 +55,11 @@
           </b-button>
         </b-button-group>
       </b-button-toolbar>
+      <b-form-invalid-feedback :state="v.formData[nodeName] && v.formData[nodeName].$dirty ? !v.formData[nodeName].$error : null">
+        <div v-for="(message, index) in errorMessages[nodeName]" :key="index">
+          {{ message.value }}
+        </div>
+      </b-form-invalid-feedback>
     </b-form-group>
   </div>
 </template>
@@ -91,7 +85,7 @@ Vue.use(VueI18n);
 
 const i18n = new VueI18n({
   locale: 'en',
-  messages: coscine.i18n['form-generator'],
+  messages: (window.coscine && coscine.i18n) ? coscine.i18n['form-generator'] : {},
   silentFallbackWarn: true,
 });
 
@@ -125,11 +119,11 @@ export default Vue.extend({
     if (
       this.checkField(this.formFieldInformation, 'http://www.w3.org/ns/shacl#datatype')
     ) {
-      let currentDatatype = this.formFieldInformation['http://www.w3.org/ns/shacl#datatype'][0];
-      if (currentDatatype['value'] == 'http://www.w3.org/2001/XMLSchema#date') {
+      let currentDatatype = FieldReader.getObject(this.formFieldInformation, 'http://www.w3.org/ns/shacl#datatype');
+      if (currentDatatype['value'] === 'http://www.w3.org/2001/XMLSchema#date') {
         this.type = 'literal';
         this.datatype = 'http://www.w3.org/2001/XMLSchema#date';
-      } else if (currentDatatype['value'] == 'http://www.w3.org/2001/XMLSchema#boolean') {
+      } else if (currentDatatype['value'] === 'http://www.w3.org/2001/XMLSchema#boolean') {
         this.type = 'literal';
         this.datatype = 'http://www.w3.org/2001/XMLSchema#boolean';
       } else {
@@ -152,24 +146,24 @@ export default Vue.extend({
     ) {
       this.$set(this.formData, this.nodeName, [
         {
-          value: this.formFieldInformation[
+          value: FieldReader.getObject(this.formFieldInformation,
             'https://purl.org/coscine/fixedValue'
-          ][0].value,
+          ).value,
         },
       ]);
       this.locked = true;
     }
     // if a fixed values was given directly take that
     if (
-      this.checkField(
-        this.fixedValues[this.formFieldInformation['idForFixedValues']],
+      this.checkDataField(
+        this.fixedValues[this.idForFixedValues],
         'https://purl.org/coscine/fixedValue'
       )
     ) {
       this.$set(this.formData, this.nodeName, [
         {
           value: this.fixedValues[
-            this.formFieldInformation['idForFixedValues']
+            this.idForFixedValues
           ]['https://purl.org/coscine/fixedValue'][0].value,
         },
       ]);
@@ -178,22 +172,22 @@ export default Vue.extend({
 
     if (
       this.checkField(
-        this.formFieldInformation['idForFixedValues'],
+        this.formFieldInformation,
         'https://purl.org/coscine/invisible'
       )
     ) {
       this.invisible =
-        this.formFieldInformation['https://purl.org/coscine/invisible'][0]
+        FieldReader.getObject(this.formFieldInformation, 'https://purl.org/coscine/invisible')
           .value === '1';
     }
     if (
-      this.checkField(
-        this.fixedValues[this.formFieldInformation['idForFixedValues']],
+      this.checkDataField(
+        this.fixedValues[this.idForFixedValues],
         'https://purl.org/coscine/invisible'
       )
     ) {
       this.invisible =
-        this.fixedValues[this.formFieldInformation['idForFixedValues']][
+        this.fixedValues[this.idForFixedValues][
           'https://purl.org/coscine/invisible'
         ][0].value === '1';
     }
@@ -208,9 +202,9 @@ export default Vue.extend({
       ) {
         this.$set(this.formData, this.nodeName, [
           {
-            value: this.formFieldInformation[
+            value: FieldReader.getObject(this.formFieldInformation,
               'http://www.w3.org/ns/shacl#defaultValue'
-            ][0].value,
+            ).value,
           },
         ]);
       }
@@ -223,23 +217,23 @@ export default Vue.extend({
       ) {
         this.$set(this.formData, this.nodeName, [
           {
-            value: this.formFieldInformation[
+            value: FieldReader.getObject(this.formFieldInformation,
               'https://purl.org/coscine/defaultValue'
-            ][0].value,
+            ).value
           },
         ]);
       }
       // take the default value from the provided values
       if (
-        this.checkField(
-          this.fixedValues[this.formFieldInformation['idForFixedValues']],
+        this.checkDataField(
+          this.fixedValues[this.idForFixedValues],
           'https://purl.org/coscine/defaultValue'
         )
       ) {
         this.$set(this.formData, this.nodeName, [
           {
             value: this.fixedValues[
-              this.formFieldInformation['idForFixedValues']
+              this.idForFixedValues
             ]['https://purl.org/coscine/defaultValue'][0].value,
           },
         ]);
@@ -255,10 +249,18 @@ export default Vue.extend({
         this.formFieldInformation,
         'http://www.w3.org/ns/shacl#minCount'
       ) &&
-      this.formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0][
+      FieldReader.getObject(this.formFieldInformation, 'http://www.w3.org/ns/shacl#minCount')[
         'value'
       ] >= 1;
   },
+  computed: {
+    cssProps() : any {
+      return {
+        '--wrapperInputWidth': (this.fixedValueMode) ? 'calc(100% - 121px - 1rem)' : '100%',
+        '--wrapperInputRightMargin': (this.fixedValueMode) ? '1rem' : '0rem',
+      };
+    },
+  },
   data() {
     return {
       type: 'literal',
@@ -272,7 +274,7 @@ export default Vue.extend({
     };
   },
   props: {
-    formFieldInformation: Object,
+    formFieldInformation: Array,
     formData: Object,
     resourceId: String,
     fixedValues: Object,
@@ -281,6 +283,9 @@ export default Vue.extend({
     disabledMode: Boolean,
     componentDefinition: String,
     languageLocale: String,
+    idForFixedValues: String,
+    errorMessages: Object,
+    v: Object,
   },
   methods: {
     changeLockable() {
@@ -295,6 +300,9 @@ export default Vue.extend({
       }
       this.setFixedValues();
     },
+    checkDataField(data: any, nodename: string, property: string = 'value') {
+      return FieldReader.isDataValueAssignedToKey(data, nodename, property);
+    },
     checkField(data: any, nodename: string, property: string = 'value') {
       return FieldReader.isValueAssignedToKey(data, nodename, property);
     },
@@ -307,14 +315,20 @@ export default Vue.extend({
         !this.valueRequired
       );
     },
+    fixedValueDisabled() {
+      return this.disabledMode ||
+              !this.formDataExists() ||
+              (this.formDataExists() && this.formData[this.nodeName][0]['value'] === '') ||
+              (this.valueRequired && this.invisible)
+    },
     formDataExists() {
-      return this.checkField(this.formData, this.nodeName);
+      return this.checkDataField(this.formData, this.nodeName);
     },
     removeEmptyEntry(){
-      if ((this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'][0]['value'] === '') ||
-        this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/defaultValue'][0]['value'] === '') {
-        this.$delete(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue');
-        this.$delete(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue');
+      if ((this.checkDataField(this.fixedValues[this.idForFixedValues],'https://purl.org/coscine/fixedValue') && this.fixedValues[this.idForFixedValues]['https://purl.org/coscine/fixedValue'][0]['value'] === '') ||
+        this.checkDataField(this.fixedValues[this.idForFixedValues],'https://purl.org/coscine/defaultValue') && this.fixedValues[this.idForFixedValues]['https://purl.org/coscine/defaultValue'][0]['value'] === '') {
+        this.$delete(this.fixedValues[this.idForFixedValues],'https://purl.org/coscine/defaultValue');
+        this.$delete(this.fixedValues[this.idForFixedValues],'https://purl.org/coscine/fixedValue');
         this.locked = false;
       }
     },
@@ -322,7 +336,7 @@ export default Vue.extend({
       if (this.locked) {
         this.$set(
           this.fixedValues,
-          this.formFieldInformation['idForFixedValues'],
+          this.idForFixedValues,
           {
             'https://purl.org/coscine/invisible': [
               { value: this.invisible ? '1' : '0', type: 'literal' },
@@ -339,7 +353,7 @@ export default Vue.extend({
       } else {
         this.$set(
           this.fixedValues,
-          this.formFieldInformation['idForFixedValues'],
+          this.idForFixedValues,
           {
             'https://purl.org/coscine/invisible': [
               { value: this.invisible ? '1' : '0', type: 'literal' },
@@ -359,9 +373,9 @@ export default Vue.extend({
     updateFixedValues() {
       if (this.fixedValueMode) {
         if (
-          this.fixedValues[this.formFieldInformation['idForFixedValues']] !==
+          this.fixedValues[this.idForFixedValues] !==
             undefined &&
-          this.fixedValues[this.formFieldInformation['idForFixedValues']][
+          this.fixedValues[this.idForFixedValues][
             'https://purl.org/coscine/fixedValue'
           ] !== undefined
         ) {
@@ -378,8 +392,8 @@ export default Vue.extend({
 
 <style>
 .wrapper-input {
-  width: calc(100% - 121px - 1rem);
-  margin-right: 1rem;
+  width: var(--wrapperInputWidth);
+  margin-right: var(--wrapperInputRightMargin);
 }
 .wrapper-input-button {
   width: 21px;

src/coscine.d.ts

@@ -11,3 +11,7 @@ declare var coscine: {
 };
 
 declare var _spPageContextInfo: any;
+
+interface FormFieldInformation extends Array<any>{
+    idForFixedValues: any;
+}
\ No newline at end of file

src/shims-vue.d.ts

@@ -2,3 +2,7 @@ declare module '*.vue' {
   import Vue from 'vue';
   export default Vue;
 }
+
+declare module 'rdf-validate-shacl';
+declare module 'rdf-ext';
+declare module 'rdf-parse';
\ No newline at end of file

src/util/FieldReader.ts

 export default {
   getNodeName(data: any, defaultValue: string = '') {
     if (this.isValueAssignedToKey(data, 'http://www.w3.org/ns/shacl#path')) {
-      return data['http://www.w3.org/ns/shacl#path'][0].value;
+      return this.getObject(data, 'http://www.w3.org/ns/shacl#path').value;
     }
     return defaultValue;
   },
@@ -10,17 +10,17 @@ export default {
     selectedLanguage: any,
     defaultValue: string = ''
   ) {
-    if (data['http://www.w3.org/ns/shacl#name'] === undefined) {
+    if (!this.isValueAssignedToKey(data, 'http://www.w3.org/ns/shacl#name')) {
       return defaultValue;
     }
-    for (const localizedName of data['http://www.w3.org/ns/shacl#name']) {
-      if (localizedName.lang === selectedLanguage) {
-        return localizedName.value;
+    for (const localizedName of this.getTriples(data, 'http://www.w3.org/ns/shacl#name')) {
+      if (localizedName.object.language === selectedLanguage) {
+        return localizedName.object.value;
       }
     }
     return defaultValue;
   },
-  isValueAssignedToKey(
+  isDataValueAssignedToKey(
     data: any,
     nodename: string | null | undefined,
     property: string | null = 'value'
@@ -39,4 +39,63 @@ export default {
     }
     return true;
   },
+  isValueAssignedToKey(
+    data: any,
+    nodename: string | null | undefined,
+    property: string = 'value'
+  ) {
+    if (
+      data === null ||
+      data === undefined ||
+      nodename === null ||
+      nodename === undefined ||
+      !data.some((entry: any) => entry.predicate[property] === nodename)
+    ) {
+      return false;
+    }
+    return true;
+  },
+  getObject(
+    data: any,
+    nodename: string | null | undefined
+  ) {
+    if (
+      data === null ||
+      data === undefined ||
+      nodename === null ||
+      nodename === undefined) {
+      return null;
+    }
+    return data.find((entry: any) => entry.predicate.value === nodename).object;
+  },
+  getTriples(
+    data: any,
+    nodename: string | null | undefined
+  ) {
+    if (
+      data === null ||
+      data === undefined ||
+      nodename === null ||
+      nodename === undefined) {
+      return null;
+    }
+    return data.filter((entry: any) => entry.predicate.value === nodename);
+  },
+  setField(
+    formData: any,
+    v: any,
+    nodeName: string,
+    value: any,
+    setFunction: any
+  ) {
+    if (v.formData[nodeName]) {
+      v.formData[nodeName].$each[0]['value'].$model = value;
+    } else {
+      setFunction(
+        formData[nodeName][0],
+        'value',
+        value
+      );
+    }
+  },
 };