gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

ReadOnly after manual modification #636

Closed MrLeninstalock closed 6 years ago

MrLeninstalock commented 6 years ago

Hi everyone,

I'm using Alpaca forms to display some information :

$("#object_details").alpaca({
    "schema": map[obj_type],
    "data": JSON.stringify(json_data["content"]),
    "options": {
        "label": "some label"
    }
})

So I have some JSON Schema defined :

json_schema = {
        "title": "Host",
        "en_description": "Host object",
        "type": "object",
        "properties": {
            "addr": {
                "en_description": "IP addresses",
                "title":"Host addresses",
                "type": "object",
                "properties": {
                    "ipv4": {
                        "en_description": "Host IPv4 address",
                        "title":"IPv4 address",
                        "type": "string",
                        "format": "ipv4",
                        "readonly":True
                    },
                    "ipv6" : {
                        "type": "string"
                    }
           }
}

As you can see I got some field on ReadOnly, and some others on edit mode. I want to make a modified-field to become readonly. For example, here, if I modify the ipv6 field, once I send my forms, the ipv6 field will become readonly.

Is that possible ?

Thanks for your time, baptiste

WhileTrueEndWhile commented 6 years ago

To modify options at runtime see: https://github.com/gitana/alpaca/issues/563 Just replace .options.validate" with .options.readonly.

And please do not forget to escape your string properties with Handlebars.Utils.escapeExpression(...) ;-)

Good luck!

MrLeninstalock commented 6 years ago

Okay but this won't do the trick I wan't. I mean, this will only make the field ReadOnly for this instance. If I refresh the page, the field won't be readOnly anymore. To do this, I think I need to insert the readOnly properties in the dataset I load. In this way, if I load dataset1 and modify the ipv4 field, it will be readOnly forever. But if I load dataset2, the field ipv4 won't be readOnly. I hope my explications are clear enough ?

MrLeninstalock commented 6 years ago

SOLUTION : Use an Observable on each field, so that everytime the field is modified, you can add the field path to an array wich will represents your modified fields. Persist this array as part of your object for example. When displaying the form, use the postRender callback to retrieve the array, and put all modified fields on readOnly ! :)

Feel free to PM if you've got any questions :)