コンテンツにスキップ

columns

概要

サーバスクリプトで項目の設定を取得、編集します。 一覧画面のセルCSSの設定やエディタのフィールドCSS、拡張HTMLの設定などが可能です。

プロパティ

No Name Get Set Type Description
1 ExtendedCellCss ○ ○ string セルCSS
2 ExtendedFieldCss ○ ○ string フィールドCSS
3 ExtendedControlCss ○ ○ string コントロールCSS
4 ExtendedHtmlBeforeField ○ ○ string 拡張HTMLのフィールドの前
5 ExtendedHtmlBeforeLabel ○ ○ string 拡張HTMLのラベルの前
6 ExtendedHtmlBetweenLabelAndControl ○ ○ string 拡張HTMLのラベルとコントロールの間
7 ExtendedHtmlAfterControl ○ ○ string 拡張HTMLのコントロールの後
8 ExtendedHtmlAfterField ○ ○ string 拡張HTMLのフィールド後
9 Hide ○ ○ bool 非表示、一覧画面では値が表示されない他、ExtendedCellCssおよびRawTextが無視されます。
10 ValidateRequired ○ ○ bool 入力必須
11 RawText ○ ○ string 一覧画面の項目の値を置換
12 ReadOnly ○ ○ bool 読取専用

メソッド

No Name Description
1 AddChoiceHash 項目の選択肢一覧を動的に設定します。
2 ClearChoiceHash 項目の選択肢一覧をクリアします。

使用例

使用例1

以下の例では、ClassA(分類A)を非表示にします。

JavaScript(サーバスクリプト)
columns.ClassA.Hide = true;

使用例2

以下の例では、DescriptionA(説明A)を読取専用にします。

JavaScript(サーバスクリプト)
columns.DescriptionA.ReadOnly = true;

使用例3

以下の例では一覧画面の分類Aのセルに赤字でABCと出力します。条件に行表示の前を指定する必要があります。HTMLのタグを挿入可能です。

JavaScript(サーバスクリプト)
columns.ClassA.RawText = '<font color="red">ABC</font>';

サンプルコード

1. ログインユーザの属性と状況による画面項目制御

ログインユーザの属性(context.HasPrivilege、context.Groupsで判定)と、状況により画面項目の制御(columns.ReadOnly,Hideで制御)を行います。サンプルコードでは以下のような仕様で実装しています。

制御パターン判定

ユーザ種類 状況 制御パターン
特権ユーザ - パターンA
管理者グループ所属ユーザ(ID1,2) - パターンB
上記以外のユーザ 完了(900) or 保留(910) パターンC
上記以外のユーザ 以外 パターンD

画面項目制御

画面項目 項目ID パターンA パターンB パターンC パターンD
タイトル Title 編集可 編集可 読取専用 編集可
内容 Body 編集可 編集可 読取専用 編集可
状況 Status 編集可 編集可 読取専用 編集可
分類A ClassA 編集可 編集可 読取専用 編集可
分類B ClassB 編集可 読取専用 非表示 非表示
日付A DateA 編集可 読取専用 読取専用 編集可
説明A DescriptionA 編集可 編集可 非表示 非表示
JavaScript

条件:画面表示の前

// 設定
const ADMIN_GROUP_IDS = new Set([1, 2]);
const STATUS_PATTERN_C = new Set([900, 910]); // 完了/保留
const PATTERN_RULES = {
    // パターンA: 何もしない(全編集可)
    A: [],
    // パターンB: ClassB, DateA を読取専用
    B: [
        ['ClassB', 'ReadOnly'],
        ['DateA', 'ReadOnly'],
    ],
    // パターンC: タイトル/内容/状況/分類A/日付Aは読取専用、ClassB/説明Aは非表示
    C: [
        ['Title', 'ReadOnly'],
        ['Body', 'ReadOnly'],
        ['Status', 'ReadOnly'],
        ['ClassA', 'ReadOnly'],
        ['DateA', 'ReadOnly'],
        ['ClassB', 'Hide'],
        ['DescriptionA', 'Hide'],
    ],
    // パターンD: ClassB, DescriptionA を非表示
    D: [
        ['ClassB', 'Hide'],
        ['DescriptionA', 'Hide'],
    ],
};
const DEBUG = true;
// 判定(業務ルール)
function decidePattern() {
    if (context.HasPrivilege) return 'A';
    // context.Groups は Iterable のため Set化して判定をシンプルに
    const userGroupIds = new Set(context.Groups);
    const isAdminGroupUser = [...ADMIN_GROUP_IDS].some((id) =>
        userGroupIds.has(id)
    );
    if (isAdminGroupUser) return 'B';
    // 上記以外のユーザ
    return STATUS_PATTERN_C.has(model.Status) ? 'C' : 'D';
}
// 適用(UI制御)
function applyPattern(pattern) {
    const rules = PATTERN_RULES[pattern] ?? [];
    for (const [columnName, control] of rules) {
        // サンプルとして:列が存在しない場合も落とさずスキップ
        if (!columns[columnName]) continue;
        columns[columnName][control] = true;
    }
}
// 実行
const pattern = decidePattern();
if (DEBUG) context.Log(`pattern=${pattern}`);
applyPattern(pattern);
実行結果
pattern=C
2. 数値項目をスター記号で表示

数値項目に入力された数値に応じスター記号で表示します。

以下のようなイメージで"4.5"といった値にも対応しています。

数値項目をスター記号で表示した例

本サンプルコードでは、最大5個までのスター表示に対応しています。

"4.5"のような小数を表示するには、数値Aの「小数点以下桁数」を1以上にしてください。0のままだと、値が丸められて保存されます(4.5は5になります)。

JavaScript

条件:行表示の前

const maxStars = 5;
function toStarHtml(score) {
    const s = Math.max(0, Math.min(maxStars, Number(score) || 0));
    const pct = (s / maxStars) * 100; // 0〜100%
    return `
        <span
            style="
                display: inline-block;
                position: relative;
                line-height: 1;
                font-size: 20px;
                letter-spacing: -0.2em;
            "
        >
            <span style="color: #ccc">★★★★★</span>
            <span
                style="position:absolute;
                left:0;
                top:0;
                width:${pct}%;
                overflow:hidden;
                white-space:nowrap;
                color:#f60;"
            >
                ★★★★★
            </span>
        </span>
`.trim();
}
columns.NumA.RawText = toStarHtml(model.NumA);

対応バージョン

対応バージョン 内容
1.1.38.0 以降 ExtendedHtmlBeforeLabelの追加
ExtendedHtmlBetweenLabelAndControlの追加
ExtendedHtmlAfterFieldの追加
1.2.15.0 以降 ValidateRequiredの追加

関連情報