You are viewing limited content. For full access, please sign in.

Question

Question

Extract Table Row and Column information

asked on November 29, 2018

Hi,

 

Bit of a tricky one here..

I've built a few large forms for a client which include tables for recording data whilst out on site using an iPad.

These tables are used to record what type of work is required and which room it is required in. Example below:

 

These boxes are marked with either a Tick or a cross (or left blank if not required) to indicate if this work will be charged externally or be an internal cost.

 

The tick outputs a value of 'Work'

The cross outputs a value of 'Sundry_Debt'

 

What I'm trying to achieve is a simple way to extract the data into text to be able to have a 'Job Card' as such, which states the works completed. For example, in the screenshot above, the output text would read along the lines of:

 

Work: Ease / Replace window catch in Bathroom, Curtain rod brackets (over 1.3m, 3 brackets) in WC.

 

Sundry Debt: Replace window / door fly screens mesh in Laundry and Lounge.

 

Obviously that exact format may be hard to replicate, however, I'm hoping that their is a more elegant solution to the alternative I have currently been testing with.

 

By using workflow I am running a For Each row, with conditional decisions and appending tokens with the row label data. This is quite a lengthy process and not easy to update if they require changes. 

 

JavaScript was suggested to me previously as a possible solution to populate a hidden field whilst the form is being filled out, however, I am a bit lost on where / how to start OR if there is an alternative solution to this all together.

 

I'd appreciate any help or suggestions with this.

 

Thanks all.

 

 

1 0

Answer

SELECTED ANSWER
replied on November 30, 2018

Hi Aaron,

In this case, it does look like JavaScript would probably be the easiest option.

When the form is submitted, we can use a script to iterate through the cells in the table, and check to see what each value is. If the value is "Work", we can find the row label (the specific action item) and the column label (the room). Then, we just need to concatenate these and write the phrase into a "Work Jobs" multi-line field. If the value is "Sundry_Debt," we can do the same thing, but write the resulting value into a "Sundry Debt Jobs" multi-line field.

I've included a JavaScript sample below, that should help you get started here. If you want to use it in your own form, you should replace #q4 with the ID for your table, #q7 with the ID for the Work Jobs multi-line field, and #q8 with the ID for the Sundry Debt Jobs multi-line field. I should also note that this script assumes the cells are all single line fields; if you are using a different field type, you'll need to update the script accordingly.

$(document).ready(function() {

  //Compile Job Card when the form is submitted
  $('.Submit').click(function(){
    
    //iterate through the cells
    $('#q4 tr td input').each(function() {
      var phrase = "";
      
      //handle "Work" items
      if ($(this).val() == "Work"){
        
        //get the action
          var WorkAction = $(this).closest('tr').find('td.col0').text();
        phrase += WorkAction + " in ";
        
          //get the room
        var WorkRoom = $(this).closest('td').find('.cf-col-label').text();
        console.log(WorkRoom);
        phrase += WorkRoom + ". ";
        
          //add the list to the hidden text box
        $('#q7 textarea').val($('#q7 textarea').val() + phrase);
      }
      
      //Handle "Sundry_Debt" items
      else if ($(this).val() == "Sundry_Debt"){
        
        //get the action
          var SundryAction = $(this).closest('tr').find('td.col0').text();
        phrase += SundryAction + " in ";
      
          //get the room
        var SundryRoom = $(this).closest('td').find('.cf-col-label').text();
        phrase += SundryRoom + ". ";
      
        //add the list to the hidden text box
        $('#q8 textarea').val($('#q8 textarea').val() + phrase);
        }
    });
  });
});

I hope this helps!

2 0
replied on December 2, 2018

Hi Kathleen,

 

Thank you very much for your input! Greatly appreciated!!

 

I should have mentioned, the fields are drop down fields using a tick or cross symbol. How would I need to edit the script accordingly?

0 0
replied on December 2, 2018

Also, just following on from the above, I added in an extra column and made it a single line field just to test, and it outputs into the Hidden multi line fields!! 

 

The only issue is, it seems to duplicate the notes twice.

 

 

Thanks in advance :) 

0 0
replied on December 2, 2018

Hi Aaron,

 

Normally drop down fields are targeted as 'select' while 'input' is for single line and 'textarea' for multiline.

 

I haven't tested, but maybe set a separate workphrase and sundryphrase and update those accordingly. At the moment it looks as though the script is only updating 'phrase' and then outputting to both fields.

 

Regards,

Aaron

1 0
replied on December 2, 2018 Show version history

Thanks Aaron!! Using select worked a charm!

 

I've also figured out what was causing the double up issue...

The Javascript will automatically populate these hidden fields when submit is pressed, however, if the client has forgotten to fill out a mandatory field, the data is stored, and then duplicated when they hit submit again. (Now I'm being difficult aren't I?)

 

Also, how would I adjust the script to allow for multiple tables? 

0 0
replied on December 3, 2018 Show version history

Aaron,

To deal with your duplication and hidden field issues you can do a couple of things:

  1. Have the JavaScript reset/clear the field before adding any values; this way it will start fresh each time it runs.
    $('#q8 textarea').val('')
  2. Update the JQuery selectors to only retrieve visible fields, which should omit the hidden fields from the loop.
    $('#q4 tr td input:visible')
1 0
replied on December 3, 2018

That worked a treat! Thanks Jason.

 

I'm thinking if it's not possible to have multiple tables populating one multi-line text box, if dedicating separate multi-line fields to their own tables, and then using a concatenate formula in another multi-line field to group them all together?

0 0
replied on December 3, 2018 Show version history

If all you need to do is to pull values from both tables, there are a couple of ways:

A) Expand your selector to pull both tables at once for the .each loop. For example:

$('#q4 tr td input:visible, #q4 tr td input:visible')

 

B) Apply a custom CSS class to both tables and just use a single selector. For example, in the Advanced tab for the tables, add the CSS class "dataCollection" and use a selector like the following:

$('.dataCollection tr td input:visible')

 

C) Create a second loop for the other table and append the values to the string just like you're doing in the first loop (this may be the better option if you have different logic for the second data set).

 

As long as you do it in the same function and only reset the multiline value in the very beginning, you don't have to worry about overwriting the data from the first table.

1 0
replied on December 3, 2018

Thanks Kathleen, Aaron and Jason!

 

Have got this working exactly how I needed it to. Saved me hours and hours of time!yesyesyes

0 0
replied on December 3, 2018

Glad to hear it!

You should mark Kathleen's reply as the answer since she provided the code.

1 0

Replies

replied on January 21, 2019

Hey all,

 

After updating to version 10.4, this seems to function slightly differently. 

It's still extracting the data, however, it's adding to the end of each value 'field type drop down'.

 

Here's a snippet of how it's pushing the data out now:

"Strip & Seal Vinyl in Kitchenfield type drop-down. Strip & Seal Vinyl in
Bathroomfield type drop-down. Strip & Seal Vinyl in Laundryfield type drop-down.
Full Cleanfield type drop-down. Stove/Ovenfield type drop-down. Mop All Floorsfield
type drop-down. Remove Stickersfield type drop-down. Vacuum All Floorsfield type
drop-down."
 

Is it possible to have it automatically remove this somehow?

Thanks again !

0 0
replied on January 21, 2019

What's the exact code you're using to extract the "location" portion? I don't have 10.4 yet so I can't test, but based on Kathleen's code and your examples having the period at the end, it looks like the extra text would be coming in at that point.

0 0
replied on January 22, 2019

Hi Jason,

I've just finished some testing on this and have found that even removing the period at the end, I still produce the same result. Code as below: 

 

 //get the room
        var WorkRoom = $(this).closest('td').find('.cf-col-label').text(); 
        phrase += WorkRoom + ". ";

 

 

0 0
replied on January 22, 2019

Hi Aaron,

I apologize, I didn't mean to suggest that the period was part of the issue, I just meant that since it is in there, the "extra" text has to come from the previous step.

Try adding,

console.log(WorkRoom);

right before you update the phrase variable and see what values it gives you in the dev console.

0 0
replied on January 22, 2019

In the console it logs 'Kitchenfield type drop-down'

0 0
replied on January 22, 2019

Okay, that's narrowing it down some.

Right-click and inspect one of the fields in the "Kitchen" column to see what's actually in the label html.

 

0 0
replied on January 22, 2019

Hi Jason,

Here's the snippet


0 0
replied on January 22, 2019 Show version history

Okay, that would explain it then, it is pulling the screen reader text from the span.

Try replacing 

var WorkRoom = $(this).closest('td').find('.cf-col-label').text();

With this

var WorkRoom = $(this).closest('td').find('.cf-col-label')[0].childNodes[0].nodeValue;
2 0
replied on January 22, 2019

Thank you Jason!!

Works a treat. Appreciate your time :) 

0 0
replied on July 21, 2019

Hey Aaron,

I am working on something like this, not exactly the need...

Could you please tell me how did you get the column header in Diagnol?

 

Many Thanks,

Sahil

0 0
replied on July 22, 2019

Hi Sahil,

 

Here's the CSS snippet for that, just modify #q4 to match your table id

 

#q4 .cf-col-label
          {
              text-align: center;
              vertical-align: middle;
              width: 20px;
              margin: 0px;
              padding: 0px;
              padding-left: 3px;
              padding-right: 3px;
              padding-top: 10px;
              white-space: nowrap;
              -webkit-transform: rotate(-45deg); 
              -moz-transform: rotate(-45deg);                 
          }

#q4 .cf-table_parent
{
  padding:50px 0 0 10px !important;
}

 

2 0
replied on July 23, 2019

Thanks!!!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.