Buy Now
Sign in

Dynamic control using ChronoConnectivity

emmexx , December 11 2017
Answered
E
emmexx
I share this feature I found out by trying to manage a form built with Chronoforms in ChronoConnectivity.

I had created a rather complex form in CFv6 when Max suggested to use CCv6 to manage records (edits, saving, deleting).
The problem is that when a form is managed by CC all the form events become of no use since the calls use as url the CC one.

In the form I had added a dynamic checkbox control that was built using the recipe you can find in the FAQ. It uses the reload field property and a form event to add the select options needed by the control. That worked fine in the preview but when I tested it in the CC environment I got a blank control.

After some trial and error I found out that it is very easy to accomplish that task in CC. You add an event to your connection, let's call it reload_2ndfield.
In the Content property of that event you add a function {fn:2ndfield_by_1stfield} of type switch.

In the switch function you set the data provider as something like {data:1stfield}.
1stfield is a field whose value defines the values of the 2nd field.
The Values setup property is filled with a line for every value of 1stfield that you want to manage:

1stvalue:{view:2ndfield_1stvalue}
2ndvalue:{view:2ndfield_2ndvalue}

and so on.

After that you create a view of type Radios group for every value of 1st field and you name them 2ndfield_1stvalue, 2ndfield_2ndvalue and so on.
For the name and id of the view you use the name and id you used in CF (e.g. 2ndfield).
In the Options property of the view you put the values you want for that value of 1stfield:
apples=Apples
pears=Pears
oranges=Oranges

In the Selected value property you can put {data:2ndfield} This can be useful if you need to edit a record: the control will have a value selected based on the record value.

Important EDIT: In the Radios group views remember to add the name of the cc reload event in the Advanced - Reload event property.

The CC part is done.

If you need to edit your records in CF you add a javascript control to your section with the following code:
<?php
$1stfield = $this->get('read_event.event.1stfield');
$2ndfield = $this->get('read_event.event.2ndfield');
if(!empty($1stfield)):
?>
var event_target = jQ('input[name="2ndfield"]');
if(event_target.data('ghost')){
   if(event_target.closest('.multifield.fields').length > 0){
     var real_event_target = event_target.closest('.multifield.fields').find(':checkbox, :radio');
     target_element = event_target.closest('.multifield.fields');
     if(real_event_target.length > 0){
       event_target = real_event_target;
       event_target_one = real_event_target.first();
     }
   }else{
    
   }
}

jQ.ajax({
  url: event_target.data('reloadurl'),
  data: {tipo: "<?=$1stfield ?>", categoria: "<?=$2ndfield ?>"},
  success: function(result){
    var newContent = jQ(result);
    
    target_element.replaceWith(newContent);
    
    newContent.trigger('contentChange');
    //Form.trigger('contentChange');
  }
});
<?php endif; ?>

I adapted the code from the CFv6 js code.

Done!

bye
maxx
E
emmexx

I found out a problem in my setup when using SEF (in Joomla).

If SEF is enabled, CF6 or CC6 create an url for the reload that is not working.

data-reloadurl for the 2ndfield

Sef not enabled:

http://test.site.com/index.php/my/folder?cont=manager&conn=myform&event=reload_2ndfield&tvout=view...

Sef enabled:

http://test.site.com/compont/chronoconnectivity6?cont=manager&conn=myform&event=reload_2ndfield&tvout=view...​

In the last case a missing connection error is thrown because myform is not a connection but the name of the form.

I solved (but in my opinion this is a bug) by adjusting the value of data-reloadurl in javascript:

jQuery("input:radio[name='2ndfield']").data('reloadurl', '/my/folder?cont=manager&event=reload_2ndfield&tvout=view');

bye​
​ maxx