Allow descriptions and placeholders on fields

[danielo515]

Hello

Surely having a human readable title for each field is a good thing, however there are times when it is not enough. Having a small text that describes the field or the form section is very useful and sometimes is mandatory.
Placeholders play an essential role too.

[schmunk42]

Related from JSON Schema: http://json-schema.org/draft-07/json-schema-validation.html#rfc.section.10.1

[danielo515]

Hello @schmunk42 , thanks for pointing it out.
Does that mean that you are open to implement it ??

[schmunk42]

I would also like to hear some other opinions ... but in general it looks useful.

I think I won't be able to do it, but PRs are generally welcome.

[eduo]

To be clear I understand: is the proposal to use the "examples" property (I imagine picking the first entry in the array)?

The other properties (title, description, default) are already in use.

[danielo515]

The other properties (title, description, default) are already in use.

@eduo how can I set a description ? I didn't saw anything on the documentation

[eduo]

"properties": {
	"campaignVendor": {
		"type": "string",
		"id": "/properties/campaignVendor",
		"title": "Vendor",
		"default": "763",
		"format": "text",
		"description": "INFO: Vendor para el que se hará la campaña."
	}

}

[danielo515]

Many thanks for the example.
How did you noticed that you can use it that way? There is not a single line of documentation about it

[eduo]

No, there isn't :)

It's in the spec so I tried it. I later saw that the JSON2Schema tool creates placeholder fields for it as well:

https://github.com/jdorn/json-editor/wiki/JSON2Schema

For the above it would show this:

You can see how it expands to the full schema and puts placeholders for several fields (title, description, etc.) as well as setting default values.

It doesn't do complex types, I think (checkboxes, multi-selects, dropdowns) but it works to get a basic template to expand manually.

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "additionalProperties": true,
    "title": "MyJSON",
    "definitions": {},
    "type": "object",
    "id": "https://niebert.github.io/json-editor",
    "defaultProperties": [
        "campaignVendor"
    ],
    "properties": {
        "campaignVendor": {
            "type": "string",
            "id": "/properties/campaignVendor",
            "title": "Title of 'root.campaignVendor' Type: 'string'",
            "default": "763",
            "format": "text",
            "description": "An explanation for 'root.campaignVendor' about the purpose of string instance with editor path 'root.campaignVendor'."
        }
    }
}

[eduo]

I was looking around at how to integrate placeholders and a non-schema option would be to replicate the "startval" parameter of the constructor loading the placeholders in the same way default values can be loaded today.

[danielo515]

Hello again @eduo,

Thank you very much for sharing your findings.
I'll try them tonight.
The tool you are using looks very promising too. I didn't heard about it neither, thanks for that too.
Now the only thing missing are placeholders and a easier way to style the form.

Regards.

[eduo]

Sadly, I can't tackle this as a PR at all right now, but I hacked an ugly way to add placeholders in my local copy until either somebody can do it better or I have the time. This is a 5-minute hack written from an iPhone since this was a hard requirement and the deadline was upon us:

At the end of the main postBuild, right after "this.onWatchedFieldChange()":

if(typeof this.input != 'undefined'){this.input.placeholder = getPlaceholder(this.input.name,this.jsoneditor.options.placeholders);}

This calls the getPlaceholder function, which I tacked at the end:

function getPlaceholder(thisName,placeholders){
	holders = [];thisName.replace(/\[(.+?)\]/g, function($0, $1) { holders.push($1) });
	thisHolder = holders[0];
	return placeholders[thisHolder];
}

What I do then is that I set-up the placeholder json in a similar way to the default value json, and then call it from the constructor:

let campaignRequestVal = {"campaignStartsOn": "Quotation","campaignEndDate": "2018-03-01"};

let campaignRequestPlaceholder = {"campaignVendor": "Vendor ID#","campaignEndDate": "YYYY-MM-DD"};

var editor = new JSONEditor(document.getElementById('ticketForm'),{"schema": inputSchema, "startval": campaignRequestVal, "placeholders": campaignRequestPlaceholder, "form_name_root": "campaignRequest"});

This gets the job done, but I don't think it'll hold up for advanced or complicated set-ups.

[pmk65]

I just extended the string editor type, and added placeholder support like this:

JSONEditor.defaults.editors.stringextended = JSONEditor.defaults.editors.string.extend({
    build: function () {
        this._super();
        if(!this.input) return;

        // Add placeholder support
        if (this.schema.options && this.schema.options.placeholder) {
            this.input.setAttribute('placeholder', this.schema.options.placeholder);
        }
    }
});

// Add editor resolver
JSONEditor.defaults.resolvers.unshift(function(schema) {
    if(schema.type === "string" && schema.format === undefined) {
        return "stringextended";
    }
});

[eduo]

I completely missed this. I'll try it out and comment.

How should newlines in placeholder for textareas be represented here so they show as newlines as well in the textarea placeholder?

[pmk65]

@eduo

I completely missed this. I'll try it out and comment.

I added the same functionality as I described above, in the datetime editor. You can see it in this example https://rawgit.com/json-editor/json-editor/master/docs/datetime.html

How should newlines in placeholder for textareas be represented here so they show as newlines as well in the textarea placeholder?

Without having to resort to JavaScript hacks, i think the only way is to add linefeeds to the text.
Like in this example: https://codepen.io/helloheesu/pen/MarzrW