【ローコードのSKE】標準部品の鮮やかな表現力

SKEリポジトリ定義で作成される標準部品を格好よくしたい場合どうすればよいか、今回の記事で紹介させていただきます。説明内容はおもに入力画面向けです。

画面デザインのコツ

項目の並び

項目の並び順つまりタブ順です。一般的に横並び優先（左⇒右、上⇒下）ですが、縦並び優先（上⇒下、左⇒右）のケースもあります。右⇒左または下⇒上の並び順は、業務画面にはほぼなしです。

フィールドセット

画面設計には、いくつかの項目を枠で囲んでラベルを付けるフィールドセットのやり方があります。フィールドセット内の項目並び順は固定で横並び優先です。フィールドセットの項目タイプは「[」と「]」で開始・終了タグです。

区切りのタイトル

画面の節を表すため、一般的なラベルと区別して、文字サイズと色を区別する区切り用のタイトルがほしいです。「span」タイプの項目のラベルに、HTMLタグを登録して区切りのタイトルを表現できます。

ラベルの活用

項目が注意事項または付属動作ありの意味を表すため、項目のタイトルにアイコンを追記することができます。そのアイコンを動作させるため、「タイトル操作」にアドオン登録で制御可能です。

例

縦配置優先と区切りタイトルの例

<div style="font-size:20px;background-color:steelblue;color:white;padding-left:10px;margin-top:10px;margin-bottom:10px;">
基本情報
</div>

このデザインは、各項目のラベルと入力枠の幅は、文字数と関係なく同じ設定するのは特徴になり、設定しやすいです。画面に項目がいっぱいになるが、文字で埋めるとからからの項目がよくあり、スペースの使い方は荒い弱点があります。

また、左右区切りのところにどの項目から右にさせるか、「入力画面⇒基本情報⇒高さ」で微調整しています。そして、左側に項目を追加する都度、画面高さの微調整が必要になる弱点があります。

縦配置優先とフィールドセットの例

このデザインは、縦配置優先でフィールドセットを並びます。フィールドセットの幅は同じくて高さが違います。「入力画面⇒基本情報⇒高さ」の調整で、どのフィールドセットから右側にさせるかを決めます。フィールドセットの高さは項目より大きいですから、余裕を持って設定すれば、数項目の増減は画面全体の配置に影響しません。

フィールドセットの中には横並び優先です。項目のラベルと入力枠の文字数を考慮して幅を設定しています。これにより、小さいスペースに大量な項目を格納できコンパクトな感じがあります。

必須入力・ツールチップ・サブダイアログ呼び出し

必須入力（タイトル）

会社名 <font color=red>
<i class="bi bi-bookmark-fill" title="必須情報"></i>
</font>

ツールチップ（タイトル）

評価 <i class="bi bi-info-circle-fill" 
title="「資料申請」のユーザーにレベルを設定する	"></i>

サブダイアログ呼び出し（タイトル）

ウィルス対策  <i class="bi bi-search"></i>

サブダイアログ呼び出し（タイトル操作）

function(touchFormData){
	if (touchFormData.mode=="ref") return;
	return (new Result()).eval(`V_SOFT_inputDialog.open();`);    
}

アイコンの利用

SKEにはbootstrapのアイコンを取り込んでいるから、アイコンフォントを利用できます。書き方は以下のようです。

<i class="bi bi-XXXX"></i>

詳細を確認する場合、以下のリンクをご利用ください。