Apply HTML table to detail view

[JOHNN]

Hi all.

I have used Appsheet for 8 months. I see AppSheet has only a few styles to show the content in view detail so I use the feather Longtext in Appsheet to change the view in view detail. Because my data have a lot of information related to each other, if the user sees it from row to row is easy to make confused if you have 120 columns in a database like me. So this is the way I do it.

-First, I create a new column on google Sheets, the header is any name you want, for me, I use "Thong tin chung" for the name of this column and then I use Arrayfomular to concatenate all the columns by format table in HTML

-Second,I go to Appsheet and config the type of the column is LongText with format HTML.

-Then in view detail, I use Column order and show only the "Thong tin chung" column.

And now we have the result.

Attention:

- Beacause we use the Spreadsheet formula so when we edit the app must 5-10 seconds to sync and appear table to the app. The reason why I don't use the App formula is that AppSheet didn't support the long formula, in this case, the formula contains 5000 characters.

- It works for the view detail, but no way to change the view of the form view by HTML format, and it can't be used Enable QuickEdit (beta) or Quick edit columns.

I hope it's useful for someone who needs a new way to show many columns in the detail view.

[JOHNN]

This is the Arrayfomular on google sheet for someone who needs them.

=ARRAYFORMULA(IF(ROW(B1:B)=1;"Thông tin chung";IF(B1:B="";""; "<br> ^{Thông tin kích thước} <table> <tr> <th><b>Dài Tấm (mm)</b></th> <th><b>Rộng Tấm (mm)</b></th> <th><b>Dài (mm)</b></th> <th><b>Rộng (mm)</b></th> <th><b>Cao (mm)</b></th> <tr> <td>"&P1:P&"</td> <td>"&Q1:Q&"</td> <td>"&R1:R&"</td> <td>"&S1:S&"</td> <td>"&T1:T&"</td> </tr></table>" & " <br> ^{Thông tin kích thước chi tiết} <table> <tr> <th><b>Nắp 1</b></th> <th><b>Nắp 2</b></th> <th><b>Quy Cách Lằn Đặc Biệt</b></th> <th><b>Trọng lượng (g/dm2)</b></th> <th><b>Cắt Khe (mm)</b></th> <th><b>Lưỡi Gà (mm)</b></th> <th><b>In Tề (mm)</b></th> </tr> <tr> <td>"&V1:V&"</td> <td>"&W1:W&"</td> <td>"&X1:X&"</td> <td>"&Y1:Y&"</td> <td>"&Z1:Z&"</td> <td>"&AA1:AA&"</td> <td>"&AB1:AB&"</td> </tr> </table>" & "<br> ^{Thông tin giấy tấm} <table> <tr> <th><b>-</b></th> <th><b>Top Liner</b></th> <th><b>ĐL</b></th> <th><b>Medium 1</b></th> <th><b>ĐL</b></th> <th><b>Midle Liner</b></th> <th><b>ĐL</b></th> <th><b>Medium 2</b></th> <th><b>ĐL</b></th> <th><b>Bottom Liner</b></th> <th><b>ĐL</b></th> </tr> <tr> <td><b>Max</b></td> <td>"&AD1:AD&"</td> <td>"&AF1:AF&"</td> <td>"&AG1:AG&"</td> <td>"&AI1:AI&"</td> <td>"&AJ1:AJ&"</td> <td>"&AL1:AL&"</td> <td>"&AM1:AM&"</td> <td>"&AO1:AO&"</td> <td>"&AP1:AP&"</td> <td>"&AR1:AR&"</td> </tr> <tr> <td><b>Min</b></td> <td>"&AE1:AE&"</td> <td>"&AF1:AF&"</td> <td>"&AH1:AH&"</td> <td>"&AI1:AI&"</td> <td>"&AK1:AK&"</td> <td>"&AL1:AL&"</td> <td>"&AN1:AN&"</td> <td>"&AO1:AO&"</td> <td>"&AQ1:AQ&"</td> <td>"&AR1:AR&"</td> </tr> </table>" & "<br> ^{Thông tin tiêu chuẩn} <table> <tr> <th><b>Độ Nén Cạnh LT</b></th> <th><b>Độ Nén Phẳng LT </b></th> <th><b>Độ Nén Thùng LT (Kgf)</b></th> </tr> <tr> <td> "&AW1:AW& "</td> <td> "&AX1:AX& "</td> <td> "&AY1:AY& "</td> </tr> </table> <br> <table> <tr> <th><b>Độ Bục TCKH (Kgf/Cm2) </b></th> <th><b>Độ Nén Thùng TCKH (Kgf)</b></th> <th><b>Độ Bục LT (Kgf/Cm2)</b></th> </tr> <tr> <td> "&AT1:AT& "</td> <td> "&AU1:AU& "</td> <td> "&AV1:AV& "</td> </tr> </table> <br> <table> <tr> <th><b>CT Mặt (giây)</b></th> <th><b>Loại CT Mặt</b></th> <th><b>Công thức CT Mặt</b></th> <th><b>CT Đáy (giây)</b></th> <th><b>Loại CT Đáy</b></th> <th><b>Công thức CT Đáy</b></th> </tr> <tr> <td> "&AZ1:AZ& "</td> <td> "&BA1:BA& "</td> <td> "&BB1:BB& "</td> <td> "&BC1:BC& "</td> <td> "&BD1:BD& "</td> <td> "&BE1:BE& "</td> </tr> </table> " & "<br> ^{Thông tin tạo tấm} <table> <tr> <th><b>Tề Biên (mm)</b></th> <th><b>Khổ Cuộn ĐM</b></th> <th><b>Quality Code</b></th> <th><b>Kết Cấu Giấy</b></th> <th><b>Sóng</b></th> <th><b>Loại Lằn</b></th> <th><b>Xẻ </b></th> </tr> <tr> <td> "&BG1:BG& "</td> <td> "&BH1:BH& "</td> <td> "&BI1:BI& "</td> <td> "&BJ1:BJ& "</td> <td> "&BK1:BK& "</td> <td> "&BL1:BL& "</td> <td> "&BM1:BM& "</td> </tr> </table> " & "<br> ^{Thông tin in ấn} <table> <tr> <th><b>Thiết Kế Theo</b></th> <th><b>Kiểu in</b></th> <th><b>Số Màu</b></th> <th><b>In Theo</b></th> <th><b>Máy in</b></th> <th><b>Mã bản in</b></th> <th><b>Tốc độ máy in</b></th> </tr> <tr> <td> "&H1:H& "</td> <td> "&I1:I& "</td> <td> "&J1:J& "</td> <td> "&K1:K& "</td> <td> "&L1:L& "</td> <td> "&M1:M& "</td> <td> "&N1:N& "</td> </tr> </table> " & " <br> ^{Thông tin bế} <table> <tr> <th><b>Kiểu Bế</b></th> <th><b>Tốc độ máy bế phẳng</b></th> <th><b>Mã Khuôn Bế</b></th> <th><b>Loại Dao Cắt (mm)</b></th> <th><b>Loại Dao Cấn (mm)</b></th> </tr> <tr> <td> "&BQ1:BQ& "</td> <td> "&BR1:BR& "</td> <td> "&BS1:BS& "</td> <td> "&BT1:BT& "</td> <td> "&BU1:BU& "</td> </tr> </table> <br> <table> <tr> <th><b>Loại Dao Răng Cưa (mm)</b></th> <th><b>Cán Bẹp Vị Trí Dán - Ghim</b></th> </tr> <tr> <td> "&BV1:BV& "</td> <td> "&BW1:BW& "</td> </tr> </table>" & "<br> ^{Thông tin dán} <table> <tr> <th><b>Loại Keo</b></th> <th><b>Tốc độ dán</b></th> <th><b>Loại Máy Dán</b></th> </tr> <tr> <td> "&BY1:BY& "</td> <td> "&BZ1:BZ& "</td> <td> "&CA1:CA& "</td> </tr> </table> " & " <br> ^{Thông tin ghim} <table> <tr> <th><b>Kiểu Ghim </b></th> <th><b>Số Ghim</b></th> <th><b>Tốc Độ Ghim</b></th> <th><b>Loại Máy Ghim</b></th> </tr> <tr> <td> "&CC1:CC& "</td> <td> "&CD1:CD& "</td> <td> "&CE1:CE& "</td> <td> "&CF1:CF& "</td> </tr> </table> " & "<br> ^{Thông tin cột} <table> <tr> <th><b>Kiểu Cột</b></th> <th><b>Màu Dây</b></th> <th><b>Số Lượng/ Bó</b></th> <th><b>Tốc độ Máy Cột</b></th> <th><b>Loại Máy Cột</b></th> </tr> <tr> <td> "&CH1:CH& "</td> <td> "&CI1:CI& "</td> <td> "&CJ1:CJ& "</td> <td> "&CK1:CK& "</td> <td> "&CL1:CL& "</td> </tr> </table> " & "<br> ^{Thông tin giao hàng} <table> <tr> <th><b>Quấn Màng PE</b></th> <th><b>Cột Đai Pallet</b></th> <th><b>Yêu Cầu Mẫu</b></th> <th><b>Ngày Giao Mẫu</b></th> <th><b>Số Lượng Mẫu</b></th> </tr> <tr> <td> "&CQ1:CQ& "</td> <td> "&CR1:CR& "</td> <td> "&CS1:CS& "</td> <td> "&text(CT1:CT;"dd/mm/yyyy")& "</td> <td> "&CU1:CU& "</td> </tr> </table> " )))

[Suvrutt_Gurjar]

Thank you  @JOHNN   for sharing another nice tip of showing multiple columns in detail view in table format etc. so that the user does not have to scroll down a lot. 

I think your idea is similar to the below tip shared by  @GreenFlux   but solution is different. You are using HTML in a long text column.

https://www.googlecloudcommunity.com/gc/Tips-Tricks/Detail-Views-Space-Saving-Trick-to-Display-Colum...

[fredyortegon30]

Hello, thanks for your recommendations. I just don't understand how to make the long text column. have the option to give it html format. it doesn't work out for me

[KingsGuava]

yeah I wonder if it something specific because it is referencing a google sheet that has a spreadsheet formula? It doesn't appear for me either.