User Manual

08.14.2024

MANUAL

FAQ: How to change the background color of a specific column on the list screen

## Answer Use "[Server Script](/en/manual/table-management-server-script)" and "[Style](/en/manual/table-management-style)". --- ## Overview When changing the background color of a specific column on the list screen, set the style previously set in "[Style](/en/manual/table-management-style)" to "ExtendedCellCss" of the "[Columns](/en/manual/table-management-column)" object in "[Server Script](/en/manual/table-management-server-script)". In this example, we will set the background color of the column named "Start" to blue. ## Operation Procedure 1. Open the target table. 1. Click Management → Table Management. 1. Open the "[Style](/en/manual/table-management-style)" tab. 1. Click the New button to display the dialog. 1. Enter any title such as "Make background color blue" in the title, enter the following CSS in the style, set the output destination to list, and click the Change button in the dialog. 1. Open the "[Server Script](/en/manual/table-management-server-script)" tab. 1. Click the New button to display the dialog. 1. Enter any title such as "Make background color of numeric items on the list screen blue" in the title, enter the following CSS in the script, set the condition to "Before Row Display", and click the Change button in the dialog. 1. Click the Update button at the bottom of the screen. 1. Open the list screen of the target table and confirm that the background color of the start column is blue. ## Sample Code ### 1. Style ##### CSS ``` .blue { background-color: blue; } ``` ### 2. Server script ##### JavaScript ``` columns.StartTime.ExtendedCellCss = 'blue'; ``` ## Related Information <div id="ManualList"><ul><li><a href="/en/manual/table-management-column">Manage Table: Column</a><span>10.07.2024 up</span></li></ul></article> <ul><li><a href="/en/manual/table-management-style">Table Management: Style</a><span>08.13.2024 up</span></li> <li><a href="/en/manual/table-management-server-script">Table Management: Server Script</a><span>08.13.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.