User Manual

08.14.2024

MANUAL

FAQ: How to decorate the text of items that match a condition in a List

## Answer Please use "[Server Script](/en/manual/table-management-server-script)" and "[Style](/en/manual/table-management-style)". --- ## Overview This is a sample code that decorates the text color of the date (Date A) in the "[List](/en/manual/table-management-grid)" of Pleasanter if the date (Date A) is within one month (including the past). The text-decoration is specified in "[Style](/en/manual/table-management-style)". ## Operation Image ![image](https://pleasanter.org/binaries/7f65de70eaee4fe883ff4a71b3452995) ## Operation Procedure 1. Create a table 1. Create a new "[Server Script](/en/manual/table-management-server-script)" and write the following script. Check "Before row display" as the condition and update. 1. Create a new "[Style](/en/manual/table-management-style)" and write the following code. Check "[List](/en/manual/table-management-grid)" as the output destination and update. 1. From the "[Editor](/en/manual/table-management-editor)", activate Date A according to the sample code below. 1. Open a new record from the "Create New" button and enter today's date in Date A to create a record. 1. Return to the "[List](/en/manual/table-management-grid)" and confirm that date A is displayed in red. ## Sample Code ##### JavaScript ``` let now = new Date() let limit = now.setMonth(now.getMonth() + 1); if (model.DateA <= limit) { columns.DateA.ExtendedCellCss = 'alert-color'; } ``` ##### CSS ```` .alert-color { color: red; font-weight: bold; } ```` ## Related Information <div id="ManualList"><ul><li><a href="/en/manual/table-management-editor">Table Management: Editor</a><span>08.13.2024 up</span></li></ul></article> <ul><li><a href="/en/manual/table-management-grid">Table Management: List Screen</a><span>08.13.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> <ul><li><a href="/en/manual/faq-server-script-log">FAQ: I want to output the error log of a server script</a><span>08.14.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.