Custom form field attributes in form designer

SteveX
@ultrajam
11 years ago
2,584 posts

I'm working on a color picker custom form field and need a bit of advice.

I can pass in attributes when writing the color picker field into another module.

If I wanted admin to be able to configure the color picker's js options in the form designer on a field by field basis, I guess I'd need to pass those in using the options field in form designer.

I'm pretty sure that would work, but how would I get those config options into the options "see help for what is allowed here" help? Can I replace that help, or add to it, or should I try a bit of jquery to replace the help text after the form loads?

Or is there a better way of adding configurable attributes in the form designer?

Thanks

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 05/15/14 03:32:22AM

@michael
11 years ago
7,805 posts

ooh, haven't tried to do anything like this before, so don't take this for gospel....

I would expect the "see help for what is allowed here" to be the help from the module that provides that form field.

So if your building the custom form field type "color picker" to allow it to be added to forms, then I think you get to specify what options are allowed and what format you want them in.

So OPTIONS will end up in your function definition for displaying the field whenever the field is displayed.

Your module would then use whatever options are set to adjust the output of what it outputs, in this case a color picker.

SteveX
@ultrajam
11 years ago
2,584 posts

Thanks Michael.

The form designer help is the standard help for the options field, so it mentions the optionlist format, and that the chained select module accepts different options. I couldn't see any way to alter the help in form designer from the module, probably a bit of jquery will do the job - its admin only so no need for it to be language aware. I've got to do something with it though, otherwise it is the wrong help/instructions the admin will see when they click on the help button (like they do

).

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@michael
11 years ago
7,805 posts

Your wanting to change the text IN the Form Designer? Or your wanting to change the 'help' text on the field that the form designer creates?

if the second, whats the text that comes out now? (ill do a search for it, then a search for places to over-ride it.)

SteveX
@ultrajam
11 years ago
2,584 posts

Yes its the help text IN the Form Designer.

Quote:
• If this field is a select, select_multiple, radio or optionlist field, you can enter the form options ONE PER LINE, in the following format:

Option Value|Option Text

You may also enter a valid module FUNCTION name that will return the options dynamically.

• If this is a file field, you can enter the allowed file extensions as a comma separated list - i.e. "txt,pdf,doc,xls" - only files of these types will be allowed to be uploaded.

• If this is a chained_select field, the options are created using the Chained Select module - set this to the Option Set Name you have created in the module.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@michael
11 years ago
7,805 posts

got it.

There is a event fired on form field create:

$_field = jrCore_trigger_event('jrCore', 'form_field_create', $_field, $_args);

add a listener to your module that listens for that event.

check for the 'If this field is a' on the $_field['help'] and if you find it, replace it with what you want it to say.

SteveX
@ultrajam
11 years ago
2,584 posts

Thanks Michael, I don't think that will work though, it would change the help text for all form designer options fields. I guess I could add to the text for all form designer options fields though, so it might work that way.

I can't see anything in the log which would allow me to differentiate between my field and other form designer fields (the field type hasn't yet been set at the point where the help shows):

Quote: fdebug('ujFullSpectrum_form_field_create_listener',$_data, $_args, $event);

(2014-04-11T09:12:27+01:00 : 0.004)-(mem: 13631488)-(pid: 14665)-(ip: 127.0.0.1)-(uri: /audio/form_field_update/m=jrAudio/v=create/n=audio_color_test)
|ujFullSpectrum_form_field_create_listener|

(2014-04-11T09:12:27+01:00 : 0.004)-(mem: 13631488)-(pid: 14665)-(ip: 127.0.0.1)-(uri: /audio/form_field_update/m=jrAudio/v=create/n=audio_color_test)
Array
(
[name] => options
[label] => options
[sublabel] => see help for what is allowed here
[help] => • If this field is a select, select_multiple, radio or optionlist field, you can enter the form options ONE PER LINE, in the following format:Option Value|Option TextYou may also enter a valid module FUNCTION name that will return the options dynamically.• If this is a file field, you can enter the allowed file extensions as a comma separated list - i.e. "txt,pdf,doc,xls" - only files of these types will be allowed to be uploaded.• If this is a chained_select field, the options are created using the Chained Select module - set this to the Option Set Name you have created in the module.
[type] => textarea
[value] =>
[validate] => printable
[required] => 0
[module] => jrCore
)

(2014-04-11T09:12:27+01:00 : 0.004)-(mem: 13631488)-(pid: 14665)-(ip: 127.0.0.1)-(uri: /audio/form_field_update/m=jrAudio/v=create/n=audio_color_test)
Array
(
[module] => jrAudio
[form_name] => jrAudio_form_field_update
[designer] => 1
)

(2014-04-11T09:12:27+01:00 : 0.004)-(mem: 13631488)-(pid: 14665)-(ip: 127.0.0.1)-(uri: /audio/form_field_update/m=jrAudio/v=create/n=audio_color_test)
|form_field_create|

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@michael
11 years ago
7,805 posts

Ah, I see what your saying. You only want to display help text for "ujcustom_color_picker" on the OPTIONS box, when "ujcustom_color_picker" is selected in the TYPE box of the Form Designer.

If thats right, then your right, its not designed to work that way. But you might be able to force it to by adding in an onchange or onfocus event into the TYPE field. The if the TYPE is "ujcustom_color_picker" do some javascript stuff to change the help text.

not perfect, but might be possible.

SteveX
@ultrajam
11 years ago
2,584 posts

Thanks Michael, I think I'm going to take your first suggestion and just link to the module docs by appending a line to all form designer options help text (if the color picker is installed):

/**
 * Append to help text of form designer options field
 * @param $_data array Array of information from trigger
 * @param $_user array Current user
 * @param $_conf array Global Config
 * @param $_args array additional parameters passed in by trigger caller
 * @param $event string Triggered Event name
 * @return array
 */
function ujFullSpectrum_form_field_create_listener($_data, $_user, $_conf, $_args, $event)
{
    if (isset($_data['name']) && $_data['name'] == 'options' && isset($_data['sublabel']) && $_data['sublabel'] == 'see <strong>help</strong> for what is allowed here') {
        $_data['help'] = $_data['help'].'<br><br>&bull; If this is a <strong>spectrum</strong> color picker field, the options can be used to configure the color picker. See the module docs for details.';
    }
    return $_data;
}

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

SteveX
@ultrajam
11 years ago
2,584 posts

The help text is fine, but I've run into another problem - maybe attributes aren't the right way to go?

How do I get those attributes into the form_field_display function?

I have them defined in a form_field_spectrum_attributes function, but don't see them in my fdebug when passing that into the form_field_display function $_tmp array as either

'attributes' => array('myattribute1','myattribute2'),

or as

'myattribute1' => 'xxx',
'myattribute2' => 'yyy',

How do I get those attributes in there?

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 04/11/14 02:53:20AM

@brian
11 years ago
10,149 posts

For any additional attributes that you want to make available in your custom _display() function, you need to create a separate _attributes() function - all it needs to do is return an array of allowed attributes - i.e.

function jrCore_form_field_live_search_attributes(){
    return array('disabled', 'readonly', 'maxlength', 'onfocus', 'onblur', 'onselect', 'onkeypress', 'style');
}

So that's the attributes function for the "live_search" form field type. The array that it returns are going to be the additional attributes that are allowed to be passed into the the jrCore_form_field_create() function. So you would create that function, and return the array of attributes you want to support - then you would use them like your second example above.

Hope this helps!

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

SteveX
@ultrajam
11 years ago
2,584 posts

Thanks Brian.

Should that also work for a jrCore_register_setting function in config.php?

I already had an attributes function, but I'm not seeing any attributes in the fdebug.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@brian
11 years ago
10,149 posts

SteveX:
Thanks Brian.

Should that also work for a jrCore_register_setting function in config.php?

I already had an attributes function, but I'm not seeing any attributes in the fdebug.

No - that's not going to work as a core setting (since that is saved to a different table) - what attribute are you trying to save for a core setting?

Thanks!

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

SteveX
@ultrajam
11 years ago
2,584 posts

Yes, I see that now, it works fine as a field in a module item.

It's a javascript color picker where the js can have several options and events to configure the color picker.

I wanted to pass these options in as attributes to add data- attributes to the input.

The intention was to be able to pass them in in the options field in form designer and have it work for module items as well, but it is actually in a config setting that I wanted to use it.

The attributes:

Quote:
// flat: bool,
// showInput: bool,
// showInitial: bool,
// allowEmpty: bool,
// showAlpha: bool,
// disabled: bool,
// localStorageKey: string,
// showPalette: bool,
// showPaletteOnly: bool,
// showSelectionPalette: bool,
// clickoutFiresChange: bool,
// cancelText: string,
// chooseText: string,
// containerClassName: string,
// replacerClassName: string,
// preferredFormat: string,
// maxSelectionSize: int,
// palette: [[string] ] ,
// selectionPalette: [string]

The script: http://bgrins.github.io/spectrum/

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 04/11/14 08:15:40AM

@brian
11 years ago
10,149 posts

You can store that data in the "options" attribute (and set the default in the "default" attribute), and then if the user wants to change it they can modify it in the form designer by placing those attributes one per line in the "options" textarea.

However, in your _display() function you will get the options attribute there, and you need to explode on a newline, then go through each and make sure it is an allowed attribute, and substitute defaults where the value is not correct - i.e you will need to validate it in your function.

Let me know if that helps.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

SteveX
@ultrajam
11 years ago
2,584 posts

Ok, thanks Brian. I'll give that a try over the weekend.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Custom form field attributes in form designer

Tags