[注意] 自己責任でご利用ください!
非公開の標準コンポーネントがカスタムコンポーネント内で動いちゃったよという話です。いつまで動くのかまったくもってわからないので、参考にしてはいけません。
App Builder用のコンポーネントはだいたいカスタムコンポーネント内で使えない
LWCじゃなくて今さらAuraコンポーネントのお話です。
ChatterフィードコンポーネントはAuraにしかないので、カスタムコンポーネント内でChatterを使いたいときなどはAuraを使わざるをえません。でも、なぜかこれがアプリケーションビルダーで置けるChatterコンポーネントの劣化版なのが、悲しいところです。
アプリケーションビルダーで置けるコンポーネントのほとんどは(カスタムコンポーネント内で使えるようには)公開されていません。
ちなみにカスタムコンポーネントで使えるよう公開されているコンポーネント一覧は以下のリファレンスにあります。
Components - Salesforce Lightning Component Library
活動コンポーネントとかChatterのフル機能のコンポーネントとかなんで公開してくれないのかなあという機能がいろいろあります。
しかし、メタデータからコンポーネント名を調べて、普通にこう書いてみても、
<home:heroChart />
保存すらできません。
Failed to save UnpublicHomeComponentsExample.cmp: No COMPONENT named heroChart found: ソース
試しに$A.createComponent
してみたら動いた
しかし、試しに$A.createComponent
してみたら、作成できてしまいました。
例えば、活動コンポーネントだったら、
$A.createComponent("runtime_sales_activities:activityPanel",
{recordId: record.Id},
function(newCmp) {
container.set("v.body", newCmp);
}
);
と書くと動きます。
あら、便利。
ちなみにアプリケーションビルダー上では動かないので注意が必要です。
試しにいろいろ動かしてみた
試しにいろいろと動かしてみたところ、大半のコンポーネントが動きました。
カスタムコンポーネント内に埋め込まれているのが、伝わるだろうか?
コード例
動いたコンポーネントのコード例をまとめておこう。
Quip / forceContent:quipCard
$A.createComponent('forceContent:quipCard', {}, ...);
Quip文書 / forceContent:embeddedQuipComponent
$A.createComponent('forceContent:embeddedQuipComponent', {
configurationData: '{"appBuilderConfig":{"optionSelected":2},globalDocumentUrl:"https://mydomain.quip.com/oxxxxxxxxxxx"}'
}, ...);
Visualforce / flexipage:visualforcePage
$A.createComponent('flexipage:visualforcePage', {
label:'Visualforceページ',
pageName:'OpportunityDetail',
height:150
}, ...);
アシスタント / home:assistant
$A.createComponent('forceContehoment:assistant', {}, ...);
アプリケーションランチャー / salesforceIdentity:appLauncherDesktop
$A.createComponent('flexipage:visualforcePage', {
displayAllItems: true
}, ...);
キャンペーンマーケットプレイス / forceCommunity:campaignTileList
$A.createComponent('forceCommunity:campaignTileList', {
bodyField: 'Description',
categoryField: 'Type',
highlight: 'Name',
highlightColor: '#007DB8',
listLabel: 'キャンペーンマーケットプレイス',
listViewName: 'AllActiveCampaigns',
showImage: true,
sortBy: 'Name',
sortOrder: '昇順',
titleField: 'Name'
}, ...);
ダッシュボード / desktopDashboards:embeddedDashboard
$A.createComponent('desktopDashboards:embeddedDashboard', {
dashboardName: 'CSM_SUCCESS_IMPROVEMENT_MARKETING_MANAGER',
height: 200,
hideOnError: true
}, ...);
パフォーマンス / home:heroChart
$A.createComponent('home:heroChart', {}, ...);
フロー / flowruntime:interview
$A.createComponent('flowruntime:interview', {
flowArguments: '[{"label":"recordId","value":"0061000000YxJAXXXX","dataType":"String","supportsRecordId":false,"selected":false}]',
flowLayout: 'oneColumn',
flowName: 'SendOpportunityToSlack'
}, ...);
リストビュー / flexipage:filterListCard
$A.createComponent('flexipage:filterListCard', {
enableInlineEdit: true,
entityName: 'Opportunity',
filterName: 'MyOpportunities',
hideActionBar: true,
hideSearchBar: true,
pageSize: 3
}, ...);
リッチテキスト / flexipage:richText
$A.createComponent('flexipage:richText', {
decorate: true,
richTextValue: '<p>テスト</p><p><b>太字</b></p>'
}, ...);
レポートグラフ / flexipage:reportChart
$A.createComponent('flexipage:reportChart', {
cacheAge: 1440,
label: 'レポートグラフ',
reportName: 'S2_csm_data_activity_byRole',
showRefreshButton: true
}, ...);
一時停止中のフローインタビュー / flowruntime:pausedInterviewCard
$A.createComponent('flowruntime:pausedInterviewCard', {}, ...);
主要な商談 / home:topDealsContainer
$A.createComponent('home:topDealsContainer', {}, ...);
今日のToDo / runtime_sales_activities:todayTaskContainer
$A.createComponent('runtime_sales_activities:todayTaskContainer', {}, ...);
今日の行動 / home:eventContainer
$A.createComponent('home:eventContainer', {}, ...);
最近のレコード / home:recentRecordContainer
$A.createComponent('home:recentRecordContainer', {}, ...);
未承認申請 / runtime_approval_process:pendingApprovalCard
$A.createComponent('runtime_approval_process:pendingApprovalCard', {
entityNames: ["Opportunity","Account"],
maxRecords: 3
}, ...);
Chatter / forceChatter:recordFeedContainer
$A.createComponent('forceChatter:recordFeedContainer', {
recordId: recordId
}, ...);
Chatterフィード / forceChatter:exposedFeed
$A.createComponent('forceChatter:exposedFeed', {
recordId: recordId,
context: 'RECORD'
}, ...);
Einstein Next Best Action / runtime_communities_nba:builderNbaWidget
$A.createComponent('runtime_communities_nba:builderNbaWidget', {
recordId: recordId,
hideEinstein: false,
hideWhenEmpty: false,
launchOption: 'launchModal',
maxDisplayPropositions: 1,
showDescription: true,
showImage: true,
showRejectAction: true,
strategyName: 'BestActionTest',
widgetTitle: 'Next Best Action'
}, ...);
ガイド付きアクションリスト/ lbpm:actionList
$A.createComponent('lbpm:actionList', {
recordId: recordId,
recordActionDeployment: 'GuideActionTest'
}, ...);
トピック / forceChatter:topicsOnRecordWrapper
$A.createComponent('forceChatter:topicsOnRecordWrapper', {
recordId: recordId,
numberOfTopicsToDisplay: 10,
searchHint: 'Type a topic name and press Enter.',
title: 'Topics'
}, ...);
パス / runtime_sales_pathassistant:pathAssistant
$A.createComponent('runtime_sales_pathassistant:pathAssistant', {
recordId: recordId,
hideUpdateButton: false,
variant: 'linear'
}, ...);
レコードの詳細 / force:detailPanel
$A.createComponent('force:detailPanel', {
recordId: recordId
}, ...);
会社階層 / ddcProspector:companyHierarchyPreview
$A.createComponent('ddcProspector:companyHierarchyPreview', {
recordId: recordId
}, ...);
強調表示パネル / force:highlightsPanel
$A.createComponent('force:highlightsPanel', {
recordId: recordId,
collapsed: false,
numVisibleActions: 3
}, ...);
活動 / runtime_sales_activities:activityPanel
$A.createComponent('runtime_sales_activities:activityPanel', {
recordId: recordId
}, ...);
関連リスト / force:relatedListContainer
$A.createComponent('force:relatedListContainer', {
recordId: recordId,
relatedListComponentOverride: 'NONE'
}, ...);
関連リスト - 1つ / force:relatedListSingleContainer
$A.createComponent('force:relatedListSingleContainer', {
recordId: recordId,
parentFieldApiName: 'Opportunity.Id',
relatedListApiName: 'OpportunityHistories',
relatedListComponentOverride: 'NONE'
}, ...);
関連リストのクイックリンク / force:relatedListQuickLinksContainer
$A.createComponent('force:relatedListQuickLinksContainer', {
recordId: recordId
}, ...);
関連レコード / console:relatedRecord
$A.createComponent('console:relatedRecord', {
recordId: recordId,
createQuickActionName: 'NewAccount',
lookupFieldName: 'AccountId',
updateQuickActionName: 'Account.TypeUpdate'
}, ...);
うまく動かせなかったコンポーネント
以下のコンポーネントはうまく動かせなかった。
- おすすめ / forceChatter:recommendations
- トレンドトピック / forceChatter:trendingTopics
- アコーディオン / flexipage:accordion
- Data.comインサイト / cooper:companyInsightTeaserCard
- タブ / flexipage:tabset
終わりに
良い子は真似してはいけません