How To Create A New Widget

These instructions will describe how to create a Text widget.

packages\viewscript-doc-generator\lib\snippets

Create file - text.js:

{
  "id": "handover",
  "type": "text",
  "attributes": {
    "heading": "Who was the patient handed over to?",
    "desc": "Please provide Emergency service and name of person.",
    "placeholder": "Service/name",
    "mandatory": false,
    "minCharacters": 10
  }
}

Add to index.js:

text: require('./text'),

packages/viewscript-schema/lib

Add the widget to schema.json:

"text": {
        "title": "A bread-and-butter box for collecting textual information from the user.",
        "properties": {
          "type": {"enum": ["text"]},
          "id": {"$ref": "#/definitions/id"},
          "showWhen": {"$ref": "#/definitions/showWhen"},
          "attributes": {
            "type": "object",
            "properties": {
              "heading": {"$ref": "#/definitions/attributes/heading"},
              "desc": {"$ref": "#/definitions/attributes/desc"},
              "enabled": {"$ref": "#/definitions/attributes/enabled"},
              "default": {"$ref": "#/definitions/attributes/defaultString"},
              "placeholder": {"$ref": "#/definitions/attributes/placeholder"},
              "mandatory": {"$ref": "#/definitions/attributes/mandatory"},
              "minCharacters": {"$ref": "#/definitions/attributes/minCharacters"},
              "maxCharacters": {"$ref": "#/definitions/attributes/maxCharacters"},
              "help": {"$ref": "#/definitions/attributes/help"}
            },
            "additionalProperties": false
          }
        },
        "required": ["id", "type"],
        "additionalProperties": false
      },

In this file, where ever you see '#/definitions/*', it refers to the object at the start of the file with the key 'definitions'. If you create a widget with new attributes or properties then you need to add them to this object with definitions described so you can refer to it.

packages\viewscript-to-template\lib\widgets

Create file - text.js:

module.exports = {
  showWhen: true,
  bindToDataModel: true,
  openingTag: true,
  closingTag: true
}

Add to index.js:

text: require('./text'),

packages\viewscript-to-vuetify\lib\builders

Create file - text.js:

const ComponentBuilder = require('./../utils/Component-builder')
const GetAttribute = require('./../utils/Get-attribute')

// default
// desc
// enabled
// heading
// help
// mandatory
// maxCharacters
// minCharacters
// placeholder

module.exports = function textConverter (widgetDefinition, options) {
  const getAttribute = GetAttribute(widgetDefinition)
  const builder = new ComponentBuilder(widgetDefinition)
  const textField = builder.addTag('v-text-field')
  textField.addAttribute('id', widgetDefinition.id)
  textField.bindToModel(widgetDefinition)
  textField.addAttribute('name', widgetDefinition.id)
  textField.addAttribute('label', getAttribute('heading'))
  textField.addAttribute('placeholder', getAttribute('placeholder'))
  textField.addAttribute('hint', getAttribute('desc'))
  return builder.compile()
}

Add to index.js:

text: { conversionFunction: require('./text') },

Other

The following show how to create some widgets using the steps described above:

• Button List
• Table