2021.12.22

SkyVisualEditor LCでVF機能を実現！LC活用Tips

M.I
こんにちは。SkyVisualEditor開発担当者です。
いつもテラスカイの製品をご利用いただき、本当にありがとうございます。

突然ですが皆さま、SkyVisualEditor LC​はご活用いただけていますか？
SkyVisualEditor LCは2019年12月より提供を開始した、その名の通りLightningコンポーネントを作成可能なアプリケーションです。
Lightningコンポーネント独自のパーツの利用もでき、LightningExperience（LEX）の活用をさらに促進することが可能です！
LC版もアップデートによる機能強化を随時行っていますが、VF版の機能で、LC版ではまだ提供できていない機能もあります。
そこで今回はLC版で一工夫することでVF版の機能を実現するTipsをご紹介したいと思います。
　１．本日日付
　２．カスタムボタンのツールチップ表示
　３．タブパネルのアクティブタブ、非アクティブタブの色設定

皆さまのLC版活用のご参考になれば幸いです。

１．本日日付

VF版ではコンポーネントペインのアイテムから配置可能な本日日付の項目ですが、LC版でも「カスタムボタン」「自由テキスト」そして高度な設定の「カスタム属性」を使用することで簡単に作成が可能です。

まずはコンポーネント設定の最下部、高度な設定からカスタム属性を作成します。
ここで作成する属性は、いわば項目の入れ物になる部分です。
今回は本日日付の項目を入れるため、TypeにはDate型を選択し、任意の名前（画面上ではToday）を設定します。

次にキャンバス上に自由テキストを配置し、下記文字列を入力します。
　{!v.Today}（カスタム属性のnameに設定した任意の名前）

これは実際に本日日付の項目を表示する項目になるため、キャンバス上で表示したい箇所に配置してください。

最後にカスタムボタンのOnClickプロパティで本日日付を取得し、カスタム属性に設定するコードを入力します。
var today = new Date();
cmp.set("v.Today", today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
本日日付を取得し、カスタム属性に設定するコード

すると、上記のようにボタンを押した際に本日日付を出力する項目が作成できます！
今回はStudio内で設定が完結する方法をご紹介しましたが、画面開発が少しできるよ！という方であれば、カスタムボタンのOnClickイベントに書いたコードをinitメソッドに追加してもらうことで、ページを開いた際に直接本日日付を表示する項目を作ることも可能ですのでお試しください。

２．カスタムボタンのツールチップ表示

上記のように、カスタムボタンはさまざまなアクションが設定可能な反面、ボタンの名前のみでは用途がわかりにくい場合がありますよね。
そこで便利に使用できるのが、マウスカーソルをあてると説明を出してくれるツールチップです。
LC版では「コンポーネントスタイル」の設定からツールチップの表示を実現できます。

まずはカスタムボタンを配置し、IDを確認。
そして下記のサンプルコードのようにIDを指定し、ツールチップの設定を記述します。
contentの箇所にツールチップで表示したい文字列を入力すればあっという間に完成です！
.THIS .CustomButton_667:hover {
    /* 位置 */
    position: relative;
}
.THIS .CustomButton_667:hover:after{
    /* 表示文字列 */
    content: "ツールチップ";
    
    /* 文字の設定 */
    color: black;
    white-space: nowrap;

    /* 背景の設定 */
    background-color: white;
    padding: 3px;
    border: 1px gray solid;

    /* 位置の設定 */
    position: absolute;
    left: calc(100% + 10px);
    top: 0;
    z-index: 1;
}
ツールチップ表示のサンプルコード

たったこれだけのコードでツールチップの表示が実現できてしまいます。
また文字の設定や背景の設定を少しいじることで、下記のようによりリッチなツールチップを実装することもできるので、ぜひいろいろカスタマイズしてみてください。

３．タブパネルのアクティブタブ、非アクティブタブの色設定

最後に、2021/12/12にリリースされたばかりのSkyVisualEditorV16.0の機能からタブパネルのヘッダースタイルについてご紹介いたします。
V16.0のLC版で追加された機能のひとつにタブパネルがあります。
見出し（タブ）をクリックすると内容（パネル部分）が切り替わるとても便利な機能になりますが、ヘッダーの見た目が変更できたらより分かりやすいページが作成できると思います。
こちらの実現についても、LC版では上記と同様に「コンポーネントスタイル」を使用します。

タブパネルのユニットを配置し、タブパネル全体（個別のタブではないことに注意！）のIDを確認。
下記のサンプルコードのようにIDを指定し、タブの色を設定します。
/* タブのスタイル変更 */
.THIS .TabPanel_545 li {
    background-color: rgba(221, 229, 252, 1);
}
タブのヘッダースタイルのサンプルコード

するとタブのヘッダー部分のみの色を変更することができます。

また下記のコードのようにCSSの指定を追加すると、タブが選択されていた場合のみのスタイルを変更できます。
/* アクティブタブのスタイル変更 */
.THIS .TabPanel_545 li.slds-is-active {
     background-color: rgba(65, 148, 249, 1)
}
アクティブタブのスタイルのサンプルコード

背景色の他にも文字の色や太さなどのスタイル変更も可能なため、デザインの幅が広がるポイントだと思います。

おわりに

今回はSkyVisualEditor LCでVF機能を実現！LC活用Tipsをご紹介しました。
高度な設定での設定内容についてはサポート対象外となりますが、現在はこのように拡張機能を活用することで実現できます。
SkyVisualEditor LCは今後も機能の追加・拡張を続けてまいりますので、どうぞよろしくお願いします。
33 件
    　
  • banner
  • banner

関連する記事

関連するキーワード