Saturday, 9 September 2017

vlocity - embed a vlocity card in a visualforce page

Clone consolecards.vf like this,

<apex:page docType="html-5.0" applyHtmlTag="false" showHeader="false" sidebar="false" standardStylesheets="false" controller="vlocity_ins.CardCanvasController" >
<html xmlns:ng="http://angularjs.org" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ng-app="myApp" class="ng-cloak"  style="height:100%"
dir="{!IF(isLanguageRTL, 'rtl', 'ltr')}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
body {
margin: 0px !important;
padding: 0px !important;
background: #f9f9f9;
}
</style>

<apex:stylesheet value="{!URLFOR($Resource.vlocity_ins__vlocity_assets, '/css/vlocity.css')}"/>

<!-- Salesforce Console API -->
<apex:includeScript value="/support/console/34.0/integration.js"/>

</head>
<body>

<!-- Component loads the vloc-layout and cards - defaults to Grid if no layout parameter is present -->
<!-- <c:CardLayoutComponent layout="Grid" controllers="myCtrl" modules="myApp"/> -->


<vlocity_ins:CardLayoutComponent layout="census_card" modules="myApp"/>


<script type="text/javascript">
var myApp = angular.module('myApp',['forceng','consoleCards']);
</script>

</body>
</html>
</apex:page>




pass card name to the layout attribute in

<vlocity_ins:CardLayoutComponent layout="census_card" modules="myApp"/>


name the page as 'CensusCard'

pass the card param value like, suppose it is params.id='0013B00000E01azQAB',

url will be like,

https://c.cs50.visual.force.com/apex/CensusCard?id=0013B00000E01azQAB


1 comment:

  1. Really nice blog post.provided a helpful information.I hope that you will post more updates like this Really nice blog post.provided a helpful information.I hope that you will post more updates like this AngularJS Online Course Bangalore


    ReplyDelete