This topic is locked
[SOLVED]

build on-the-fly edit fields and store as key->value pairs in a single field

10/28/2024 11:09:40 AM
PHPRunner General questions
R
rmac author

In my project, I’m using the built-in checklist feature of doing a lookup for a single field which filters for the correct items and then saves the keys of the selected items as a CSV list in that field. This works great, saving me from making multiple custom forms and duplicating common fields on different pages.

What I’m looking for is a way to do the same thing where a single field would store key:value pairs. A common lookup table would have all possible options and each different case would filter for the fields it needs on the fly. I can see how a SELECT custom query would get the correct fields, but how would I integrate them into the EDIT page so values could be entered (basically in place of the checks in the checklist)? I hope I’m missing something obvious, but any input will be appreciated. Thanks.

img alt

img alt

C
Chris Whitehead 10/31/2024

I'd add a custom snippet on the edit/add page, this would retrieve the JSON key/value pairs from the field in the record. Then loop through then and echo out the bootstrap input box for each field. also add a prefix to the temp input name, then on save, loop through the temp fields adding to an array and unsetting the temp field as you populate the array, then json_encode the array and replace in the field name which you're storing the JSON key/value pairs in.

I hope this makes sense, it might be quicker for me to knock up the snippet to show you if it doesn't.

C
Chris Whitehead 11/1/2024

Hope this helps, it's a bit rough and could be made prettier and a bit shorter. this is just in any edit or add page, I've just used an array rather than dragging the fields from a table but I'm sure you'll be able to get the idea.

I'm adding in the four fields which need a little styling to line them up ( I did say it was rough).
img alt

Add a snippet in the designer which will build and echo out the fields.

// field which is stored in the record
$json_field = '{"test_field1":"some data","test_field2":"more data","test_field3":"other data","test_field4":"no idea data"}';

// decode the json data from the field
$test_fields = json_decode( $json_field , true );

// template which is used to add the input fields
$field_template = '<div class="r-integrated-field form-group clearfix r-vertical-field" data-signal-error-for="%s1" data-itemtype="integrated_edit_field" data-itemid="integrated_edit_field" data-pageid="1" data-field="%s" data-fieldname="%s">
<label class="r-edit-label control-label" for="value_%s_1">
%s
<span class="icon-required"></span>
</label>
<div class="r-edit-field">
<span id="edit1_%s_0" class="bs-ctrlspan "><input id="%s" class="form-control" type="text" name="value_%s_1" placeholder="" value="%s"></span> </div>
<div class="r-edit-tooltip" data-helpfor="%s" data-hidden="">
<div class="text-muted">
</div>
</div>
</div>';

// loop through the field and add an input for each one
foreach( $test_fields as $field_name => $field_value ) {
echo sprintf($field_template,$field_name,$field_name,$field_name,$field_name, $field_name,$field_name,$field_name,$field_name,$field_value,$field_name );
}

Then in javascript_onload_event.

// you could create a loop for this from the field names, this is so the values get passed in the POST.
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
var val = $("#test_field1").val();
formObj.baseParams['test_field1'] = val;
});
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
var val = $("#test_field2").val();
formObj.baseParams['test_field2'] = val;
});
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
var val = $("#test_field3").val();
formObj.baseParams['test_field3'] = val;
});
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
var val = $("#test_field4").val();
formObj.baseParams['test_field4'] = val;
});

Then finally in the before_record_saved event.

// fields which can be selected from the table then it will be dynamic
$test_fields = array(
'test_field1',
'test_field2',
'test_field3',
'test_field4',
);

// loop through the fields and populate the array
$tmp_array = array();
foreach( $test_fields as $field_name ) {
$tmp_array[$field_name] = $_POST[$field_name]; // .
}

// field in the record where the key/value are stored
$values['json_data'] = json_encode($tmp_array);
R
rmac author 12/6/2024

Chris;

Thanks for the input and the considerable work that you put into it! Sorry I didn't respond sooner, but didn't get a notice on the reply. I've been off on other issues, but will definitely give this a try. I hope maybe you or someone else could find a use case for it as well. Thanks again.

Ray

C
Chris Whitehead 12/7/2024

Rmac,

Don't worry, I also did it for me as well so I can do the same.