vue-form-json-schema icon indicating copy to clipboard operation
vue-form-json-schema copied to clipboard

Schema Ref and Font Awesome Component Help in UI Schema

Open ikkysleepy opened this issue 3 years ago • 0 comments

I can't figure out how to do two things: (1) Add a reference to the properties value from the UI schema and (2) add Font Awesome Component. Here is my JSON

{
  "schema":{
     "type":"object",
     "required":[
        "project_name"
     ],
     "properties":{
        "project_name":{
           "type":"string",
           "title":"Project Name",
           "description":"The name of the building or project"
        }
      }
  },
  "uiSchema": [
    {
      "component": "label",
      "fieldOptions": {
          "attrs": {
              "for": "project_name"
          },
          "class": [
              "font-weight-bold"
          ],
          "domProps": {
              "innerHTML": "Name"
          }
      }
  },
    {
        "component": "div",
        "fieldOptions": {
            "class": [
                "input-group", "mb-3"
            ]
        },
        "children": [
          {
            "component": "div",
            "fieldOptions": {
                "class": [
                    "input-group-prepend"
                ]
            },
            "children": [
            {
                "component": "span",
                "fieldOptions": {
                  "attrs": {
                    "data-toggle": "tooltip",
                    "data-placement": "right",
                    "title": "data.schema.properties.project_name.descritpion"
                   },
                    "class": [
                        "input-group-text"
                    ],
                    "domProps": {
                      "innerHTML": "i"

                  }
                }
            }
          ]
          },
          {
            "component": "input",
            "model": "name",
            "errorOptions": {
                "class": [
                    "is-invalid"
                ]
            },
            "fieldOptions": {
                "attrs": {
                    "id": "project_name"
                },
                "class": [
                    "form-control"
                ],
                "on": [
                    "input"
                ]
            }
        }
        ]
    },
    {
        "component": "transition",
        "fieldOptions": {
            "props": {
                "name": "fade"
            }
        },
        "children": [
            {
                "component": "div",
                "model": "project_name",
                "errorHandler": true,
                "displayOptions": {
                    "model": "project_name",
                    "schema": {
                        "not": {
                            "type": "string"
                        }
                    }
                },
                "fieldOptions": {
                    "class": [
                        "alert alert-danger"
                    ]
                },
                "children": [
                    {
                        "component": "div",
                        "fieldOptions": {
                            "domProps": {
                                "innerHTML": "This field is required"
                            }
                        }
                    }
                ]
            }
        ]
    }
 
     ]
}

here is how I am loading this file:

<script>
import VueFormJsonSchema from "vue-form-json-schema/dist/vue-form-json-schema.esm.js";
import project from "@/schema/project.json";

export default {
  name: "ProjectCreate",
  components: {
    "vue-form-json-schema": VueFormJsonSchema,
  },
  data() {
    return {
      model: {},
      state: {},
      valid: false,
      options: {
        castToSchemaType: true,
      },
      submitted: false,
      success: false,
      schema: project.schema,
      uiSchema: project.uiSchema,
      createAccountBtn: "Create Project",
      showLoading: false,
    };
  },
  methods: {
    onChangeState(value) {
      this.state = value;
    },
    onValidated(value) {
      this.valid = value;
    },
  },
};
</script>

I want the tooltip ui schema element to show the schema property value, so I don't have to retype it, but can't seem to see how to get the value.

The Font Awesome VUE syntax is as follows

<font-awesome-icon icon="info-circle" />

I want to replace my "i" with the font awesome vue component, but I don't know how to refer to a VUE component in the JSON. Any help is appreciated.

Thanks, -- Jorge

ikkysleepy avatar Mar 31 '21 18:03 ikkysleepy