You are here:
Creating a Custom Cards Apex Page (Managed Package)
For the managed package runtime, to create a custom Cards Apex page, create a Visualforce Apex page, add your Angular app to the page, add some common scripts, and add your layout name.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
-
Create a Visualforce page and set the
apex:pageheader as follows:<apex:page docType="html-5.0" applyHtmlTag="false" showHeader="false" sidebar="false" standardStylesheets="false" controller="nsPrefix.CardCanvasController"> -
Add the following
htmltag:<html xmlns:ng="http://angularjs.org" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ng-app="hybridCPQ" class="ng-cloak" dir="{!IF(isLanguageRTL, 'rtl', 'ltr')}">where the
ng-apptag relates to your Angular application. If you are including CPQ, you can reference the"hybridCPQ"app directly, otherwise include your own app. -
Add these resources to your page:
<script src="{!URLFOR($Resource.nsPrefix__VlocityDynamicForm__vlocity_core_assets, '/latest/vlocity_core_assets.js')}"></script> <script src="{!URLFOR($Resource.nsPrefix__VlocityDynamicForm__angular_strap_bundle_1_6)}"></script> <script src="{!$Resource.nsPrefix__VlocityDynamicForm__SldsAngular}"></script> <script src="{!URLFOR($Resource.nsPrefix__VlocityDynamicForm__cardframework_core_assets, '/latest/cardframework_assets.js')}"></script> <script src="{!$Resource.nsPrefix__VlocityDynamicForm}"></script> <script src="{!URLFOR($Resource.nsPrefix__VlocityDynamicForm__cardframework_core_assets, '/latest/cardframework.js')}"></script>Optionally, for CPQ apps, add HybridCPQ:
<script src="{!$Resource.nsPrefix__HybridCPQ}"></script> -
Include your layout name in the body of your page:
<vloc-layout layout-name="myLayout" ></vloc-layout>
Complete code:
<apex:page docType="html-5.0" applyHtmlTag="false" showHeader="false"
sidebar="false" standardStylesheets="false"
controller="vlocity_cmt.CardCanvasController">
<html xmlns:ng="http://angularjs.org" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
ng-app="hybridCPQ" class="ng-cloak" dir="{!IF(isLanguageRTL, 'rtl', 'ltr')}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<apex:stylesheet value="{!IF(isLanguageRTL, URLFOR($Resource.vlocity_cmt__slds, '/assets/styles/salesforce-lightning-design-system-vf.rtl.min.css'), URLFOR($Resource.vlocity_cmt__slds, '/assets/styles/salesforce-lightning-design-system-vf.min.css'))}" />
<!-- Custom CSS here -->
<!-- Salesforce Console API -->
<!-- Common scripts -->
<apex:includeScript value="/support/console/41.0/integration.js" />
<script src="{!URLFOR($Resource.vlocity_cmt__vlocity_core_assets, '/latest/vlocity_core_assets.js')}"></script>
<script src="{!URLFOR($Resource.vlocity_cmt__angular_strap_bundle_1_6)}"></script>
</head>
<body>
<div class="">
<!-use your layout name->
<button type="button" class="btn btn-default">Left</button>
<vloc-layout layout-name="AccountConsoleCards"
ctrl="CPQController"></vloc-layout>
</div>
<script src="{!$Resource.vlocity_cmt__SldsAngular}"></script>
<script src="{!URLFOR($Resource.vlocity_cmt__cardframework_core_assets, '/latest/cardframework_assets.js')}"></script>
<script src="{!$Resource.vlocity_cmt__VlocityDynamicForm}"></script>
<script src="{!URLFOR($Resource.vlocity_cmt__cardframework_core_assets, '/latest/cardframework.js')}"></script>
<script src="{!$Resource.vlocity_cmt__HybridCPQ}"></script>
<script type="text/javascript">
var sessionId = '
{!$Api.Session_ID}';
var vlocCPQ = {
'accessToken': '{!$Api.Session_ID}
',
'staticResourceURL': {
'slds': '
{!URLFOR($Resource.vlocity_cmt__slds)}
',
}
};
</script>
</body>
</html>
</apex:page>Did this article solve your issue?
Let us know so we can improve!
