Web App Dashboard inserting multiple tables.

[Chris Robson]

Hello,

I am very new to developing web apps and mostly being following different YouTube videos on how to build one.  

I am looking at building a webapp that acts like a dashboard that pulls table data from different Google Sheets.  I have managed to write some script that creates a HTML table consisting of all our active projects and their status.  However, when I repeat the steps to include a second HTML table that displays project notifications, it won't load the table at all in the webapp. Just the first active projects table (table 1) and blank where Table 2 should go. 

To check that data is being pulled from the server side to the html side I have temporary set the table values as a string and passed them through using the same method as I did for the top three left figures (in image).  i.e. in the html script I included <?=Enquiry?> <?=Won?> <?=Completed?> between the <p></p> tags. The <?=...?> connects to the AppScript sheet DoGet function. So in the case of Table 2 i have it currently set as <?=notification?> and on the Do Get function i have it as tmp.notification = functionName() which returns the data.

The code I used for Table 1 :

HTML File:

<table id="projectList" class="customers">

                  <thead>

                    <tr>

                      <th>Project Number</th>

                      <th>Project Name</th>

                      <th>DataSheet ID</th>

                      <th>Status</th>                 

                    </tr>

                  </thead>

                  <tbody id="table-body">

                  </tbody>

                </table>

JavaScript HTML file:

document.addEventListener("DOMContentLoaded",function() {

    google.script.run.withSuccessHandler(projectTable).getProjectData();

//getProjectData() is the name of the function on the AppScript Sheet.

  });

  function projectTable(dataArray) {

    var tbody = document.getElementById("table-body");

     dataArray.forEach(function(r){

      var row = document.createElement("tr");

      var col1 = document.createElement("td");

      col1.textContent=r[0];

      var col2 = document.createElement("td");

      col2.textContent=r[1];

      var col3 = document.createElement("td");

      col3.textContent = r[2];

      var col4 = document.createElement("td");

      col4.textContent=r[3];

      row.appendChild(col1);

      row.appendChild(col2);

      row.appendChild(col3);

      row.appendChild(col4);

      tbody.appendChild(row);

    })

  }

I used the same code for Table 2 and changed the necessary variables, but nothing happens and have no clue on what to do or is it even possible to insert two different tables. 

Any help would be greatly appreciated.

Thanks

[Bennett, Scott]

Have you looked into Google Data Studio?  

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/035e4a55-031a-44af-bdfa-7b2e325477c2n%40googlegroups.com.

--

Scott Bennett

Data and Assessment Coordinator/Math Teacher

Bradley-Bourbonnais Community High School

P 815.937.3707 ext. 6010

[Chris Robson]

Hi,

Yes, but the larger aim of the app is for users to find the project in Table 1, this then takes you to a second page where it shows all the project data and directs you to the different AppScripts to complete other tasks associated with the project. Kind of like a CRM / Project Management tool. So I don't think the Data Studio would work in that capacity. 

I managed to build the full thing in a Google Sheets, but only one person can use it at a time as the AppScript pulls data from different Google Sheets based on which project you want to work with. 

You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/XWkNbwk6A5k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAL7%3DANGcrqFfRibAr3tT6JeuL78tQAd7J%3Ds%2BnTAxMcbsOmPbGQ%40mail.gmail.com.

--

Christopher Robson Digital Transformation & IT
03300 884467 creat...@bambu.co.uk

Trading Address: Bambu, Fir Trees, 1115 Hessle Road HU4 6SB | www.bambu.co.uk  

This email may contain privileged and confidential information. If it has been received in error please inform the sender and remove it from your system without disclosing or using any of the information contained within. Please note that the views or opinions presented are solely those of the author and may not represent those of Bambu Heating. Finally, although virus checked, this email is not guaranteed to be virus free and we do not accept any responsibility for the consequences of passing on a virus. Envolve Ltd Trading address 1117 Hessle Road, Hull, HU4 6SB. 

[Jonathan Butler]

It's difficult to see what the problem could be without all of the code. My guess is you didn't change all of the variables correctly. It definitely is possible to have two tables on the screen. If I were you I would check for misspellings, and missing closing tags for the table elements. You can also check the javascript console (Ctrl + Shift + I on Windows and Chrome) to see if there are any errors popping up.

On Sun, Sep 18, 2022 at 8:58 AM Chris Robson <creat...@bambu.co.uk> wrote:

--

[Chris Robson]

Hi Jonathan,

It works!!! Thank you so much!!! Spelling mistake for tbody in the second table html code.

By any chance, do you know how I can get the value of a clicked cell to be set as a variable which would be used later in the script. 

Regards

Chris

You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/XWkNbwk6A5k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAE9k5yCUirxYREhFbCZap7LE5HZOVEPp99K%2BKu%3D_UeZMzenf-Q%40mail.gmail.com.

[Jonathan Butler]

Glad it worked out! I would create a global variable (a variable outside the scope of any function) and create an onclick event  for the cells you would like to be clickable. Change the global variable/s whenever the cell/s is clicked. Getting the value of the cell is a little more tricky, but you can get it if you check this and this out assuming you are creating the cells in a loop.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAM2QFOD0AKd%3DxDUTo9gTNWLMMSZwG2fSMYUV0sRz7Q_eZD_o0g%40mail.gmail.com.