エクスペリエンスビルダーのドラッグアンドドロップコンポーネントの設定

1.インターフェースをコンポーネントに追加する

エクスペリエンスビルダーにドラッグアンドドロップコンポーネントとして表示するには、コンポーネントに forceCommunity:availableForAllPageTypes インターフェースを実装する必要があります。

Lightning コンポーネントを作成すると、そのコンポーネントは、組織のすべての Lightning コミュニティの [コンポーネント] パネルに表示されます。

1<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
2    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
3    <aura:attribute name="subject" type="String" default="World" access="global" />
4
5    <div>{!v.greeting}, {!v.subject}!</div>
6</aura:component>

2.デザインリソースをコンポーネントバンドルに追加する

デザインリソースは、エクスペリエンスビルダーで公開するコンポーネント属性を制御します。デザインリソースは .cmp リソースと同じフォルダに存在します。このリソースには、Lightning コンポーネントの設計時の動作 (ページまたはアプリケーションでコンポーネントを表示するためにビジュアルツールが必要とする情報) が記述されます。

たとえば、属性のデフォルト値を設定したり、システム管理者が Lightning コンポーネントの属性をエクスペリエンスビルダーで編集できるようにしたりするには、コンポーネントバンドルでデザインリソースが必要になります。

1<design:component label="Hello World">
2    <design:attribute name="greeting" label="Greeting" />
3    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
4</design:component>

省略可能。SVG リソースをコンポーネントバンドルに追加する

コンポーネントのカスタムアイコンを定義するには、コンポーネントバンドルに SVG リソースを追加します。エクスペリエンスビルダーの [コンポーネント] パネル内のコンポーネントの横にアイコンが表示されます。

SVG リソースを含めないと、デフォルトのアイコン () が使用されます。

「Hello World」コンポーネントと一緒に表示するシンプルな赤い円の SVG リソースの例を次に示します。SVG リソースの名前は componentName.svg にする必要があります。

1<?xml version="1.0"?>
2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 
5<svg xmlns="http://www.w3.org/2000/svg"
6     width="400" height="400">
7  <circle cx="100" cy="100" r="50" stroke="black"
8    stroke-width="5" fill="red" />
9</svg>

省略可能。CSS リソースをコンポーネントバンドルに追加する

1.THIS .greeting {
2    color: #ffe4e1;
3    font-size: 20px;
4}

1<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
2    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
3    <aura:attribute name="subject" type="String" default="World" access="global" />
4
5    <div class="greeting">{!v.greeting}, {!v.subject}!</div>
6</aura:component>