Can JavaScript be used to change text color for rows in a table when the Order Number changes? If you've done this successfully, could you share your code?
Or can Workflow be set to do it after hitting the submit button?
Hi Connie, can you share more about your process and what you're trying to do? It sounds like you want the color of the text to change whenever the number changes?
Just a quick note: you won't be able to save it with that color to the repository after it makes the changes on the form. The way that Forms works, you enter information that get stored as variables in a "variable pool" that's separate from the individual form submission. During the save to repository activity, Forms grabs the variables and plugs them into a brand new copy of the form - so anything that isn't stored specifically as a variable can't be saved to the repository, even if saving is the step right after submitting.
Hi Brian!
This is a report on a Shelterbelt application process. The report outlines all the applicants and their orders and will go to our Accounts Receivable clerk for invoicing. I cannot get the collection-table to populate from the lookup in a way that separates the applicants visually. They just show up as row after row of lines in the table. So, I thought maybe I could get the table to change color of the text every time the applicant changes (which is the Order ID # since that is the Instance ID number). At least that way, the AR clerk could easily see which rows to enter for any one applicant. I want to make it very difficult for her to miss a line.
I have been googling this and only finding options to do alternate color changes and by copying code that I found the results only affected the lines between rows so far.
Unfortunately, while doing this testing, I discovered that even if I could get the form to display the row lines with alternating colors, the actual report that gets sent in an email does not reflect that color coding. So, this is a second challenge that I have.
I guess, a way around this would be to send the report to the AR clerk and have an additional column for her to check off as she does the invoicing. She could then Submit when done and the report gets saved (without the color coding, which wouldn't matter at that point).
Actually, Brian, I removed the Collection field and changed this to just a table. So my reference to a collection above might cause confusion when comparing notes.
Hi Connie
You had me noodling this, and I came up with the following. As I'm not a JS programmer, this is done using a combination of a Formula in the Table and a JS script that changes the Row Color based on the value of the field created in my formula. The Color change is based on the Order Number
Hi Steve! Ya, I did find some JS that allowed for alternating rows with color, but for some reason it targeted the lines between the rows instead of the text. Can you share your JS? It doesn't actually meet my goal of changing when the Order# changes, but I'm still interested in this.
It would be nice if the color change could be upon a variable change. "If (new row number does not match previous row number), then...
Hi Connie, It just happens to be that the example I had where the Order Number has two lines items, It is actually changing on the Order Number Change
I'm now noodling if I could have the Gray bar behind Each Section, alternating, as opposed to just the change line
In your Table, Add two new Fields (ROWID and COLOR) as Single Line Fields.
You can hide these with Fields Rules once you have tested
In the ROWID Field, add this formula to the field =ROW()
In the Color Field, add this formula
=IF(INDEX(OrderTable.ROWID,ROW())="1","Grey",IF((INDEX(OrderTable.OrderNo,SUB(ROW(),1)))=(INDEX(OrderTable.OrderNo,ROW())),"White","Grey"))
You will need to update the table field names with your table variable
In the CSS Class of the Color Field, enter ColorSelect
In the CSS Class for the Table, enter MyTable
Enter the Following CSS code into the CSS pane
tr.RedRow {color:#f00;}
tr.RedRow input, tr.RedRow select {color:#f00;}
Enter the Following Javascript code into the Javascript pane
$(document).ready( function() {
$('.MyTable').on('change','.ColorSelect input', function() {
if ($(this).val() == "Grey"){
$(this).closest("tr").addClass("RedRow").css("background-color", "#cccccc");
}else{
$(this).closest("tr").RemoveClass("RedRow").css("background-color", "#ffffff");
}
});
});
As you stated, this would likely work best if this task was sent to the AP, and had a Checkbox where they could mark they were completed. Another option would be to take the table data and write it to a CSV and email that, but that's a whole different animal.
Following your instructions, I now have the table changing the text color to red on the first line of a new Order ID#. This is great! Definitely an improvement. If you figure out how to get it to change ALL the lines of one ID number, let me know as that would definitely be easier for the person invoicing the items on these lines, but this is still a great achievement!
Thanks!
QUESTION! Why did the color coding not move on to the next process?
The color coding was working on 1st User Task viewing, but when it is sent to AP Clerk, the color coding isn't showing up. ?
It is likely because on the first form, the Lookup populated the Form, which triggered the change action in JS.
On the second form, the values are already there and don't change so the JS didn't trigger. I'll have to make a change to the code to account for both scenarios.
Hi Connie, switch the JS I gave you previously with this code below, and I believe it should get you the result you want.
$(document).ready(function () {
rowcolorchange();
$('.MyTable').on('change','.ColorSelect input', rowcolorchange);
function rowcolorchange() {
$('.MyTable tbody tr').each(function () {
$(this).find('.ColorSelect input').each(function () {
if ($(this).val() == "Grey"){
$(this).closest("tr").addClass("RedRow").css("background-color", "lightGrey");
}else{
$(this).closest("tr").removeClass("RedRow").css("background-color", "White");
}
});
});
}
});
Hmm, after removing the previous JS and pasting in this JS, now the table is back to all the text (on all the lines) are back to grey. No color changes anywhere.
Hi Connie, was away to EMPOWER conference. Any further luck with this?
No. I was away all last week as well, but nothing has changed from what was posted above.
I'm not sure at this point as the code is working fine here on my system