ページビューの合計

ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2023年4月30日日曜日

Domino #Leap でフィールドタイトルの色を変える

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のプロパティにはそのような項目はありません。


簡単に設定できないものか・・
ということで、気なったのが


そう、カスタムCSSクラスです。

そういえば、以前受講したDomino Leapのハンズオンでは、[表示]の[HTML]を利用して、LeapのデフォルトバナーをCSSを利用して消したことがありました。



要は、カスタムCSSクラスに新しいクラスを追加して、このHTMLに追記すれば解決するのではと考えました。

ということで、Leapで利用されているクラスの一覧が必要となります。
サポートに問い合わせようかと思ったのですが、いや、まずは自分で探そうとググッてみたところ、すぐに見つかりました。


このページの前半には記述例。
後半にクラス定義が書かれていました。

クラスは分かりやすいように、分類分けされて表示されています。

  • View Responses layout
  • Single form launch layout
  • Form items - general
  • Section
  • Survey
  • Tabbed Folder
  • Buttons
  • Dialogs
今回はフォームラベルの色を赤くしたいので、Form itemsが対象となります。


図示されていて、わかりやすいですよね。
この例でみると、クラスは [.lfFormLabel ] であることがわかります。

前半の書き方を確認して、以下のように設定してみました。

まずはカスタムCSSクラスを設定します。
例では [sales] としました。



続いてHTMLに追記します。


クラスの指定方法はこの順番になります。

プレビューしてみると、


思うような結果が得られました。

ついでに「回収予定日」と「回収方法」もカスタムCSSに [sales] を設定すると、

簡単ですね。
CSSの詳しい知識がなくても、ある程度の見た目は変更できそうです。

以上、日本語の解説を見つけることができませんでしたので、記事にさせて頂きました。

みなさま、よい連休を!!