Build a table in a form where user can input values and save them.

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • Answered
I need to create a table in a form where a logged in user can enter data ,similar to grid editing. If I am not wrong the values in the table must be stored in different fields. Image is shown below. Can anyone advise me on how to accomplish this task? 
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,326 Points 50k badge 2x thumb
Well, this will depend on how many rows there are on this report.  Are there just two "rows" of 5 field each, or was this just a partial screen shot and there are many more "rows".
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
There a re 5 rows and 5 columns. I need to fill information or put a check mark in each row satisfying one or the other column condition. It's like a monthly report for an employee's performance. 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,512 Points 20k badge 2x thumb
Normally QuickBase associates one form control with one field. But in your case you basically want five "Likert Scale" radio buttons for one answer field.

Using the IOL technique you can transform each answer text field (shown below for fid=7) into five radio buttons with this simple script:
var markup =`
<input type="radio" name="_fid_7" value="SD">Strongly Disagree
<input type="radio" name="_fid_7" value="D">Disagree
<input type="radio" name="_fid_7" value="N">Neither Agree Nor Disagree
<input type="radio" name="_fid_7" value="A">Agree
<input type="radio" name="_fid_7" value="SA">Strongly Agree
`;
$("#_fid_7").replaceWith(markup);
The resulting form section will look like this although it still represents only one text field:


If you want to arrange your answer using a table or with some other attractive style you just modify the markup to appropriately surround the five radio buttons.

Likert Scale
https://en.wikipedia.org/wiki/Likert_scale
(Edited)
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,326 Points 50k badge 2x thumb
I suggest a native approach.

Make 5 fields each with 5 choices ranging from Strongly Disagree to Strongly Agree.

Set the form properties to show as radio buttons.

Put the fields on the from across the page as opposed to down the page.

The layout will be a bit different to the paper form, but arguably better.
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
My question is can it be displayed in a tablular format instead of the dropdown or radio buttons? Or after the user has entered all the information can I use any trigger to display the info in a tabular format? 
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,326 Points 50k badge 2x thumb
To show in tabular form make 25 fields like I suggested.  Then you can pay them out on the form in view mode and suppress the headings in the form settings for the fields that are in the middle of the grid.

You can create overrides for the headings at the top of each column by making a text element on the form like

<b> Stongly Agree

 and enabling the checkbox to allow HTML
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
I appreciate the feedback, I have implemented the native approach, just looking to show the information in a tabular format. 
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,326 Points 50k badge 2x thumb
You mean you really do want ton display the results in that format fro your post even though it will take up 5 times the space?
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,326 Points 50k badge 2x thumb
You would need to make 25 checkbox fields,each one calculating to true or false, one for each cell of the tabular format.

Post back if you need help with the formula.

The first cell would be

[Builds Rapport ....] = "Strongly Agree"
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,512 Points 20k badge 2x thumb
Don't compromise - you can get precisely what you want using script. See screenshots of data entry and result - code manually applied from the console is at the bottom.







var markup =`
<style>
  .QBU_table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .QBU_table td, .QBU_table th {
    border: 1px solid black;
    text-align: center
  }
</style>
<table class=QBU_table>
  <tr>
    <th></th>
    <th>Strongly Disagree</th>
    <th>Disagree</th>
    <th>Neither Agree Nor Disagree</th>
    <th>Agree</th>
    <th>Strongly Agree</th>
  </tr>
  <tr>
    <td>Lorem Ipsum?</td>
    <td><input type="radio" name="_fid_7" value="SD"></td>
    <td><input type="radio" name="_fid_7" value="D"></td>
    <td><input type="radio" name="_fid_7" value="N"></td>
    <td><input type="radio" name="_fid_7" value="A"></td>
    <td><input type="radio" name="_fid_7" value="SA"></td>
  </tr>
  <tr>
    <td>Bacon Ipsum?</td>
    <td><input type="radio" name="_fid_8" value="SD"></td>
    <td><input type="radio" name="_fid_8" value="D"></td>
    <td><input type="radio" name="_fid_8" value="N"></td>
    <td><input type="radio" name="_fid_8" value="A"></td>
    <td><input type="radio" name="_fid_8" value="SA"></td>
  </tr>
  <tr>
    <td>Cat Ipsum?</td>
    <td><input type="radio" name="_fid_9" value="SD"></td>
    <td><input type="radio" name="_fid_9" value="D"></td>
    <td><input type="radio" name="_fid_9" value="N"></td>
    <td><input type="radio" name="_fid_9" value="A"></td>
    <td><input type="radio" name="_fid_9" value="SA"></td>
  </tr>
  <tr>
    <td>Cupcake Ipsum?</td>
    <td><input type="radio" name="_fid_10" value="SD"></td>
    <td><input type="radio" name="_fid_10" value="D"></td>
    <td><input type="radio" name="_fid_10" value="N"></td>
    <td><input type="radio" name="_fid_10" value="A"></td>
    <td><input type="radio" name="_fid_10" value="SA"></td>
  </tr>
  <tr>
    <td>Hodor Ipsum?</td>
    <td><input type="radio" name="_fid_11" value="SD"></td>
    <td><input type="radio" name="_fid_11" value="D"></td>
    <td><input type="radio" name="_fid_11" value="N"></td>
    <td><input type="radio" name="_fid_11" value="A"></td>
    <td><input type="radio" name="_fid_11" value="SA"></td>
  </tr>
</table>
`;
$("#tdf_1").replaceWith(markup);
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,512 Points 20k badge 2x thumb
BTW, I didn't even write the HTML for the table - rather I used a table generator:

https://www.tablesgenerator.com/
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
This looks good, where will the data (selection from the table) be stored? 
Are the labels: cat ipsum, bacon ipsum fields? if yes what is the data type? Thanks 
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
Where is this scrip written? In a formula field or a code page?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,512 Points 20k badge 2x thumb
I have a meeting I have to leave for now. If I don't answer later tonight remind me.
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
Hello, can you answer my questions? It would be very helpful. Thanks
At the risk of lengthening this thread further, both options have pro's and cons. I am curious though what might be driving the need for the tabular view...
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 47,604 Points 20k badge 2x thumb
:)  Probably an unwillingness to challenge the user as to what they really need.  Some times if you give people what they ask for,  it is not really what they need, just what they are used to coming off  a paper based system.  Unless there is really a visual aspect to it in at a glance seeing how the checkboxes are falling to the left or right - good or bad.

But an alternative would be to add some color to the results so green is good and pink/red is bad, so that would also be visible at a glance and still be compact to read..
Photo of Raj Helaiya

Raj Helaiya

  • 1,246 Points 1k badge 2x thumb
I agree, that's what it is. Don;t want to complicate or change the resulting layout from the previous one. Thank you for all your suggestions and replies. It really helps building an app with such an active community.