[ADaughenbaugh]

Hello, I have two basic grids on a form my designer wants modified for the end users.

Grid 1 form requests two contacts/rows with pertinent information but currently requires the user to click "new" to add the second row. The users want the grid to default to two rows - is this possible?

Current:

Grid 1.png (3.54 KiB) Viewed 9198 times

Desired:

Grid 1-req.png (2.78 KiB) Viewed 9198 times

The second grid, they want the word "New" for the new row function changed to custom wording that would make more sense to the users.
Example:

Grid 2-req.png (4.53 KiB) Viewed 9198 times

Thanks in adavance,
Adam

[ronrich]

Hello Adam,

You can edit you Dynaforms HTML code manually by enabling the "Enable HTML" option, you will find some information about how to do this in this link.

This options allows you to customize your dynaform's design, just remember, after enabling this option all the changes in the dynaform won't take effect unless your turn this option off and restore the "original HTML", then you can enable the HTML code back again and apply all your changes, I will suggest to do all the customization once you are finish with the Dynaform's design.

I hope this helps

Good Luck!

[pereirablair]

HI Adam,

If you want to default the grid to just 2 rows.
1. populate this by a trigger and remove the add and delete link from the grid.
2.in java script, on dynaformload,read the grid and populate the grid with 2 rows.

examples are already available in the forum.Let me know if not cleared.

[ADaughenbaugh]

Thanks, pereirablair, I found http://wiki.processmaker.com/index.php/ ... Empty_Rows which clarified your explanation and resolved my first issue.


Ronald, I am familiar with editing the HTML, but the "New" (add grid row) is not available to edit within the HTML of the original Grid Dynaform or standard Dynaform in ProcessMaker 2.0.43. I can either turn it on or off. However, I wish to rename it.

[ADaughenbaugh]

I was told I could encode the addrow button in the grid via JavaScript and was provided a snipet of code.

Code: Select all

var dynaformOnload = function() {
    document.getElementById("form[gridname_here][addrow]").setAttribute("style","color:red");
    document.getElementById("form[gridname_here][addrow]").innerHTML = 'Click here to note additional rows';
    }

But it is giving me an error: document.getElementById(...) is null on both portions when I Preview the form.

[ADaughenbaugh]

User found an issue with this - the form works fine on the fixed grid length within ProcessMaker, but if a user selects web entry it doesn't trigger the begin trigger.

After some searching I found this:
http://forum.processmaker.com/viewtopic ... ry#p778957

According to the PM documentation, you can't fire a trigger in the initial task of Web Entry for PHP pages with Web Services. If triggers need to be fired, then use the Single HTML option. Or create a second task that is used to verify the data from the first task and fire the trigger in the second task.

I am not sure where/how to implement the following in the single HTML.

Code: Select all

@=SR_EmergencyContacts_grid = array(
	'1' => array('ECFirstName_textbox'=>'', 'EC_LastName'=>'', 'EC_HomePhone_textbox'=>'', 'ECMobilePhone_textbox'=>'', 'EC_Email_textbox'=>'', 'EC_Relationship_dropdown'=>''),
	'2' => array('ECFirstName_textbox'=>'', 'EC_LastName'=>'', 'EC_HomePhone_textbox'=>'', 'ECMobilePhone_textbox'=>'', 'EC_Email_textbox'=>'', 'EC_Relationship_dropdown'=>''),
);

http://wiki.processmaker.com/index.php/ ... _Web_Entry
Handling Grids section

I imagine this will also affect my second issue with the addrow button I am still spinning my wheels on.

[ronrich]

Hello Adam,

You can add the executetrigger()web service at the beginning of your php code for the Single html Web entry. You'll find more information here

I hope this helps

[pfsilva]

I was told I could encode the addrow button in the grid via JavaScript and was provided a snipet of code.

Code: Select all

var dynaformOnload = function() {
    document.getElementById("form[gridname_here][addrow]").setAttribute("style","color:red");
    document.getElementById("form[gridname_here][addrow]").innerHTML = 'Click here to note additional rows';
    }

But it is giving me an error: document.getElementById(...) is null on both portions when I Preview the form.

Hi ADaughenbaugh, the error means that an element with that ID can't be found, try using addLink instead, I've checked in ProcessMaker 2.0.45 and ProcessMaker 2.5.2, in both cases the ID is the same, so if you try the following code, you should be able to do what you want.

Code: Select all

var dynaformOnload = function() {
  var lnkAddRow = getField('gridName][addLink');
  lnkAddRow.style.color = 'red';
  lnkAddRow.text = 'To add a new row, click here';
}

If you take a look at the sample, I didn't use setAttribute, I used the style object instead, this is usually better because it won't overwrite other CSS properties that may be specified in the style attribute.

[ADaughenbaugh]

Hi ADaughenbaugh, the errors mean that an element with that ID can't be found, try using addLink instead, I've checked in ProcessMaker 2.0.45 and ProcessMaker 2.5.2, in both cases the ID is the same, so if you try the following code, you should be able to do what you want.

Code: Select all

var dynaformOnload = function() {
  var lnkAddRow = getField('gridName][addLink');
  lnkAddRow.style.color = 'red';
  lnkAddRow.text = 'To add a new row, click here';
}

If you take a look at the sample, I didn't use setAttribute, I used the style object instead, this is usually better because it won't overwrite other CSS properties that may be specified in the style attribute.

Thanks, pfsilva, I made your suggested changes and no longer get the error when I create a new form via PM. However it does not make changes on the form. If I preview it in designer I get a JavaScript error "lnkAddRow is null".

I thought it might be an issue if the grid was hidden until a Yes/No dropdown changed to a "Yes". Yet when I added the JavaScript field to the Conditions Editor and/or disabled the Show/Hide functionality it doesn't change the addLink on the form.

[pfsilva]

Hi ADaughenbaugh, the error tells us that the element couldn't be found, quick question though, on the second line of the sample I posted there's the text gridName, did you change this text to match the name of your grid?, if you've made this change and still have the problem, then try to right click over the "New" link over the grid and select the option "Inspect Element" (Most modern browsers have this option), a window should show up with the HTML code of the element, take a look at the ID attribute, it's the ID you need to use.

[ADaughenbaugh]

I did change the gridName to match my form.

Good call on the right click. I was, incorrectly, using the name of the grid dynaform (based on what I interpreted from the original jscript example I had) rather than the grid field name on the main form. AND it works on the Web Entry. *happy dance*

One down, one to go.

[pfsilva]

One down, one to go.

Great! I'm glad it worked.

Now to the other grid, it's my understanding you need to show two rows when the dynaform loads, there's a javascript function for grid objects called addGridRow, it allows you to add a new row directly via javascript, for more information and a sample follow this link:
http://wiki.processmaker.com/index.php/ ... dRow.28.29

You can add the code to your dynaformOnload function so it runs after the elements have been rendered.

[ADaughenbaugh]

One down, one to go.

Great! I'm glad it worked.

Now to the other grid, it's my understanding you need to show two rows when the dynaform loads, there's a javascript function for grid objects called addGridRow, it allows you to add a new row directly via javascript, for more information and a sample follow this link:
http://wiki.processmaker.com/index.php/ ... dRow.28.29

That is correct. They want it to default to two empty grid rows.

I did not think I had my formatting correct on the Number_Rows_Grid() function

Code: Select all

      
var dynaformOnload = function() {
// lnkAddRow code here

var newRowNo = Number_Rows_Grid("SR_EmergencyContacts_grid", "ECFirstName_textbox", "EC_LastName", "EC_Relationship_dropdown", "EC_PrimaryPhone") + 1;
  getObject("SR_EmergencyContacts_grid").addGridRow();
  getGridField("SR_EmergencyContacts_grid", newRowNo, "ECFirstName_textbox").value = "";
  getGridField("SR_EmergencyContacts_grid", newRowNo, "EC_LastName").value = "";
  getGridField("SR_EmergencyContacts_grid", newRowNo, "EC_Relationship_dropdown").value = "";
  getGridField("SR_EmergencyContacts_grid", newRowNo, "EC_PrimaryPhone").value = "";
  getGridField("SR_EmergencyContacts_grid", newRowNo, "EC_SecondaryPhone").value = "";
}  

Frustratingly, this works on Web Entry, but throws a "getGridField(...) is null" error in the preview and only shows one row (kept making changes trying to get preview to work). I suppose an added benefit, compared to the Add Row trigger I used prior, is it still allows for Add/Delete option.

You can add the code to your dynaformOnload function so it runs after the elements have been rendered.

Thanks, I found that out the hard way when I was asked to replicate the lnkAddRow to a second grid. It is taking a while to knock 12 years of dust off the old memory banks where I stored my programming languages.

[pfsilva]

... Thanks, I found that out the hard way when I was asked to replicate the lnkAddRow to a second grid. It is taking a while to knock 12 years of dust off the old memory banks where I stored my programming languages.

Don't worry, PM uses a lot of custom functions, so it can take a while to get used to them.

The function to add a new row is addGridRow and empty values will be set by default, so if both grids are in the same dynaform, you can add the code to the previously defined dynaformOnload function, so your code would look kinda like this:

Code: Select all

var dynaformOnload = function() {
  /*Code for the grid where the Next link will be changed*/
  var lnkAddRow = getField('gridWithNextLinkToBeChanged][addLink');
  lnkAddRow.style.color = 'red';
  lnkAddRow.text = 'To add a new row, click here';

  /*Code for the grid with two initial rows*/
  var grid = getObject('gridWhereTheRowWillBeAdded');
  grid.addGridRow();
}

Replace the name of the grids and test the code, it should be good to go.