はじめに

プリザンターの分類項目で使用可能な「選択肢一覧」。標準機能ではドロップダウンリスト、ラジオボタン、モーダル(検索画面)の3パターンが使用可能です。選択肢を有効にした状態で読取専用とすることも可能なのですが、ラジオボタンで読取専用にするとラジオボタン表示ではなくなってしまうという欠点があります。今回はこれを改善してみます。

現状を見てみる

分類009を読取専用、分類010を通常に設定してみました。分類009がラジオボタンでなくなってしまっています。

解決作を考えてみる

プリザンターではHTMLの組み立てをサーバ側でおこなっているため読取専用設定のままで、クライアント側だけでどうにかすることが出来ません。そのため、画面の表示モード毎に吐き出されるHTMLを制御しつつ、属性を書き換えることで実現してみます。

まずは、読取専用としたい項目のコントロールCSSにreadonlyを設定します。このときに読取専用チェックボックスはONにしてください。次に、サーバスクリプトを2つ作成します。

条件:レコード読み取り時

if(context.Action !== 'edit'){
    columns.Class009.ReadOnly = false;//項目名は環境に応じて書き換えてください
}

条件:画面表示の前

if(context.Action === 'edit') {
   context.AddResponse(
       'Attr',
       'input.readonly[type="radio"]',
       $ps.JSON.stringify({ Name: 'disabled', Value: '' })
    );
}

編集画面以外のページでは項目に設定した読取専用設定を使い、編集画面では読取専用設定を外してHTMLの属性を書き換えることで読取専用設定を実現しています。

実際に動きをみてみる

これを環境に適用してみると編集画面ではラジオボタンのままで読取専用とすることができました。

まとめ

今回は選択肢一覧項目でラジオボタン使用時にラジオボタンのまま読取専用設定を実現する方法を紹介しました。項目ごとにサーバスクリプト・コントロールCSSの設定をおこなう必要があるので、少し手間ではありますがUI/UXを改善することが出来るので、是非試してみてください。