nkjmkzk.net

powered by Kazuki Nakajima

Archive for 4月, 2015

Excelライクな表形式フォームを埋め込むLightningコンポーネント「Cell」をリリースしました

Salesforce上の複数レコード一括で更新したい場合、どのような方法があるでしょうか?

  • データインポートウィザード
  • データローダー
  • SOAP API
  • Bulk API

Geekなみなさんであればどれでもできそうですが、普通の人がおこなうには敷居が高い。
また、できるのはできるけど、データインポートウィザードなどは10件程度のデータを毎日のように扱う場合には面倒。
APIはわざわざプログラム組むまでやるのでは面倒。
ということで何かと面倒です。

そんなとき、Excelみたいな表形式でデータを編集して、それをそのまま保存できれば便利ですよね。
Cellはそんなオペレーションを可能にするLightningコンポーネントです。

使い方は簡単。

まず組織でLightningコンポーネントを有効にします。

次にCellをインストールします。インストールはこちらのappexchangeページからどうぞ。

開発者コンソールから新しいLightning Applicationを作成し、Cellを組み込みます。もっとも単純な組み込み方法は、下記のようなLightning Applicationを作成することです。

<aura:application>
  <c:Cell sobject="管理したいオブジェクト名" fields="表示する項目をカンマ区切りで" loadData="true" />
  <c:CellSaveButton />
</aura:application>

こちらの記事を参照してアプリケーションプルダウンメニューからこのLightning Applicationにアクセスできるようにします。

以上です。こんなLightning Applicationが作成されたら完成です。下図の例ではsobjectにとあるカスタムオブジェクトを指定しています。

スクリーンショット 0027-04-17 10.20.27

まじで簡単ですね。

ロードするデータを絞りこみたい場合は、下記のようにSOQL文をqueryにセットすることで可能です。

<aura:application>
  <c:Cell sobject="管理したいオブジェクト名" fields="Name, MyField1__c, MyField2__c" query="select Name, MyField1__c, MyField2__c from MyObject__c where MyDate__c = THIS_MONTH" />
  <c:CellSaveButton />
</aura:application>

各セルの値を編集してSaveボタンを押せば一括でデータが更新されます。
また、この表は右クリックでExcelと同じようなメニューがでます。Remove Rowで行を削除すると、そのデータをデータベースから削除することもできます(確認プロンプト付き)。

スクリーンショット 0027-04-17 10.23.21

単体でデータ入力・更新ツールとしても使えますが、CellはLightningコンポーネントです。
様々な要件のアプリに組み込んで利用することができます。そのあたりはスタートガイドの「コンポーネント間の連携」で紹介していますのでチェックしてみてください。

アプリの中に埋め込んで連携させている例はこんな感じ。詳しくはスタートガイドを。

スクリーンショット 0027-04-15 13.50.11

Enjoy.

without comments

Written by 中嶋 一樹

4月 17th, 2015 at 10:37 am

Lightningアプリケーションをアプリケーションプルダウンメニューに表示する方法

Lightningコンポーネントフレームワークでスタンドアローンアプリを作成したい場合、つまり、パーツではなく単体でアプリとして機能するものを作りたい場合、Lightningアプリケーションバンドルを作成することになります。

ただし2015年4月現在、LightningアプリケーションバンドルはSalesforce標準画面の右上にあるアプリケーションプルダウンメニューに通常の手段では表示することができません。

今回は、よく考えれば誰でもできるハックですが、このLightningアプリケーションバンドルを下図のようにアプリケーションプルダウンメニューに表示させる方法をご紹介します。

スクリーンショット_0027-04-16_12_39_52

スクリーンショット_0027-04-16_12_40_00

LightningアプリケーションバンドルはLightningコンポーネントバンドルとほぼ同じものですが、一意のURLが割り当てられる点が異なります。この特性を利用します。

Lightningアプリケーションバンドルを作成する

まず開発者コンソールを開いてFile > New > Lightning ApplicationをクリックしてLightningアプリケーションバンドルを作成します。このLightningアプリケーションバンドルには下記のURLフォーマットでアクセスできます。

https://インスタンス名.salesforce.com/名前空間/バンドル名.app

リダイレクトを担当するVisualforceページを作成する

次にそのまま開発者コンソールからFile > New > Visualforce PageをクリックしてVisualforceページを作成します。ページの名前はなんでも構いません。Visualforceページの中身は下記のように記述します。

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html>
<head>
    <meta http-equiv="refresh" content="0; url=/名前空間/バンドル名.app" />
</head>
</html>
</apex:page>

あぁ、なるほど、と。このVisualforceページにアクセスしたらLightningアプリケーションのURLにリダイレクトするのね、ということがわかります。

タブを作成する

そしてビルド > 作成 > タブでVisualforceタブを作成し、先ほど作成したVisualforceページに紐付けます。

アプリケーションを作成する

最後に、ビルド > 作成 > アプリケーションで新規アプリケーションを作成し、選択されたタブに先ほど作成したVisualforceタブを追加、そしてデフォルトの表示タブをそのVisuaforceタブにセットして保存します。

これで完成です。
アプリケーションプルダウンメニューからアプリを選択すると、下記の流れでLightningアプリケーションが表示されます。

  • デフォルトタブにセットされたVisualforceページがまずロードされる。
  • VisualforceページはすぐにLightningアプリケーションへリダイレクトする。
  • Lightningアプリケーションが表示される。

まどろっこしい仕組みですが、アクセスしてみると意外に遅延もなくスムースにLightningアプリケーションが表示されます。

現時点でLightningコンポーネントフレームワークでアプリを作ってしまいたい場合はこんな形で既存の環境でも違和感なく利用することができます。

Enjoy :)

without comments

Written by 中嶋 一樹

4月 16th, 2015 at 12:51 pm

Posted in Uncategorized

Tagged with ,