Ознакомьтесь сЧасть 1, если вы еще этого не сделали. В этом посте я расскажу об дескрипторе формы — Метаданные.

В первой части серии я упомянул использование oj-bind-for-eachи oj-bind-ifдля рендеринга динамического пользовательского интерфейса, и я также упомянул об использовании typeдля рендеринга входных данных на основе типа поля. Все поля и их типы являются частью дескриптора формы, также известного как Метаданные.

Метаданные

Это JSON, где вы описываете свою форму. Представьте, для создания поля ввода какая информация вам понадобится? type определенно всплывает. Другие могут быть обязательнымиили нет, или меткаможет быть, некоторые подсказки метки , вы хотите ограничить минимальное значение, если оно имеет числовой тип или максимальное значение<. /em> возможно? Или вам нужны мощные валидаторы, чтобы убедиться, что пользователь вводит правильный адрес электронной почты. Ну, что бы это ни было, оно должно идти в метаданные формы.

{
                  "Id": {
                    "readonly": true,
                    "type": "string",
                    "labelHint": "Id",
                    "helpHints": {
                      "definition": "Auto-generated when the SR is saved"
                    }
                  },
                  "BarCodeSKUEAN_c": {
                    "readonly": false,
                    "type": "string",
                    "labelHint": "Bar Code SKUEAN",
                    "required": true,
                    "validators": [
                      {
                        "type": "regExp",
                        "options": {
                          "pattern": "^[0-9]+$",
                          "messageDetail": "Please enter digits from 0 to 9"
                        }
                      }
                    ]
                  }
}

Давайте посмотрим, как будет отображаться поле Id. Это типstring, поэтому мы будем использовать oj-input-text. Идентификатор должен генерироваться автоматически для управления конфликтами и уникальностью. Для других свойств, таких как только для чтения, labelHintи helpHints мы прибегнем к методу setProperties, доступному для каждого компонента JET. Причина, по которой я решил использовать setProperties, проста — я не знаю, какие другие свойства может принимать поле ввода, и в будущем, если JET добавит новые свойства, я мог бы просто начать добавлять их в мои метаданные без необходимости изменения кода!

Входное значение

Я создал объект _value с каждым полем в качестве свойства, которое указывает на Observable. Значения, введенные пользователем, можно найти в одном месте, например _value.

var arr = Object.keys(metadata.properties);
for (var i = 0; i < arr.length; i++) {
      self._value[arr[i]] = ko.observable(val[arr[i]])
}

Я расскажу о динамической форме как веб-компоненте в Части 3. Спасибо за чтение 🙏