Ace Type as Array

[jasondalycan]

I have not found a way to create an array of Ace fields. When doing the following the Ace editors show-up within each field, but they drag in a very odd way and appear buggy:

schema: { myArray: { type: "array", title: "Form Values", items: { type: "object", properties: { value: { type: "object", title: "Form Value", properties: { key: { type: "ace", title: "Key" }, value: { type: "ace", title: "Value" } } } } } } }

Is it possible to create an array of Ace types and if so can you please provide an example?

[sdetweil]

set draggable:false in the array form definition

[jasondalycan]

Thanks that resolves the dragging issue. The height parameter for the Ace editor doesn't seem to take effect in this case though. For example, using the following the height is ignored and falls back to the default:

myAceField: { title: "My Ace Field", type: "ace", aceMode: "javascript", height: "80px" }

[sdetweil]

well, 80px for a custom font, mukti-line text editor .....

maybe Ace has a minimum size did u try using css to style it?

see https://ourcodeworld.com/articles/read/1642/how-to-change-the-line-height-in-ace-editor

[jasondalycan]

The height: "80px" parameter works fine if added within the form section of the definition, it's just not recognized if added within the schema portion of the definition. Is this only supported within the form section?

[sdetweil]

yes config of the elements is done in the form section

[jasondalycan]

Ok thanks. In that case is there a way to set ace as the type for an object's property within the form section? I haven't noticed a way to do this within the documentation and was wondering if this is supported.

[sdetweil]

its not the object type.. that is string (input/output for editor) aceMode says what kind of syntax assist to use

i add

  type: "ace",
  aceMode: "json",
  aceTheme: "twilight",
  width: "100%",
  height: "100px"

its right there in playground https://jsonform.github.io/jsonform/playground/index.html?example=fields-ace and in the doc https://github.com/jsonform/jsonform/wiki#fields-ace

{
  "schema": {
    "code": {
      "type": "string",
      "title": "Some JSON"
    }
  },
  "form": [
    {
      "key": "code",
      "type": "ace",
      "aceMode": "json",
      "aceTheme": "twilight",
      "width": "100%",
      "height": "200px"
    }
  ]
}

here we have a single schema element, code, which is a string type , and its form field title set in the schema section, or could be set in the form section

remember 'key': connects the form element to the schema element

then we have to form section which contains one field, linked by 'key'.. then other attributes, to use in the form execution,,, exactly like adding draggable:false this says, instead of the 'string' editor (input field), use the ace type, which is the full editor, .. the output is presented in the schema field on submit

[jasondalycan]

Ok thanks. And sorry if I've missed this somewhere, but what I'm trying to understand though is how to set the property of a field of type object to the ace type. Please see the following example, I'm not clear on how to set the object field property setStatus.statusExpression to the ace field type within the form section:

schema: 
{   setStatus:
    {   type: "object",
        properties:
        {   menuTitle:
            {   title: "Menu Title",
                type: "string"
            },
            statusExpression:
            {   title: "Status Expression",
                        type: "string"
            }                            
        }
    }
},
form: 
[   {   title: "Actions",
        type: "array",
        items:
        [   {   type: "selectfieldset",
                title: "Action Type",
                items:
                [   {   key: "setStatus",
                        legend: "Set Status"
                    }
                ]
            }                                
        ]
    },
    {   type: "submit",
        title: "Save"
    }
]

[sdetweil]

given your example, (as json, needs to be json)

{"schema":{

"setStatus":
{
"type":"object",
    "properties":
        {"menuTitle":
            {
                "title":"MenuTitle",
                "type":"string"
            },
            "statusExpression":
            {
                "title":"StatusExpression",
                "type":"string"
            }
        }
    }
},
"form":
[
    {"title":"Actions",
            "type":"array",
            "items":
            [
                {
                "type":"selectfieldset",
                "title":"ActionType",
                "items":
                [
                    {
                    "key":"setStatus.statusExpression",
                    "title":"SetStatus1",
                    "type":"ace"
                    }
                ]
                }
            ]
    },
    {
"type":"submit",
        "title":"Save"
    }
]
}

using playground to test the form definition, copy/paste to the playground window

[jasondalycan]

That works: thanks! cheers