How would I add different html tags such as <p> to my jsonforms

General
1

Hey all,

Let’s say I want to add a

tag to my json form that gives the user some instructions for a section of my forms. As of now I have two possible solutions: 1. I create two jsonforms with the

tag in the middle, however I would like to keep all my data together in one form if possible. 2. I could create a custom renderer, which is simply just a

with my desired directions. Is this the correct approach? Seems like it could get quite bulky if I need to add a

, I’d also need to create a custom renderer as well? And finally, If I wanted to store my directions in my uiSchema, how would I access them?

{

  "type" : "Control",
  "scope" : "#/properties/form/properties/coordinatesDescription",
  "data" : "Note: Project coordinates are system generated based on centroid point of facility poly"

}

I’ve tried to use the JsonFormsAngular service in my constructor, but I was unable to access the directions. If this is unclear please let me know and I can clarify. thank you!

2

Hi @Jayrack813, this is a use case which is implemented often, for example to render some Markdown formatted text at some place in the form.

You can add a custom new element to your UI Schema, e.g.

{
  "type": "Text",
  "text": "foobar"
}

or add an option to the already existing Label element, e.g.

{
  "type": "Label",
  "text": "My information",
  "options": {
    "additionalText": "foobar"
  }
}

Then you register a custom renderer for this new type of element and render the text in the way you want. For an implementation start you can just copy the already existing label.renderer and modify it to your needs.