Discussions

 View Only
Expand all | Collapse all

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

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

    Posted 11-06-2017 19:19
    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? 


  • 2.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 19:57
    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".


  • 3.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 20:00
    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. 


  • 4.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 19:58
    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


  • 5.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 20:57
    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.


  • 6.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:05
    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? 


  • 7.  RE: Build a table in a form where user can input values and save them.

    Posted 11-07-2017 15:13
    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


  • 8.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:07
    I appreciate the feedback, I have implemented the native approach, just looking to show the information in a tabular format. 


  • 9.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:14
    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?


  • 10.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:16
    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


  • 11.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:33
    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);


  • 12.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:39
    BTW, I didn't even write the HTML for the table - rather I used a table generator:

    https://www.tablesgenerator.com/


  • 13.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:45
    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 


  • 14.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:47
    Where is this scrip written? In a formula field or a code page?


  • 15.  RE: Build a table in a form where user can input values and save them.

    Posted 11-06-2017 21:48
    I have a meeting I have to leave for now. If I don't answer later tonight remind me.


  • 16.  RE: Build a table in a form where user can input values and save them.

    Posted 11-07-2017 15:09
    Hello, can you answer my questions? It would be very helpful. Thanks


  • 17.  RE: Build a table in a form where user can input values and save them.

    Posted 11-07-2017 13:41
    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...


  • 18.  RE: Build a table in a form where user can input values and save them.

    Posted 11-07-2017 13:47
    :)  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..


  • 19.  RE: Build a table in a form where user can input values and save them.

    Posted 04-25-2019 16:25
    hello, can we create fields dynamically.As he asked the possibility to increase the length of the fields


  • 20.  RE: Build a table in a form where user can input values and save them.

    Posted 11-07-2017 14:55
    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. 


  • 21.  RE: Build a table in a form where user can input values and save them.

    Posted 04-25-2019 17:41
    HELLO CAN SOMEONE WALK ME THROUGH THIS.i AM NOT SURE HOW SHOULD I DO THIS


  • 22.  RE: Build a table in a form where user can input values and save them.

    Posted 04-25-2019 17:43
    Kristy,
    I suggest that you post a new question as it is not clear what you need help with and this is a very long thread.