This time I wanted to change the color of the field labels in DominoLeap to make them stand out.
Using custom CSS, I was able to implement this easily, so I will introduce it here.
I could not find any technical documents in Japanese, so I hope this will be helpful.
みなさま、こんにちは。
ゴールデンウィークスタートしましたね。
とはいいつつ、今週は単なる土日。月末月初ということで、普段通りです。
そんな中いよいよ本格的に社内へDomino Leapワークフローの展開がスタートしたのですが、進めていく中で、フィールドを目立たせたいという課題が発生しました。
Notesなら、フォントカラーや背景色をプロパティで簡単に変更できるのですが、Leapのプロパティにはそのような項目はありません。
簡単に設定できないものか・・
ということで、気なったのが
そういえば、以前受講したDomino Leapのハンズオンでは、[表示]の[HTML]を利用して、LeapのデフォルトバナーをCSSを利用して消したことがありました。
要は、カスタムCSSクラスに新しいクラスを追加して、このHTMLに追記すれば解決するのではと考えました。
ということで、Leapで利用されているクラスの一覧が必要となります。
サポートに問い合わせようかと思ったのですが、いや、まずは自分で探そうとググッてみたところ、すぐに見つかりました。
サポートに問い合わせようかと思ったのですが、いや、まずは自分で探そうとググッてみたところ、すぐに見つかりました。
このページの前半には記述例。
後半にクラス定義が書かれていました。
図示されていて、わかりやすいですよね。
この例でみると、クラスは [.lfFormLabel ] であることがわかります。
簡単ですね。
CSSの詳しい知識がなくても、ある程度の見た目は変更できそうです。
後半にクラス定義が書かれていました。
クラスは分かりやすいように、分類分けされて表示されています。
- View Responses layout
- Single form launch layout
- Form items - general
- Section
- Survey
- Tabbed Folder
- Buttons
- Dialogs
今回はフォームラベルの色を赤くしたいので、Form itemsが対象となります。
図示されていて、わかりやすいですよね。
この例でみると、クラスは [.lfFormLabel ] であることがわかります。
前半の書き方を確認して、以下のように設定してみました。
まずはカスタムCSSクラスを設定します。
例では [sales] としました。
例では [sales] としました。
続いてHTMLに追記します。
クラスの指定方法はこの順番になります。
プレビューしてみると、
思うような結果が得られました。
ついでに「回収予定日」と「回収方法」もカスタムCSSに [sales] を設定すると、
CSSの詳しい知識がなくても、ある程度の見た目は変更できそうです。
以上、日本語の解説を見つけることができませんでしたので、記事にさせて頂きました。
みなさま、よい連休を!!
