Questions and discussion about developing processes and programming in PHP, JavaScript, web services & REST API.

Moderator: amosbatto

Forum rules: Please search to see if a question has already asked before creating a new topic. Please don't post the same question in multiple forums.
#790738
Hi,

This is quite tricky I know but this is a requirement. I need to create dynaform dynamically based on the number of columns recieved in before dynaform trigger call where I call a rest endpoint to query a database and get the columns in a json. Then I need to create the dynaform consisting of these columns received in the response. Please help me understand how to do this.

Thanks,
#790751
There is no way to dynamically create a grid in a DynaForm. You can create a panel and dynamically create a table with input fields in its cells.

Another option is to create a grid with the maximum number of fields that you will need. Then, use JavaScript to hide the fields in the grid that you don't need. If you need to populate the grid with REST, you might want to look at the control.executeQuery() example with grids.

Attached is a process which shows how to set the number of fields in a grid and set their width with a trigger.
(28.49 KiB) Downloaded 121 times
The trigger code is:
Code: Select all
$aProperties = array(
	array("label" => "Client Name", "width" => "15%"), 
	array("label" => "Address",     "width" => "20%"),
	array("label" => "Telephone",   "width" => "15%")
);
@@fieldProperties = json_encode($aProperties);
The JavaScript code in the DynaForm is:
Code: Select all
var gridId = "varWidthGrid"; //set to grid's ID
var propsJson = $("#fieldProperties").getValue();

//uncomment to test:
//propsJson = '[{"label":"Client Name", "width":"15%"}, {"label":"Address", "width":"20%"},'+
//  '{"label":"Telephone", "width":"15%"}]'; 

if (propsJson) {
  var aProps = JSON.parse(propsJson);
  var aHeaders = $("#"+gridId).find("div.pmdynaform-grid-thead").children();
  var aRows = $("#"+gridId).find("div.pmdynaform-grid-row");
  var i = 0;
  
  for (; i < aProps.length; i++) {
    //set label for grid field
    $("#"+gridId).find("span.title-column").eq(i).html( aProps[i].label );
    
    //set width for grid field headers
    aHeaders.eq(i+1).css("width", aProps[i].width);
    
    //set width of grid fields in rows
    for (var ii = 0; ii < aRows.length; ii++) { 
      aRows.eq(ii).find("div.grid-cell-responsive").eq(i).css("width", aProps[i].width);
    }
  }
  
  //hide remaining grid fields (both headers and fields in rows)
  for (; i < aHeaders.length; i++) {
    aHeaders.eq(i+1).hide();
    for (ii = 0; ii < aRows.length; ii++) { 
      aRows.eq(ii).find("div.grid-cell-responsive").eq(i).hide();
    }
  }
  
  $("#"+gridId).onAddRow(function(aNewRow, oGrid, rowIndex) {
    //set width of grid fields in rows
    var aCells = $("#"+gridId).find("div.pmdynaform-grid-row").last().find("div.grid-cell-responsive");
    //console.debug(aCells);
    for (var i = 0; i < aProps.length; i++) { 
      aCells.eq(i).css("width", aProps[i].width);
    }
    
    //hide remaining grid fields in new rows:
    for (; i < aCells.length; i++) {
      aCells.eq(i).hide();
    }  
  });
}
Resta de valores con 2 textobox

Hola! Se replicó lo que estabas haciendo […]

Hello! If you did not find the mcrypt extension […]

Hello! You have a mistake in the url, the correct […]

objects variable in grid

Hello! It is very rare since I could not replicate[…]