SkyVisualEditor | Salesforceの画面開発ツール

Salesforceの画面を自在にデザインすることができるクラウド画面開発サービス

作り方

AppComponentの作り方は次の5ステップです。

Step.1 パッケージをインストール

パッケージをインストール

AppExchangeからSkyVisualEditorのパッケージをインストールしてください。

Step.2 機能を作る

Controllerに、パラメータを受け取る定義

public with sharing class YahooSearchController {
/** 
* 親オブジェクトへの参照。
*
* SVEでは変数recordで親オブジェクトへの参照が取れるが、
* その変数をVisualforce ComponentのController内には書けない。
* (Visualforce ComponentのControllerは、SVEに依存しないつくりにする必要があるため。)
* よって、Attributeとして渡してあげる必要がある。
*/
public SObject parentRecord {
get;
set;
}

/**
* 検索に使うAPI名
*/
public String apiName {
get;
set;
}

<!-- あとでここにコードを追加します。 -->
}

<!-- 後でパッケージ化したいので、access="global"をつけるのを忘れずに -->
<apex:component controller="YahooSearchController" access="global" id="acys">
<apex:attribute name="parentRecord" description="Parent record"
type="SObject" required="true" assignTo="{!parentRecord}"
access="global"/>
<apex:attribute name="apiName" description="API name"
type="String" required="true" assignTo="{!apiName}"
access="global"/>

<!-- あとでここにコードを追加します。 -->
</apex:component>
   

メイン機能を作る1

public with sharing class YahooSearchController {
<!-- (略) -->

/** 検索URL */
public String path {
get {
 //FIXME 本来 EncodingUtil.urlEncode()でエンコードしないといけない。
 return 'http://search.yahoo.co.jp/search?p=' + parentRecord.get(apiName);
}

//画面側から変更することはないので、privateにする。
private set;
}
}

<apex:component controller="YahooSearchController" access="global" id="acys">
<!-- (略) -->

<apex:iframe src="{!path}" height="100%" frameborder="true" scrolling="true">
</apex:iframe>

</apex:component>
   

Step.3 AppComponent.xmlの作成

<?xml version="1.0" encoding="UTF-8" ?>
<ComponentDefinition xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="../../AppCompornent_Schema.xsd" version="1.0">

    <!-- このアプコンの概要 -->
    <Title>アプコン・デモ</Title>
    <Description>AppComponentのデモです。</Description>
    <Publisher>TerraSky Labs</Publisher>
    <WebSite>https://www.terrasky.co.jp/</WebSite>

    <AppComponents>

        <!-- この部分に部品の定義をします -->

    </AppComponents>
</ComponentDefinition>
<AppComponent name="Demo1">
<!-- [1] 1つの部品の概要 -->
<Title>Yahoo検索</Title>
<Description>指定フィールドで検索します。</Description>
<Layout>block</Layout>
<Height value="400" resizable="true" />
<Width value="700" resizable="true" />

<!-- [2] すべての場所に配置可能 -->
<PutablePlaces anyPlace="true"></PutablePlaces>

<!-- [3] Visualforceのapex:attributeに渡す値を定義 -->
<ApexComponent componentName="YahooSearchComponent">
<ApexAttribute name="parentRecord" var="parentRecord" />
<ApexAttribute name="apiName" var="apiName" />
</ApexComponent>

<!-- [4] SVEのStudioで設定できるプロパティ -->
<Properties>
<String name="parentRecord" label="親レコード" defaultValue="{!record}"
 isVisible="false"/>
<ParentSObjectColumns name="apiName" label="キーワード項目" isRequired="true"/>
</Properties>
</AppComponent>
    

Step.4 名前空間を設定

作成>パッケージ>編集から名前空間を設定してください。

名前空間を設定

パッケージをアップロードしてください。

パッケージのアップロード
パッケージのアップロード

Step.5 パッケージをインストールしてデプロイ

パッケージをインストール

アプリを作る

SkyVisualEditor

トップへ戻る