tag:blogger.com,1999:blog-24342902432414063642024-03-28T13:45:38.504+05:30BlogForce9Apex , Jquery and More !Avinava Maitihttp://www.blogger.com/profile/15921612158213317968noreply@blogger.comBlogger66125tag:blogger.com,1999:blog-2434290243241406364.post-20936259598891177702016-11-23T10:00:00.001+05:302020-06-25T00:35:11.297+05:30Visualstrap SLDS - Visualforce Lightning Styled Components<div dir="ltr" style="text-align: left;" trbidi="on">
Visualstrap SLDS takes Visualstrap further, It gives you a bunch of components that are based on newly released Lightning Design System.<br />
<br />
Visualstrap SLDS gives you a set of components that helps you quickly design Lightning Styled VF pages. Visualstrap SLDS uses the same known attributes that are used by Visualstrap and most of the apex standard VF components.<br />
<br />
Visualstrap SLDS is still in development and is improving , to make it more usable. Here is a link to repo where you can download and install the components.<br />
<br />
<b>Repo</b><br />
<br />
<div style="text-align: center;">
<a href="https://github.com/Avinava/visualstrap-slds">https://github.com/Avinava/visualstrap-slds</a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<b>Demo Site</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;"><a href="#" id="http://visualstrap-developer-edition.ap15.force.com/apex/VisualStrapGettingStarted" name="http://visualstrap-developer-edition.ap15.force.com/apex/VisualStrapGettingStarted">http://visualstrap-developer-edition.ap15.force.com/apex/VisualStrapGettingStarted</a></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com40tag:blogger.com,1999:blog-2434290243241406364.post-72393551657383409622015-07-13T19:08:00.005+05:302020-06-25T00:36:04.543+05:30Visualstrap Updated #NotDeadYet<div dir="ltr" style="text-align: left;" trbidi="on">
Visualstrap almost now has 1600 appexchange installs around 3500 installs from the project page , well, for me thats too many orgs!<br />
Thanks for all the support and yes, its not dead yet !<br />
<br />
Finally upgraded the Visualstrap to Bootstrap 3.3.5 .<br />
<br />
<h2 style="text-align: left;">
Visualstrap 1.61 What's new ?</h2>
<div>
<ul style="text-align: left;">
<li>Updated to Bootstrap 3.3.5</li>
<li>Many CSS Bugfixes</li>
<li>New themes 'cosmo','slate','simplex' and 'paper'</li>
<li>Includes new Material Design theme 'paper'</li>
<li>New component ribbon</li>
<li>depth classes</li>
<li>collapse support for navbar</li>
</ul>
<div>
<br /></div>
</div>
<h2 style="text-align: left;">
Screenshots and Links (theme = paper)</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaqe13K-Bu_64q6E8CjIkhZiQ7Gch6RjQaWVqar7kjZejSOu0_JsgX5kUo67ltf1H2Fz2rjWlVfbYxK13eyn7BxUWQDh7es1yknaJ5_cQWlLUUM10R3t5c0aXwwPtTwfcKS-Tbklv5PuM/s1600/Screen+Shot+2015-07-07+at+6.31.32+pm.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaqe13K-Bu_64q6E8CjIkhZiQ7Gch6RjQaWVqar7kjZejSOu0_JsgX5kUo67ltf1H2Fz2rjWlVfbYxK13eyn7BxUWQDh7es1yknaJ5_cQWlLUUM10R3t5c0aXwwPtTwfcKS-Tbklv5PuM/s640/Screen+Shot+2015-07-07+at+6.31.32+pm.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;"><a href="http://visualstrap-developer-edition.ap15.force.com/VSDashBoards1">http://visualstrap-developer-edition.ap15.force.com/VSDashBoards1</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1dsu-PEEHCNpf-5sLRHVsiV9l261tmn0ZWTMAjINvpyB2VIstpnXovKoVs2vK9kHU9X548doBelJhyphenhyphenhk0mJZxXbwlX-nMf99oyMD_u7EdweTuNFnxH0jbRwN3bDUQTiU6XHZi8rU7tg/s1600/Screen+Shot+2015-07-11+at+10.02.56+PM+%25281%2529.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1dsu-PEEHCNpf-5sLRHVsiV9l261tmn0ZWTMAjINvpyB2VIstpnXovKoVs2vK9kHU9X548doBelJhyphenhyphenhk0mJZxXbwlX-nMf99oyMD_u7EdweTuNFnxH0jbRwN3bDUQTiU6XHZi8rU7tg/s640/Screen+Shot+2015-07-11+at+10.02.56+PM+%25281%2529.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://visualstrap-developer-edition.ap1.force.com/VSResponsive">http://visualstrap-developer-edition.ap15.force.com/VSResponsive</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaoLR0xl91uCMZA-m5Z9r9qa6SW9taWpbTbKpsUe3VfRAOJ6DK2Iz4WwLqUh911qEgIpAxm6oElI2cwEFd42j4i9nfrY0tBioeb4Bf0_AbwgQL6lxr5dHfVcAkIfOE2XKBi8AXahRvL24/s1600/Screen+Shot+2015-07-13+at+4.41.42+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaoLR0xl91uCMZA-m5Z9r9qa6SW9taWpbTbKpsUe3VfRAOJ6DK2Iz4WwLqUh911qEgIpAxm6oElI2cwEFd42j4i9nfrY0tBioeb4Bf0_AbwgQL6lxr5dHfVcAkIfOE2XKBi8AXahRvL24/s640/Screen+Shot+2015-07-13+at+4.41.42+PM.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://visualstrap-developer-edition.ap1.force.com/VSLead">http://visualstrap-developer-edition.ap1.force.com/VSLead</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh839wBUJK9NcFizfrTt2Yh-I3yjq_v0cWGB-ctvRRZ3H9wUIM_4bn21RIwbn3KjzgS6fVa8tvE8Ek6orAnm_7g0HkzDX5v7CPZHOcOg32SpEhRALU5xN86Tp-AQt4jDZReOX5bwSP9XTU/s1600/Screen+Shot+2015-07-13+at+4.42.38+PM.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh839wBUJK9NcFizfrTt2Yh-I3yjq_v0cWGB-ctvRRZ3H9wUIM_4bn21RIwbn3KjzgS6fVa8tvE8Ek6orAnm_7g0HkzDX5v7CPZHOcOg32SpEhRALU5xN86Tp-AQt4jDZReOX5bwSP9XTU/s640/Screen+Shot+2015-07-13+at+4.42.38+PM.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://visualstrap-developer-edition.ap1.force.com/VSLogin">http://visualstrap-developer-edition.ap1.force.com/VSLogin</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="alert alert-warning lead">
<div class="separator" style="clear: both; text-align: left;">
<b>Installation Link</b> : https://appexchange.salesforce.com/listingDetail?listingId=a0N3000000B56AMEAZ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Project Page</b> : http://visualstrap-developer-edition.ap1.force.com/</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Github</b> : https://github.com/Avinava/VisualStrap</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div>
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com8tag:blogger.com,1999:blog-2434290243241406364.post-45783439232694294442015-06-22T18:37:00.000+05:302015-06-30T16:13:55.303+05:30Angular JS & SObject Remote : Part 2 Updating Data from Page #NoControllers<div dir="ltr" style="text-align: left;" trbidi="on">
So finally the Part 2 of the #NoController series , In this part we will try to update the records that were retrieved from the Salesforce using SObject Remote.<br />
<br />
If you haven't gone through the Part 1 of this , you can have a look here<br />
<br />
<div class="alert alert-success lead">
<center>
<a href="http://blogforce9.blogspot.in/2015/04/angular-js-sobject-remote-part-1.html">http://blogforce9.blogspot.in/2015/04/angular-js-sobject-remote-part-1.html</a>
</center>
</div>
<br />
<h3 style="text-align: left;">
Updating Records</h3>
<br />
<ul style="text-align: left;">
<li>Will be using update method of sObject Remote</li>
<li>Records will be updated as soon as the input elements losses focus (blur)</li>
</ul>
<div>
<br /></div>
<script src="https://gist.github.com/Avinava/9e65549036c25b5b5d4a.js"></script>
After all this was not that complicated :-)<br />
<br />
<div class="lead alert alert-success">
<b>Demo :</b> <a href="https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemoteUpdate">https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemoteUpdate</a></div>
</div>Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com10tag:blogger.com,1999:blog-2434290243241406364.post-14013615226871877832015-04-19T16:32:00.002+05:302015-04-19T16:32:59.181+05:30Custom Rich Textarea : Taking it further<div dir="ltr" style="text-align: left;" trbidi="on">
Rich Text Areas / Field , lets is like a small editor which lets you format your content. Thats really cool feature when you want that field to merged into a PDF / Email or in an document. But whats not so cool is when you add an RTF to a Visualforce page you no longer can rerender the page and you have to let the page refresh fully. Thats really sad.<br />
<br />
The visualforce RTF editor uses CKEditor which is widely used for the same purpose and has an open API / Method, which exactly was the Idea behind the custom-rtf component. Introduce some JS in the page and customize the toolbar and along with bring back the ability to rerender the page.<br />
<br />
<h3 style="text-align: left;">
Introducing Custom-rtf</h3>
<div>
<ul style="text-align: left;">
<li>Lets you customize the Toolbars</li>
<li>Lets you rerender the VF page</li>
<li>Easy to using vf component</li>
</ul>
<h3 style="text-align: left;">
Syntax</h3>
<div>
<br /></div>
<script src="https://gist.github.com/Avinava/a41e89f74da3945dfa45.js"></script>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Attributes</h3>
<div>
<ul style="text-align: left;">
<li><b>targetclass</b> : Styleclass of the Textarea that needs to be rendered as RTF</li>
<li><b>toolbar</b> : Different toolbars available</li>
</ul>
<h3 style="text-align: left;">
<b>Toolbar options</b></h3>
</div>
<div>
<ul style="text-align: left;">
<li style="box-sizing: border-box;">Full</li>
<li style="box-sizing: border-box;">Visualforce</li>
<li style="box-sizing: border-box;">HomePageComponent</li>
<li style="box-sizing: border-box;">SalesforceBasic</li>
<li style="box-sizing: border-box;">EmailMultiFormat</li>
<li style="box-sizing: border-box;">Email</li>
<li style="box-sizing: border-box;">SalesforceLight</li>
<li style="box-sizing: border-box;">Knowledge</li>
<li style="box-sizing: border-box;">KnowledgeWithIframes</li>
<li style="box-sizing: border-box;">ServiceCommunity</li>
</ul>
<h3 style="text-align: left;">
Screenshot</h3>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbCbCvsnKUeMxA4oZHe5rwKTXxvuHEdy5sGHJLsdVpxn1ttfk0iOdkMkKKfdfBF7ah0qbQV3y8IHisGCqueBbT-ZhEr5za1FKJ8WFsrWVSKSPfhohKnzuBgV5E5FHH18B8utQCRJNqOLs/s1600/Screen+Shot+2015-04-19+at+4.25.23+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbCbCvsnKUeMxA4oZHe5rwKTXxvuHEdy5sGHJLsdVpxn1ttfk0iOdkMkKKfdfBF7ah0qbQV3y8IHisGCqueBbT-ZhEr5za1FKJ8WFsrWVSKSPfhohKnzuBgV5E5FHH18B8utQCRJNqOLs/s1600/Screen+Shot+2015-04-19+at+4.25.23+pm.png" height="612" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Github / Installation </h3>
<div>
<a href="https://www.blogger.com/goog_2043671962"><br /></a></div>
<div class="lead alert alert-warning">
<a href="https://github.com/Avinava/custom-rtf">https://github.com/Avinava/custom-rtf</a></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br /></div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com3tag:blogger.com,1999:blog-2434290243241406364.post-51290552456987451802015-04-06T14:42:00.000+05:302015-04-06T14:44:20.911+05:30Trailhead <div dir="ltr" style="text-align: left;" trbidi="on">
Salesforce trailhead is here for a while, but I somehow avoided it , but finally decided into jumping into the same. There is whole big list of modules in there but the one that certainly draw me to itself was <b>Visualforce Mobile !</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDNjkFNquEsYQtSqtvbR1CdXhqB_SfHji6f_sKUKincrwuAff53T7Fa0Nz_YG9gRZJ78_neNnFm-aZlXk6xil_PrF2g2bO-5W6WpxkTQCBQkKfPiVHckmLhNluXLax_v7hM2hGlUQHZY/s1600/Screen+Shot+2015-04-06+at+2.17.56+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDNjkFNquEsYQtSqtvbR1CdXhqB_SfHji6f_sKUKincrwuAff53T7Fa0Nz_YG9gRZJ78_neNnFm-aZlXk6xil_PrF2g2bO-5W6WpxkTQCBQkKfPiVHckmLhNluXLax_v7hM2hGlUQHZY/s1600/Screen+Shot+2015-04-06+at+2.17.56+pm.png" height="179" width="640" /></a></div>
<b><br /></b>
<b><br /></b>
Trailhead really a fun way to learn stuff about platform, and really presents the concepts well.<br />
<br />
<br />
<h3 style="text-align: left;">
About the Visualforce Mobile Module</h3>
<div>
<br /></div>
<div>
This module takes you from Basic to advanced custom css to suite the look and feel of Salesforce1. It covers all of them !</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>A quick getting started</li>
<li>A quick small tour to using <a href="https://developer.salesforce.com/trailhead/visualforce_mobile_salesforce1/visualforce_mobile_salesforce1_nav_menu" target="_blank">Salesforce RemoteObjects</a> in visualforce pages.</li>
<li>Using global Actions</li>
<li>Talks a lot of bot Salesforce1 design and StyleGuide. Mainly focused about how to make your pages mobile </li>
<li>Also the <a href="https://github.com/joshbirk/onestarter" target="_blank">one-starter</a> library</li>
<li>And finally a bit about different JS libraries like AngularJS , Ionic and Bootstrap</li>
</ul>
<div>
<br /></div>
</div>
<h3 style="text-align: left;">
Why its important ?</h3>
<div>
<br /></div>
<div>
Well trailhead is really well compiled module, and I wish I had covered this a bit before ! I have already covered similar <a href="http://blogforce9.blogspot.in/2014/03/using-visualstrap-with-salesforce1-user.html" target="_blank">topics</a> in my past but it still looks fresh. At the end of the day on mobile UX does matters. A mobile user definately wants the information to be presented in a well organized manner. Something like<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6aObFeE_6XeJ3te30vTeARRQKfSJNXM3GIip9SNhux-33ez1m0Yaw8jpSw_GibTFw89j3wvUH0mDYSZG1ss0KJEKkN8dosrxG5_PatoKABkeHvGceDe398O2yedp7MlGPtGF9jP3-l0/s1600/Screenshot_2014-03-12-18-30-05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6aObFeE_6XeJ3te30vTeARRQKfSJNXM3GIip9SNhux-33ez1m0Yaw8jpSw_GibTFw89j3wvUH0mDYSZG1ss0KJEKkN8dosrxG5_PatoKABkeHvGceDe398O2yedp7MlGPtGF9jP3-l0/s1600/Screenshot_2014-03-12-18-30-05.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Trailhead was a really fun experience and awesome way to learn the Mobile Visualforce pages ! And hey there are lot many modules in there. Here are the few from my todo list</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmpEhPv5MjB_eDaZ401UIowgK6fPmsiZVM_YEE9Avs8Xrl9tfGxwd71txz2Y8Gbj6aLa0y3XqEwkh9oPHY_jjxbg67daAgHZDBLdTQnYrkM_BKbafm_OPL_ovIb-Gm8WH-lacE-KBI2JY/s1600/Screen+Shot+2015-04-06+at+2.37.49+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmpEhPv5MjB_eDaZ401UIowgK6fPmsiZVM_YEE9Avs8Xrl9tfGxwd71txz2Y8Gbj6aLa0y3XqEwkh9oPHY_jjxbg67daAgHZDBLdTQnYrkM_BKbafm_OPL_ovIb-Gm8WH-lacE-KBI2JY/s1600/Screen+Shot+2015-04-06+at+2.37.49+pm.png" height="90" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdl7IDmHIjvIphaPbcUVI8Gy-huX0TRtNW8GS1KZzlkTbqxledJS8XyjRWZ_jVJ4XDN2o5hjADwL_0aAPX3W4c5a2ShJxvQXK7OHsNdkswvhNUzUiIR-FLwSw7OVPoqkeZKzDawi2GdU/s1600/Screen+Shot+2015-04-06+at+2.38.04+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdl7IDmHIjvIphaPbcUVI8Gy-huX0TRtNW8GS1KZzlkTbqxledJS8XyjRWZ_jVJ4XDN2o5hjADwL_0aAPX3W4c5a2ShJxvQXK7OHsNdkswvhNUzUiIR-FLwSw7OVPoqkeZKzDawi2GdU/s1600/Screen+Shot+2015-04-06+at+2.38.04+pm.png" height="82" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi20DtcZffm0HU2UEbtyATwgkERLtk9PWU_oCoo3btofXDAucejIwHMKwZdt61B5ICAWqjWSKzZmQeDKSJTY33SpwfwPmLI8As5EoZwtRGa_Kl0mvZQD90rd6ryvhv8WQ3lOy2xJlHvQxg/s1600/Screen+Shot+2015-04-06+at+2.37.58+pm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi20DtcZffm0HU2UEbtyATwgkERLtk9PWU_oCoo3btofXDAucejIwHMKwZdt61B5ICAWqjWSKzZmQeDKSJTY33SpwfwPmLI8As5EoZwtRGa_Kl0mvZQD90rd6ryvhv8WQ3lOy2xJlHvQxg/s1600/Screen+Shot+2015-04-06+at+2.37.58+pm.png" height="81" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can read them all here </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="lead alert alert-warning" style="clear: both; text-align: left;">
https://developer.salesforce.com/trailhead/modules</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</div>
<b><br /></b>
<b><br /></b></div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com2tag:blogger.com,1999:blog-2434290243241406364.post-82607841198201193872015-04-03T17:00:00.001+05:302015-04-03T17:01:36.942+05:30Angular JS & SObject Remote : Part 1 Bringing Data to Page #NoControllers<div dir="ltr" style="text-align: left;" trbidi="on">
Finally back after long long time!<br />
<br />
I have been working with AngularJs for a while now and I find Angular to be really helpful to create stateless interactive pages and best part is you hardly need any Apex Controller for the same. Pages are fast, fluid and Mobile friendly (Salesforce 1).<br />
<br />
With time I have found the best ingredient to prepare your AngularJS page are<br />
<br />
<ul style="text-align: left;">
<li>AngularJS ( of course )</li>
<li><a href="https://github.com/TehNrd/sObject-Remote" target="_blank">SObject-Remote</a> (thanks to Jason Venable)</li>
<li>Bootstrap (not required)</li>
</ul>
<div>
<br /></div>
<div>
Lets start with a simple example.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Bringing data to the page</h3>
<div>
<br /></div>
<div>
This would be a pretty easy example where we will be using SObject-Remote to bring query data from Salesforce Accounts</div>
<div>
<br /></div>
<div>
<script src="https://gist.github.com/Avinava/8c0397d2e757352d1f08.js"></script>
</div>
<div>
<br />
<br />
<h3 style="text-align: left;">
The Catch</h3>
</div>
<div>
<ul style="text-align: left;">
<li>The area ng-controller marks the area which can access the $scope variable of that particular controller.</li>
<li>You can access variable inside $scope by using {{}}. If you have a variable $scope.accounts you can directly access that in page by doing {{accounts}}, just like regular merge field but a bit different syntax.</li>
<li>We have used $scope.$apply() , which generally tells angular to redraw the UI / View. Since remoting works async we need to notify the angular to redraw once we have the data by calling this method.</li>
</ul>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
End Result</h3>
<div>
Finally a stateless fluid page without any controllers.</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="lead alert alert-info">
<b>Demo :</b> <a href="https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemote">https://blogforce9dev-developer-edition.ap1.force.com/VFAngularSRemote</a></div>
</div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com14tag:blogger.com,1999:blog-2434290243241406364.post-17425698249259391852015-01-25T16:04:00.003+05:302015-01-25T16:09:26.947+05:30Visualforce RichText Area Component - Rerender vf pages containing rtf<div dir="ltr" style="text-align: left;" trbidi="on">
You might faced a challenged, atleast once while developing pages, where you need to rerender the page which contains a <apex:inputFile/> or an Rich Text area field <apex:textarea richtext="true"/> . There is no out of the box solution for this but there is alternative solution where you can implement a CKEditor to do so.<br />
<br />
<h3 style="text-align: left;">
How can I solve this ?</h3>
<div>
<br /></div>
<div>
I have been using ckeditor for quite sometime and eventually developed a vf component for myself called "<a href="https://github.com/Avinava/custom-rtf" target="_blank">customrtf</a>". Customrtf is based on salesforce's rich text implementation and borrows code from it. This is the very fist version of the component, and many other features will come eventually.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
What it does ?</h3>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Lets you convert a textarea into a richtext area</li>
<li>Allows re-rendering of the page</li>
</ul>
<div>
<br /></div>
</div>
<h3 style="text-align: left;">
How to use it ?</h3>
<div>
<br />
<script src="https://gist.github.com/Avinava/a41e89f74da3945dfa45.js"></script>
</div>
<div>
<br /></div>
<div class="well lead">
Installation & Demo : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Po0Yc">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Po0Yc</a><br />
Git : <a href="https://github.com/Avinava/custom-rtf">https://github.com/Avinava/custom-rtf</a><br />
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com10tag:blogger.com,1999:blog-2434290243241406364.post-60061538311558235212014-10-30T01:11:00.002+05:302014-10-30T01:11:58.205+05:30Introducing Visualstrap PDF Support!<div dir="ltr" style="text-align: left;" trbidi="on">
Finally after a really long dormant period, I have made quite a few changes in Visualstrap. Along with some minor changes, Visualstrap now works with PDF.<br />
<br />
<h3 style="text-align: left;">
Main Site</h3>
<br />
<div class="well lead">
<a href="http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapPdfComponentsIframe">http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapPdfComponentsIframe</a>
</div>
<br />
<h3 style="text-align: left;">
<b>How to use ?</b></h3>
<br />
Just set theme as "pdf" from <b><i>importvisualstrap</i></b> component and you are all set.<br />
<br />
<pre style="background-color: whitesmoke; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.428571429; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;"> <c:importvisualstrap theme="pdf" /></pre>
<br />
<br />
<h3 style="text-align: left;">
<b>Updated Packages</b></h3>
<br />
I have pushed the latest source code to git and unmanaged package will follow soon.<br />
However I am still waiting for a fix of <a href="https://success.salesforce.com/apex/issues_view?id=a1p30000000Sp4YAAS%C2%A0" target="_blank">https://success.salesforce.com/apex/issues_view?id=a1p30000000Sp4YAAS </a> to push update for the managed package<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjtn-KEsK7bpDDQ6dlCzC5j8t9gMPyRnyMUkgqvshtVR0JdQjua5foVwJiwpYbZBjBgeC7bXvZ6q0kEF9x-2wENVyHCF2GDrwsJcdkGQWKhPsNbsZpvbeT-MmmfyEGiO8IY7TaicYCIw/s1600/Screen+Shot+2014-10-30+at+12.58.35+am.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjtn-KEsK7bpDDQ6dlCzC5j8t9gMPyRnyMUkgqvshtVR0JdQjua5foVwJiwpYbZBjBgeC7bXvZ6q0kEF9x-2wENVyHCF2GDrwsJcdkGQWKhPsNbsZpvbeT-MmmfyEGiO8IY7TaicYCIw/s1600/Screen+Shot+2014-10-30+at+12.58.35+am.png" height="536" width="640" /></a></div>
<br />
<br />
<div class="well lead">
Demo : <a href="http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapPdfComponentsIframe">http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapPdfComponentsIframe</a><br />
Github : <a href="https://github.com/Avinava/VisualStrap">https://github.com/Avinava/VisualStrap</a></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com2tag:blogger.com,1999:blog-2434290243241406364.post-73112215154872421012014-10-21T16:34:00.000+05:302017-11-14T15:01:54.239+05:30Showing more than 1K records using PBE - Part 1 Remoting<div dir="ltr" style="text-align: left;" trbidi="on">
I have got this question several times from emails, to tweets and from lots of comments in blogs that "How can show more than 1000 records in table show that I can do more with <a href="https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3000000B4wn9EAB">PBE</a>". PBE does add a lot of client side features like sorting, export, pagination etc but totally rely on data on the page to make it work, it cannot bring data from controller. So we need to bring as much as data we can to the page but to do this we need to overcome the 1K limit of list on VF.<br />
<br />
<div class="alert alert-info">
If you haven't read about PBE (Pageblock table enhancer) you can read it <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M3zR" target="_blank">here</a></div>
<h3 style="text-align: left;">
So how can we overcome the 1K limit of list in VF pages ? </h3>
There are basically two ways<br />
<br />
<ul style="text-align: left;">
<li><b>JSRemoting</b> : Use remoting and templating library like JSRender to create a table and initialize PBE on the same. I did a small blog on something very similar where you can display records using <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Dshlu" target="_blank">Remote objects</a>, but for this we need to replace the data source from remoteobjects to remoting because 100records query limit</li>
<li><b>Using List<List<T>> : </b>This is complete VF approach where we try to replicate the structure of pageblock table using apex:repeats.</li>
</ul>
<div>
<br /></div>
<h3 style="text-align: left;">
JS Remoting</h3>
<div>
<br /></div>
<div>
<b>Pros</b></div>
<div>
<ul style="text-align: left;">
<li>Very fast and lightweight</li>
<li>Can bring upto 15mb data</li>
<li>No overhead of viewstate</li>
<li>Ideal for showing long list of data</li>
</ul>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
There is no better way to explain then jumping into the code.</div>
<div>
<script src="https://gist.github.com/Avinava/3787c1641a65b0b1a135.js"></script>
</div>
<br />
<br />
<h3 style="text-align: left;">
How it works ?</h3>
<div>
<br /></div>
<div>
<ol style="text-align: left;">
<li>The page loads and brings data using Remoting method "getContacts"</li>
<li>Once data is available the data is converted into HTML using JSrender and HTML template that is defined</li>
<li>After load we call the <span style="background-color: #f8f8f8; font-family: "courier new" , "courier" , "mono"; font-size: 12px;">initPageBlockTableEnhancerADV</span> method to init PageblockEnahncer which reinitializes the PBE</li>
</ol>
<div>
<br /></div>
</div>
<h3 style="text-align: left;">
Screenshot</h3>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv2fYzMvmEICYS1urR8J3ZpcUTs4HfExcMhd_-Kgoof8GifVBAkpt6QgdzvSwRQe__FZ2dfKIgyVrd42kluc0pMGM0Az-aqSBnQ3gWkzL4N3_DYImun6C0OPdy8K2oob-RgEsYIILE6II/s1600/Page+Editor+++PBE1KRemoting.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv2fYzMvmEICYS1urR8J3ZpcUTs4HfExcMhd_-Kgoof8GifVBAkpt6QgdzvSwRQe__FZ2dfKIgyVrd42kluc0pMGM0Az-aqSBnQ3gWkzL4N3_DYImun6C0OPdy8K2oob-RgEsYIILE6II/s1600/Page+Editor+++PBE1KRemoting.png" width="640" /></a></div>
<div>
<br /></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Demo</h3>
<div>
<br /></div>
<div class="well lead">
<a href="http://blogforce9dev-developer-edition.ap1.force.com/PBE1kRemoting">http://blogforce9dev-developer-edition.ap1.force.com/PBE1kRemoting</a></div>
<br />
<div class="alert alert-warning">
<a href="https://appexchange.salesforce.com/listingDetail?listingId=a0N3000000B4wn9EAB" target="_blank">Find PageblockEhancer on Appexchange by clicking on this link</a></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com2tag:blogger.com,1999:blog-2434290243241406364.post-586865513403721302014-08-17T01:00:00.001+05:302014-08-22T21:55:52.239+05:30Textscanner - A visualforce natural language reading component<div dir="ltr" style="text-align: left;" trbidi="on">
For quite sometime I have been playing with JS libraries and Visuaforce to build some useful UI components, Textscanner is one of the component that has emerged from the same experiment.<br />
<div>
<br /></div>
<h3 style="text-align: left;">
What is Textscanner ?</h3>
<div>
<br /></div>
<div>
Textscanner is Visualforce implementation of Knwl.js natural language reading library. You can read about the same here <a href="https://github.com/loadfive/Knwl.js">https://github.com/loadfive/Knwl.js</a> . What Texscanner does is wrap this nice little library with the help of visualforce components.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
What it can do ?</h3>
<div>
<br /></div>
<div>
Textscanner with the help of Knwl.js can scan through the passed text and can extract important information and spit them out in a nice little interface</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Phone Numbers </li>
<li>Links </li>
<li>Emotion </li>
<li>Date </li>
<li>Time </li>
<li>Email </li>
<li>Places </li>
<li>Hastags</li>
</ul>
<div>
<br /></div>
</div>
<h3 style="text-align: left;">
How to use it ?</h3>
<div>
The syntax is very simple, </div>
<br />
<div>
<script src="https://gist.github.com/Avinava/537cea58265724b0efc2.js"></script></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Example</h3>
<div>
Support Center / Call center executive has to interact with many customers daily and they really need to have the key information handy from a lengthy description. So solve this we can create an inline VF page CaseScanner in our case using TextScanner and include the same in Case Detail page layout.</div>
<div>
<br /></div>
<div>
<br /></div>
<script src="https://gist.github.com/Avinava/a2912ef5f6c4ea027075.js"></script>
<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pNIJxQoN2rop2cHY7am4NragwTibK5t29MOb1hyphenhyphencsKEMYpSLoTJqEloz-unPqk5PCG5HuUTIRtpYdP-WqeeEU2hInLOrQL47BYM-X5QDB6IEbBqAG7iZ7f7DpjUpUIofYQ3ThfZtspg/s1600/Screen+Shot+2014-08-17+at+12.53.49+am.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pNIJxQoN2rop2cHY7am4NragwTibK5t29MOb1hyphenhyphencsKEMYpSLoTJqEloz-unPqk5PCG5HuUTIRtpYdP-WqeeEU2hInLOrQL47BYM-X5QDB6IEbBqAG7iZ7f7DpjUpUIofYQ3ThfZtspg/s1600/Screen+Shot+2014-08-17+at+12.53.49+am.png" height="376" width="640" /></a></div>
<br /></div>
<h3>
</h3>
<h3>
Where can you use it ?</h3>
<div>
<ul style="text-align: left;">
<li>Extracting notes from lengthy text</li>
<li>Telephone transcripts</li>
<li>Case comments</li>
<li>Product Descriptions</li>
<li>Descriptions</li>
</ul>
</div>
<h3>
<div class="well well-sm">
Demo & Installation : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000HnPZV" style="font-weight: normal;">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000HnPZV</a></h3>
</div>
</div>Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com2tag:blogger.com,1999:blog-2434290243241406364.post-37240056696529048182014-06-13T00:44:00.000+05:302014-06-14T00:02:58.450+05:30Visualstrap : Using Modals in Visualforce Pages <div dir="ltr" style="text-align: left;" trbidi="on">
Modals are part of the Visualstrap from very beginning but I never talked much about them. Modals can be really help to enhance the user experience. They can let you do many things without going to and fro between pages.<br />
<div>
<br /></div>
<div>
In Salesforce, we are used to this type of arrangement. For example have a look at the "New" / "Edit" buttons, they will take you to a another page to accomplish the task. It feels a bit clunky. <br />
To make the experience fluid and fast these pages can be replaced with modals.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Scenario </h3>
<div>
Lets say we want a page where<br />
<ul style="text-align: left;">
<li>See all the cases</li>
<li>Create new cases</li>
</ul>
<div class="text-muted">
The page can be extended to close and update the cases as well</div>
</div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
Prerequisite </h3>
</div>
<div>
<ul style="text-align: left;">
<li><a href="https://appexchange.salesforce.com/listingDetail?listingId=a0N3000000B56AMEAZ" target="_blank">VisualStrap</a></li>
</ul>
</div>
<h3 style="text-align: left;">
The Page & Controller </h3>
<div>
The page and controller are pretty simple.</div>
<div>
<br />
<script src="https://gist.github.com/Avinava/80ce03745199408171ac.js"></script>
</div>
<div>
<br />
<h3 style="text-align: left;">
The Catch</h3>
</div>
<div>
<ul style="text-align: left;">
<li><b> Opening Modal :</b> Modal can be opened using JS or html attribute. In this demo we are using JS<br /><pre style="color: #333333; line-height: 16.25px;"><span style="color: #007700;"><a</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"btn btn-success btn-md"</span> <span style="color: #0000cc;">onclick=</span><span style="background-color: #fff0f0;">"$('#newCase').modal('show');return false;"</span><span style="color: #007700;">></span>New Case<span style="color: #007700;"></a></span>
</pre>
</li>
</ul>
<b>Closing the Modal Only when insert is success : </b>We cannot just close the Modal when the user presses the Save button because there can be validation errors/required fields missing etc. To control this we are using a controller variable "isSuccess". We are setting it to true only if the transaction was success and based on the variable value we are calling the modal hide on the page.<br />
<br />
<b>Controller : </b>This method sets the isSuccess flag to true only when the records is saved successfully.<br />
<pre style="color: #333333; line-height: 16.25px;"><span style="color: #008800; font-weight: bold;"> public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">saveCase</span>(){
<span style="color: #008800; font-weight: bold;">try</span>{
insert caseObj;
init();
isSuccess = <span style="color: #008800; font-weight: bold;">true</span>;
}
<span style="color: #008800; font-weight: bold;">catch</span>(Exception ex){
Apexpages.<span style="color: #0000cc;">addMessages</span>(ex);
isSuccess = <span style="color: #008800; font-weight: bold;">false</span>;
}
}</pre>
<br />
<b>Page : </b>The below section only renders when isSuccess is true ( and lets the page to close only when the save was success )<br />
<br />
<pre style="color: #333333; line-height: 16.25px; text-align: left;"><span style="color: #007700;"><apex:outputPanel</span> <span style="color: #0000cc;">rendered=</span><span style="background-color: #fff0f0;">"{!isSuccess}"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><script></span>
$(<span style="background-color: #fff0f0;">'#newCase'</span>).modal(<span style="background-color: #fff0f0;">'hide'</span>);
<span style="color: #007700;"></script></span>
<span style="color: #007700;"></apex:outputPanel></span></pre>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-SXuApJLqM-c/U5iqiRuRMEI/AAAAAAAAAeI/CZrIsJcseHI/s1600/salesforce.com+++Developer+Edition.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-SXuApJLqM-c/U5iqiRuRMEI/AAAAAAAAAeI/CZrIsJcseHI/s1600/salesforce.com+++Developer+Edition.png" height="338" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">VSModal in action</td></tr>
</tbody></table>
<br />
<br />
<br />
Below is the live demo of the page, you are welcome to try creating some cases for me :)<br />
<div class="alert alert-info">
<h3>
Demo Page : <a href="http://blogforce9dev-developer-edition.ap1.force.com/VSModals">http://blogforce9dev-developer-edition.ap1.force.com/VSModals</a></h3>
</div>
</div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com8tag:blogger.com,1999:blog-2434290243241406364.post-915086280980715262014-06-07T17:57:00.001+05:302014-06-14T01:09:29.938+05:30Using Salesforce RemoteObjects with JSRender : Create a stateless Table<div dir="ltr" style="text-align: left;" trbidi="on">
Salesforce has just released RemoteObjects and its really promising. You can now do lot more by just writing a page and without any need of a controller.<br />
<div>
<br /></div>
<div>
RemoteObjects now lets you do DML, Query etc just using the Javascript and to add they are not even counted against the limit. Lets see how can we use the same to create a stateless Pageblock table.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Ingredients </h3>
<div>
<ul style="text-align: left;">
<li><b>Jquery</b> : For DOM Manipulation</li>
<li><b>JSRender</b> : For templating</li>
<li>Some styling</li>
</ul>
<div>
<br /></div>
</div>
<h3 style="text-align: left;">
Jquery</h3>
<div>
Jquery is a very popular DOM manipulation library and if you are into JS you probably don't need any introduction of the same. Jquery in this DEMO does the job of DOM manipulation like picking up templates, changing DOM etc.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
JSRender</h3>
<div>
JSRender is not so popular templating engine which is successor of JQuery Templates. Lot of things have changed from JQuery Templates and they are now much more easier to use than ever. I have been preferring JSRender because they need very less code and are easier to use and understand.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Styling</h3>
<div>
To give our table a familiar look of PageBlockTable we will have to borrow some styling for Salesforce.</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-iFQUYrPpli8/U5MBnhqWL3I/AAAAAAAAAdU/8zcXUj-JpI0/s1600/Screen+Shot+2014-06-07+at+5.41.51+pm.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://3.bp.blogspot.com/-iFQUYrPpli8/U5MBnhqWL3I/AAAAAAAAAdU/8zcXUj-JpI0/s1600/Screen+Shot+2014-06-07+at+5.41.51+pm.png" height="168" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Styling from Salesforce</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
The Page</h3>
<br />
<div>
<script src="https://gist.github.com/Avinava/59549b750c35cb17aa2d.js"></script>
</div>
<div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpynwLqoR28NGeXYgsbwGu6y5kZbHkr40B18_ezh_U6WiTss8nWbt4qBIAzcq49c2ZiRViFfp5mRLqpkTRwHcrioWwP8-hEk9jYKX71r-Og9EHdYysYO_WL0-DdNycmVJLvrf7ZB7IVk0/s1600/Page+Editor+++RemoteObjects.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpynwLqoR28NGeXYgsbwGu6y5kZbHkr40B18_ezh_U6WiTss8nWbt4qBIAzcq49c2ZiRViFfp5mRLqpkTRwHcrioWwP8-hEk9jYKX71r-Og9EHdYysYO_WL0-DdNycmVJLvrf7ZB7IVk0/s1600/Page+Editor+++RemoteObjects.png" height="202" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The end result</td></tr>
</tbody></table>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Whats Advantage ?</h3>
<div>
<ul style="text-align: left;">
<li><b>Almost zero viewstate</b></li>
<li>Pretty fast loading time and refresh</li>
<li>Suitable for mobiles and large pages</li>
</ul>
</div>
<br /></div>
<div>
<br /></div>
<div class="well lead">
Project Link & Live Demo :<a href="https://www.blogger.com/%C2%A0http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Dshlu" target="_blank"> http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Dshlu</a></div>
<div>
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com0tag:blogger.com,1999:blog-2434290243241406364.post-6845110046496899342014-05-19T17:34:00.002+05:302014-06-10T18:39:40.647+05:30Visualstrap : New Site !<div dir="ltr" style="text-align: left;" trbidi="on">
Well this weekend something surprising happened, Visualstrap crossed 1000 install limit (inlcuding appexchange & from my blog). I am really excited and happy that people are finding this small little package useful. Thanks for all the support !<br />
<br />
So to make this package more delightful and easy to learn, I have redesigned the Visualstrap site to include all the documents and instruction at one place.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcPOnYRUOWRJQpT5K8K9O0nkYRo9tXF6rK_8ARc-8Q_eTQWR24Kp0Zvb7O7lbC6TQ2P1mxLzg1LzpFJD3vCVqoFtM7UFqPkMxRveRbGTM1XcPib7HpjJB6BGPC2abEGqDjI9rKxriZGY/s1600/salesforce.com+++Developer+Edition.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcPOnYRUOWRJQpT5K8K9O0nkYRo9tXF6rK_8ARc-8Q_eTQWR24Kp0Zvb7O7lbC6TQ2P1mxLzg1LzpFJD3vCVqoFtM7UFqPkMxRveRbGTM1XcPib7HpjJB6BGPC2abEGqDjI9rKxriZGY/s1600/salesforce.com+++Developer+Edition.png" height="320" width="640" /></a></div>
<br />
<br />
This site itself is an example of how you can create a good custom ui inside salesforce. I am still working on making the site better and putting all the documentation at one place. Thanks for all the support and love!<br />
<br />
<div class="well lead">
Visualstrap Site link : <a href="http://visualstrap-developer-edition.ap1.force.com/" target="_blank">http://visualstrap-developer-edition.ap1.force.com</a>
<br />
VisualStrap Project Link : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61</a>
</div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com4tag:blogger.com,1999:blog-2434290243241406364.post-44082875108803223262014-05-17T10:26:00.000+05:302014-05-20T19:56:32.004+05:30Salesforce Login : Access Salesforce without Access Codes<div dir="ltr" style="text-align: left;" trbidi="on">
This is quick little post on how to create a force.com site/page to access Salesforce even if you don't have the access codes and to some extent to create your own custom login screen. Generally helpful when same login is shared by multiple user.<br />
<br />
<div class="alert alert-info">
There are already apps like Trapdoor for mac that lets you do the same, but this one just an cloud version of the same and of course you can build one for yourself!
</div>
<br />
<h3 style="text-align: left;">
What you need to make this work ?</h3>
<div>
<ul style="text-align: left;">
<li>Username and Password</li>
<li>The security token</li>
</ul>
<h3 style="text-align: left;">
How this works ?</h3>
</div>
<div>
<ul style="text-align: left;">
<li>The username & password entered are used to make a SOAP call to Salesforce using the partner Endpoint</li>
<li>The response is parsed to retrieve the SessionId and Salesforce Server URL</li>
<li>Using the ServerURL and SessionId the user is redirected to "frontdoor.jsp" page of Salesforce which lets user log into Salesforce using session Id.</li>
</ul>
<div>
<br /></div>
<div class="alert alert-info">
<div style="text-align: center;">
This page can be hosted in any org and not necessarily in the org you are trying to log in</div>
</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxUpKwVmQ4rJ1Isv0piHroMivb4l6fjiD_jB2NTgbTRXZ0FYBlCJ4-65SAALqQNSrztQ8233xBrI9ANdPWCb-m3x9XFWDJHFJQmQua2a-_s9pgNWLCg6ggwdJ12xAuOWO1O6hD_08Gv4/s1600/Page+Editor+++SalesforceLogin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxUpKwVmQ4rJ1Isv0piHroMivb4l6fjiD_jB2NTgbTRXZ0FYBlCJ4-65SAALqQNSrztQ8233xBrI9ANdPWCb-m3x9XFWDJHFJQmQua2a-_s9pgNWLCg6ggwdJ12xAuOWO1O6hD_08Gv4/s1600/Page+Editor+++SalesforceLogin.png" height="337" width="640" /></a></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Code </h3>
</div>
</div>
<h4 style="text-align: left;">
Page</h4>
<div>
The Page uses <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">Visualstrap</a> to create a custom login screen. Same can be installed from <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">here</a> . And you can always copy the page code to create your own custom login screen for salesforce :)</div>
<div>
<br /></div>
<div>
<pre style="color: #333333; line-height: 16.25px;"><pre><span style="color: #007700;"><apex:page</span> <span style="color: #0000cc;">controller=</span><span style="background-color: #fff0f0;">"SalesforceLogin_Con"</span> <span style="color: #0000cc;">showHeader=</span><span style="background-color: #fff0f0;">"false"</span> <span style="color: #0000cc;">docType=</span><span style="background-color: #fff0f0;">"html-5.0"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><style></span>
<span style="color: #007700;">body</span>{
<span style="color: #008800; font-weight: bold;">font-family</span>: <span style="background-color: #fff0f0;">"Helvetica Neue"</span>, Helvetica, Arial, <span style="color: #008800; font-weight: bold;">sans-serif</span>;
<span style="color: #008800; font-weight: bold;">background</span>: <span style="color: #6600ee; font-weight: bold;">#344A5F</span>;
}
<span style="color: #bb0066; font-weight: bold;">.logo</span>{
<span style="color: #008800; font-weight: bold;">text-align</span>:<span style="color: #008800; font-weight: bold;">center</span>;
<span style="color: #008800; font-weight: bold;">height</span>:<span style="color: #6600ee; font-weight: bold;">44px</span>;
<span style="color: #008800; font-weight: bold;">width</span>:<span style="color: #6600ee; font-weight: bold;">44px</span>;
<span style="color: #008800; font-weight: bold;">margin</span>: <span style="color: #008800; font-weight: bold;">auto</span>;
<span style="color: #008800; font-weight: bold;">background-color</span>: <span style="color: #6600ee; font-weight: bold;">#2A94D6</span>;
<span style="color: #008800; font-weight: bold;">padding-top</span>:<span style="color: #6600ee; font-weight: bold;">8px</span>;
<span style="color: #008800; font-weight: bold;">border</span>-radius:<span style="color: #6600ee; font-weight: bold;">8px</span>;
<span style="color: #008800; font-weight: bold;">font-size</span>:<span style="color: #6600ee; font-weight: bold;">200</span>%;
<span style="color: #008800; font-weight: bold;">color</span>:<span style="color: #007020;">white</span>;
<span style="color: #008800; font-weight: bold;">display</span>:<span style="color: #008800; font-weight: bold;">inline</span>-<span style="color: #008800; font-weight: bold;">block</span>;
<span style="color: #008800; font-weight: bold;">font-weight</span>:<span style="color: #008800; font-weight: bold;">bold</span>;
}
<span style="color: #bb0066; font-weight: bold;">.logoTxt</span>{
<span style="color: #008800; font-weight: bold;">margin-left</span>:<span style="color: #6600ee; font-weight: bold;">10px</span>;
<span style="color: #008800; font-weight: bold;">font-weight</span>:<span style="color: #008800; font-weight: bold;">bold</span>;
<span style="color: #008800; font-weight: bold;">color</span>:<span style="color: #6600ee; font-weight: bold;">#8199af</span>;
<span style="color: #008800; font-weight: bold;">display</span>:<span style="color: #008800; font-weight: bold;">inline</span>-<span style="color: #008800; font-weight: bold;">block</span>;
}
<span style="color: #bb0066; font-weight: bold;">.spcl</span>{
<span style="color: #008800; font-weight: bold;">color</span>:<span style="color: #6600ee; font-weight: bold;">#1abc9c</span> <span style="color: #557799;">!important</span>;
<span style="color: #008800; font-weight: bold;">padding-bottom</span>:-<span style="color: #6600ee; font-weight: bold;">20px</span>;
<span style="color: #008800; font-weight: bold;">margin-bottom</span>:<span style="color: #6600ee; font-weight: bold;">0px</span> <span style="color: #557799;">!important</span>;
}
<span style="color: #007700;">label</span>{
<span style="color: #008800; font-weight: bold;">font-size</span>:<span style="color: #6600ee; font-weight: bold;">130</span>%;
}
<span style="color: #bb0066; font-weight: bold;">.msgIcon</span>{<span style="color: #008800; font-weight: bold;">display</span>:<span style="color: #008800; font-weight: bold;">none</span>}
<span style="color: #bb0066; font-weight: bold;">.messageText</span> <span style="color: #007700;">h4</span>{<span style="color: #008800; font-weight: bold;">display</span>:<span style="color: #008800; font-weight: bold;">none</span>}
<span style="color: #007700;"></style></span>
<span style="color: #007700;"><vs:importvisualstrap</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><apex:form</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><vs:visualstrapblock</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><c:navbar</span> <span style="color: #0000cc;">brand=</span><span style="background-color: #fff0f0;">"Blogforce9"</span> <span style="color: #0000cc;">logo=</span><span style="background-color: #fff0f0;">"http://blogforce9dev-developer-edition.ap1.force.com/resource/1385742741000/BlogForce9__BlogForce9WhiteLogo"</span> <span style="color: #0000cc;">inverse=</span><span style="background-color: #fff0f0;">"true"</span> <span style="color: #0000cc;">type=</span><span style="background-color: #fff0f0;">"fixed-top"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><a</span> <span style="color: #0000cc;">href=</span><span style="background-color: #fff0f0;">"http://blogforce9.blogspot.in/"</span> <span style="color: #0000cc;">target=</span><span style="background-color: #fff0f0;">"_blank"</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"btn btn-primary btn-danger"</span><span style="color: #007700;">><vs:glyph</span> <span style="color: #0000cc;">icon=</span><span style="background-color: #fff0f0;">"home"</span><span style="color: #007700;">/></span> Home<span style="color: #007700;"></a></span>
<span style="color: #007700;"></c:navbar></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"container"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><apex:outputPanel</span> <span style="color: #0000cc;">layout=</span><span style="background-color: #fff0f0;">"block"</span> <span style="color: #0000cc;">styleClass=</span><span style="background-color: #fff0f0;">"row"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"col-md-6 col-md-offset-3"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"jumbotron spcl"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><vs:panel</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">style=</span><span style="background-color: #fff0f0;">"margin-bottom:10px"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"logo"</span><span style="color: #007700;">></span>S<span style="color: #007700;"></div></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"logoTxt"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">style=</span><span style="background-color: #fff0f0;">"font-size:150%;"</span><span style="color: #007700;">></span>Salesforce Login<span style="color: #007700;"></div></span>
<span style="color: #007700;"><small</span> <span style="color: #0000cc;">style=</span><span style="background-color: #fff0f0;">"font-weight:normal"</span><span style="color: #007700;">></span>Login to Salesforce using Security token to avoid Access Code emails<span style="color: #007700;"></small></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></vs:panel></span>
<span style="color: #007700;"><vs:panel</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:pageMessages</span> <span style="color: #007700;">></apex:pageMessages></span>
<span style="color: #007700;"><vs:formblock</span> <span style="color: #0000cc;">alignment=</span><span style="background-color: #fff0f0;">"horizontal"</span> <span style="color: #0000cc;">style=</span><span style="background-color: #fff0f0;">"margin-top:5px;padding:10px"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><vs:formgroup</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:outputLabel</span> <span style="color: #007700;">></span>Username<span style="color: #007700;"></apex:outputLabel></span>
<span style="color: #007700;"><apex:inputText</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"{!Username}"</span> <span style="color: #0000cc;">styleClass=</span><span style="background-color: #fff0f0;">"form-control"</span> <span style="color: #0000cc;">required=</span><span style="background-color: #fff0f0;">"true"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></vs:formgroup></span>
<span style="color: #007700;"><vs:formgroup</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:outputLabel</span> <span style="color: #007700;">></span>Password + Security Token<span style="color: #007700;"></apex:outputLabel></span>
<span style="color: #007700;"><apex:inputSecret</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"{!Password}"</span> <span style="color: #0000cc;">styleClass=</span><span style="background-color: #fff0f0;">"form-control"</span> <span style="color: #0000cc;">required=</span><span style="background-color: #fff0f0;">"true"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></vs:formgroup></span>
<span style="color: #007700;"><vs:formgroup</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:outputLabel</span> <span style="color: #007700;">></span>Domain<span style="color: #007700;"></apex:outputLabel></span>
<span style="color: #007700;"><apex:selectList</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"{!domain}"</span> <span style="color: #0000cc;">styleClass=</span><span style="background-color: #fff0f0;">"form-control"</span> <span style="color: #0000cc;">size=</span><span style="background-color: #fff0f0;">"1"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><apex:selectOption</span> <span style="color: #0000cc;">itemValue=</span><span style="background-color: #fff0f0;">"login"</span> <span style="color: #0000cc;">itemLabel=</span><span style="background-color: #fff0f0;">"login"</span><span style="color: #007700;">></apex:selectOption></span>
<span style="color: #007700;"><apex:selectOption</span> <span style="color: #0000cc;">itemValue=</span><span style="background-color: #fff0f0;">"test"</span> <span style="color: #0000cc;">itemLabel=</span><span style="background-color: #fff0f0;">"test"</span><span style="color: #007700;">></apex:selectOption></span>
<span style="color: #007700;"></apex:selectList></span>
<span style="color: #007700;"></vs:formgroup></span>
<span style="color: #007700;"><vs:formgroup</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:commandButton</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"Login"</span> <span style="color: #0000cc;">action=</span><span style="background-color: #fff0f0;">"{!doLogin}"</span> <span style="color: #0000cc;">styleClass=</span><span style="background-color: #fff0f0;">"btn btn-success btn-md pull-right"</span> <span style="color: #0000cc;">style=</span><span style="background-color: #fff0f0;">"width:200px"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></vs:formgroup></span>
<span style="color: #007700;"><small</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"text-info"</span><span style="color: #007700;">></span>*Passwords are not saved by this page<span style="color: #007700;"></small></span>
<span style="color: #007700;"></vs:formblock></span>
<span style="color: #007700;"></vs:panel></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></apex:outputPanel></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"><c:navbar</span> <span style="color: #0000cc;">brand=</span><span style="background-color: #fff0f0;">"Blogforce9"</span> <span style="color: #0000cc;">inverse=</span><span style="background-color: #fff0f0;">"true"</span> <span style="color: #0000cc;">type=</span><span style="background-color: #fff0f0;">"fixed-bottom"</span> <span style="color: #0000cc;">layout=</span><span style="background-color: #fff0f0;">"none"</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"text-muted"</span> <span style="color: #0000cc;">style=</span><span style="background-color: #fff0f0;">"margin:10px;font-size:130%;text-align:Center"</span> <span style="color: #0000cc;">layout=</span><span style="background-color: #fff0f0;">"block"</span><span style="color: #007700;">></span>
Site built with <span style="color: #007700;"><a</span> <span style="color: #0000cc;">href=</span><span style="background-color: #fff0f0;">"http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61"</span> <span style="color: #0000cc;">target=</span><span style="background-color: #fff0f0;">"_blank"</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"btn btn-sm btn-danger"</span><span style="color: #007700;">><vs:glyph</span> <span style="color: #0000cc;">icon=</span><span style="background-color: #fff0f0;">"heart"</span><span style="color: #007700;">/></span> VisualStrap<span style="color: #007700;"></a></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></c:navbar></span>
<span style="color: #007700;"></vs:visualstrapblock></span>
<span style="color: #007700;"></apex:form></span>
<span style="color: #007700;"></apex:page></span></pre>
</pre>
<pre style="color: #333333; line-height: 16.25px;"></pre>
</div>
<h4 style="text-align: left;">
Controller</h4>
<div>
<pre style="color: #333333; line-height: 16.25px;"><span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">SalesforceLogin_Con</span> {
<span style="color: #008800; font-weight: bold;">public</span> String username{get;set;}
<span style="color: #008800; font-weight: bold;">public</span> String password{get;set;}
<span style="color: #008800; font-weight: bold;">public</span> String domain{get;set;}
<span style="color: #008800; font-weight: bold;">public</span> Pagereference <span style="color: #0066bb; font-weight: bold;">doLogin</span>(){
Pagereference loginReference;
<span style="color: #008800; font-weight: bold;">try</span>{
String loginRes = sendLoginRequest(username,password,domain);
<span style="color: #008800; font-weight: bold;">if</span>(!String.<span style="color: #0000cc;">isBlank</span>(loginRes) && !loginRes.<span style="color: #0000cc;">containsIgnoreCase</span>(<span style="background-color: #ffaaaa; color: red;">'</span>INVALID_LOGIN<span style="background-color: #ffaaaa; color: red;">'</span>)){
Dom.<span style="color: #0000cc;">Document</span> loginDoc = <span style="color: #008800; font-weight: bold;">new</span> Dom.<span style="color: #0000cc;">Document</span>();
loginDoc.<span style="color: #0000cc;">load</span>(loginRes);
Dom.<span style="color: #0000cc;">XmlNode</span> resultElmt = loginDoc.<span style="color: #0000cc;">getRootElement</span>()
.<span style="color: #0000cc;">getChildElement</span>(<span style="background-color: #ffaaaa; color: red;">'</span>Body<span style="color: #0044dd;">','</span><span style="color: #997700; font-weight: bold;">http:</span><span style="color: #888888;">//schemas.xmlsoap.org/soap/envelope/')</span>
.<span style="color: #0000cc;">getChildElement</span>(<span style="background-color: #ffaaaa; color: red;">'</span>loginResponse<span style="color: #0044dd;">','</span><span style="color: #997700; font-weight: bold;">urn:</span>partner.<span style="color: #0000cc;">soap</span>.<span style="color: #0000cc;">sforce</span>.<span style="color: #0000cc;">com</span><span style="background-color: #ffaaaa; color: red;">'</span>)
.<span style="color: #0000cc;">getChildElement</span>(<span style="background-color: #ffaaaa; color: red;">'</span>result<span style="color: #0044dd;">','</span><span style="color: #997700; font-weight: bold;">urn:</span>partner.<span style="color: #0000cc;">soap</span>.<span style="color: #0000cc;">sforce</span>.<span style="color: #0000cc;">com</span><span style="background-color: #ffaaaa; color: red;">'</span>);
<span style="color: #888888;">/*Extract the session Id and Server url*/</span>
String serverurl = resultElmt.<span style="color: #0000cc;">getChildElement</span>(<span style="background-color: #ffaaaa; color: red;">'</span>serverUrl<span style="color: #0044dd;">','</span><span style="color: #997700; font-weight: bold;">urn:</span>partner.<span style="color: #0000cc;">soap</span>.<span style="color: #0000cc;">sforce</span>.<span style="color: #0000cc;">com</span><span style="background-color: #ffaaaa; color: red;">'</span>).<span style="color: #0000cc;">getText</span>().<span style="color: #0000cc;">split</span>(<span style="background-color: #ffaaaa; color: red;">'</span>/services<span style="background-color: #ffaaaa; color: red;">'</span>)[<span style="color: #0000dd; font-weight: bold;">0</span>];
String sessionId = resultElmt.<span style="color: #0000cc;">getChildElement</span>(<span style="background-color: #ffaaaa; color: red;">'</span>sessionId<span style="color: #0044dd;">','</span><span style="color: #997700; font-weight: bold;">urn:</span>partner.<span style="color: #0000cc;">soap</span>.<span style="color: #0000cc;">sforce</span>.<span style="color: #0000cc;">com</span><span style="background-color: #ffaaaa; color: red;">'</span>).<span style="color: #0000cc;">getText</span>();
<span style="color: #888888;">/*Use frontdoor.jsp to login to salesforce*/</span>
loginReference = <span style="color: #008800; font-weight: bold;">new</span> Pagereference(serverurl+<span style="background-color: #ffaaaa; color: red;">'</span>/secur/frontdoor.<span style="color: #0000cc;">jsp</span>?sid=<span style="background-color: #ffaaaa; color: red;">'</span>+sessionId);
}
<span style="color: #008800; font-weight: bold;">else</span>{
Apexpages.<span style="color: #0000cc;">addMessage</span>(<span style="color: #008800; font-weight: bold;">new</span> ApexPages.<span style="color: #0000cc;">Message</span>(ApexPages.<span style="color: #0000cc;">Severity</span>.<span style="color: #0000cc;">ERROR</span>,<span style="background-color: #ffaaaa; color: red;">'</span>Please check your Username and Password.<span style="background-color: #ffaaaa; color: red;">'</span>));
}
}
<span style="color: #008800; font-weight: bold;">catch</span>(Exception ex){
Apexpages.<span style="color: #0000cc;">addMessages</span>(ex);
}
<span style="color: #008800; font-weight: bold;">return</span> loginReference;
}
<span style="color: #888888;">/*Method to send login request using using SOAP*/</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">static</span> String <span style="color: #0066bb; font-weight: bold;">sendLoginRequest</span>(String un,String pw,String domain){
HttpRequest request = <span style="color: #008800; font-weight: bold;">new</span> HttpRequest();
request.<span style="color: #0000cc;">setEndpoint</span>(<span style="background-color: #ffaaaa; color: red;">'</span><span style="color: #997700; font-weight: bold;">https:</span><span style="color: #888888;">//' + domain + '.salesforce.com/services/Soap/u/30.0');</span>
request.<span style="color: #0000cc;">setMethod</span>(<span style="background-color: #ffaaaa; color: red;">'</span>POST<span style="background-color: #ffaaaa; color: red;">'</span>);
request.<span style="color: #0000cc;">setHeader</span>(<span style="background-color: #ffaaaa; color: red;">'</span>Content-Type<span style="background-color: #ffaaaa; color: red;">'</span>, <span style="background-color: #ffaaaa; color: red;">'</span>text/xml;charset=UTF-<span style="color: #0000dd; font-weight: bold;">8</span><span style="background-color: #ffaaaa; color: red;">'</span>);
request.<span style="color: #0000cc;">setHeader</span>(<span style="background-color: #ffaaaa; color: red;">'</span>SOAPAction<span style="background-color: #ffaaaa; color: red;">'</span>, <span style="background-color: #ffaaaa; color: red;">'</span><span style="background-color: #fff0f0;">""</span><span style="background-color: #ffaaaa; color: red;">'</span>);
request.<span style="color: #0000cc;">setBody</span>(<span style="background-color: #ffaaaa; color: red;">'</span><Envelope xmlns=<span style="background-color: #fff0f0;">"http://schemas.xmlsoap.org/soap/envelope/"</span>><Header/><Body><login xmlns=<span style="background-color: #fff0f0;">"urn:partner.soap.sforce.com"</span>><username><span style="background-color: #ffaaaa; color: red;">'</span> + un + <span style="background-color: #ffaaaa; color: red;">'</span></username><password><span style="background-color: #ffaaaa; color: red;">'</span> + pw + <span style="background-color: #ffaaaa; color: red;">'</span></password></login></Body></Envelope><span style="background-color: #ffaaaa; color: red;">'</span>);
Http h = <span style="color: #008800; font-weight: bold;">new</span> Http();
HttpResponse res = h.<span style="color: #0000cc;">send</span>(request);
<span style="color: #008800; font-weight: bold;">return</span> res.<span style="color: #0000cc;">getBody</span>();
}
}</pre>
</div>
<div>
<div>
This Code can further be Reused for
<div>
<ul style="text-align: left;">
<li>Generate SessionId to Call Salesforce REST Endpoints</li>
<li>Salesforce to Salesforce custom Integration</li>
<li>This page can be hosted in Force.com site as a Custom/Branded Salesforce Login</li>
</ul>
</div>
</div>
</div>
<div>
<br /></div>
<div>
<div class="well lead">
Working Demo : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DsAoo">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DsAoo</a></div>
</div>
</div>Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com5tag:blogger.com,1999:blog-2434290243241406364.post-40873640853011662662014-05-12T02:30:00.000+05:302014-05-12T19:51:35.695+05:30VFResumable : Resumable Visualforce Forms<div dir="ltr" style="text-align: left;" trbidi="on">
For a while I have been wondering how to build a Resumable form , which resumes the last tucked in values somehow. Earlier attempts of mine included storing the data somewhere in a Sobject so that they can be fetched back, but that seemed very cumbersome!<br />
<div>
<br /></div>
<div>
The other day I came across a JS plugin called <a href="http://garlicjs.org/" target="_blank">GarlicJS</a> and it looked very promising, and provided a better way to solve the above problem of retaining values. GarlicJS stores the values entered in the fields in local storage and whenever there is a page refresh it loads the values from the local storage. I took the JS plugin and wrapped it inside a VF component to create what I am calling as "VFResumable"</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h3 style="text-align: left;">
VFResumable : What it is ?</h3>
<div>
<br /></div>
<div>
VFResumable is a Visualforce component based on GarlicJS which helps to resume previously entered values. VFResumable provides some control over GarlicJS using wrapper methods and attributes.</div>
<div>
<br />
<br />
<h3 style="text-align: left;">
Features</h3>
</div>
<div>
<ul style="text-align: left;">
<li>Resumes the previously entered values, even in case of full <b>Page Refresh</b></li>
<li>Exposes enable and clear JS method to clear/enable resumable</li>
<li>Works with any VF page</li>
<li>GarlicJS automatically clears the stored values on form submit, in case you are using AJAX you may want to use the helper functions <b>clearVFResumable </b>and <b>initVFResumable</b></li>
</ul>
</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Attributes & JSFunctions</h3>
<div>
<ul style="text-align: left;">
<li>Attributes</li>
<ul>
<li><b>formid : </b>A comma seperated list of Ids of target apex form</li>
<li><b>importjquery :</b> Set this false incase you are already using Jquery in your pages</li>
<li><b>enable : </b>Set true if you want to enable the VFresumable as soon as page loads, set false to disable this, when false you may have to use js handler to enable VFResumable</li>
</ul>
<li>JSFunctions</li>
<ul>
<li><b>initVFResumable : </b>Call this JS function if you want to explicitly enable the VFResumable.</li>
<li><b>clearVFResumable : </b>Call this JS function if you want to clear the stored values. Generally should be called from oncomplete of a button/action function (assuming you want to store values if the record was not saved)</li>
</ul>
</ul>
<h3 style="text-align: left;">
Usage & Code</h3>
</div>
<div>
<br /></div>
<div class="well well-sm">
<pre style="color: #333333; line-height: 16.25px;"><span style="color: #007700;"><apex:page</span> <span style="color: #0000cc;">standardController=</span><span style="background-color: #fff0f0;">"Lead"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><apex:sectionHeader</span> <span style="color: #0000cc;">title=</span><span style="background-color: #fff0f0;">"VFResumable"</span> <span style="color: #0000cc;">subtitle=</span><span style="background-color: #fff0f0;">"Restore previous values using VFResumable"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><apex:form</span> <span style="color: #0000cc;">id=</span><span style="background-color: #fff0f0;">"myForm"</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:pageBlock</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:pageBlockButtons</span> <span style="color: #007700;">></span>
<span style="color: #888888;"><!-- Button to clear the resumable --></span>
<span style="color: #007700;"><apex:commandButton</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"Destroy"</span> <span style="color: #0000cc;">onclick=</span><span style="background-color: #fff0f0;">"clearVFResumable();return false;"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></apex:pageBlockButtons></span>
<span style="color: #007700;"><apex:pageBlockSection</span> <span style="color: #007700;">></span>
<span style="color: #007700;"><apex:inputField</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"{!Lead.FirstName}"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><apex:inputField</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"{!Lead.LastName}"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"><apex:inputField</span> <span style="color: #0000cc;">value=</span><span style="background-color: #fff0f0;">"{!Lead.MobilePhone}"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></apex:pageBlockSection></span>
<span style="color: #007700;"></apex:pageBlock></span>
<span style="color: #007700;"></apex:form></span>
<span style="color: #888888;"><!-- actual vf component --></span>
<span style="color: #007700;"><c:VFResumable</span> <span style="color: #0000cc;">formids=</span><span style="background-color: #fff0f0;">"myForm"</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></apex:page></span></pre>
</div>
<div class="well lead">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Installation / Demo & Project Link : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DrdXI">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DrdXI</a></h3>
</div>
<div>
</div>
</div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com0tag:blogger.com,1999:blog-2434290243241406364.post-71909950152062690532014-05-03T21:44:00.002+05:302014-05-03T21:56:59.059+05:30PDFAttacher - Attach Visualforce PDF Using Ajax Toolkit <div dir="ltr" style="text-align: left;" trbidi="on">
Working with VisualForce and JS always fascinates me, I am constantly trying to do things a bit differently, trying to use more JS on my pages. And here is something from the same stable.<br />
<br />
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
PDFAttacher - What it is ?</h3>
<div>
<br /></div>
<div>
Its a VF page that is capable to pull PDF from another VF page (rendered as PDF) and attach the same to a record as an attachment.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Whats so special about this ?</h3>
<div>
<br /></div>
<div>
Well pulling PDF from a VF source and attaching to a record can easily be done using apex, but PDFAttacher on the other side doesn't uses apex and solely depends upon JS and AJAX Toolkit.</div>
<div>
<ul style="text-align: left;">
<li><b>No Apex Solution :</b> Makes it possible to run in orgs that doesn't have access to APEX but they have access to API and VF. Its really very helpful for those orgs as it gives you ability to easily attach a Dynamically generated PDF.</li>
<li><b>Configurable & Reusable : </b>Page run on some of the easily configurable parameters, that can be changed to attach attachments to different Parent Records and even Objects.</li>
</ul>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
URL Parameters</h3>
</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li><b>pdfSrcUrl : </b>VF page url from where the PDF needs to be extracted</li>
<li><b>pid</b> : Parent record Id where the attachment needs to be attached</li>
<li><b>pdfName : </b>Filename to be used to save the PDF</li>
<li><b>retUrl : </b>URL where browser needs to be redirected on successful generation of PDF</li>
</ul>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Other Configurations </h3>
</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Make sure Developer Footer is off.</li>
<li>Make sure the Source VF page is rendered as <b>PDF.</b></li>
<li><b>API access is needed</b></li>
</ul>
<div>
<b><br /></b>
<br />
<h3 style="text-align: left;">
<b>How to use ?</b></h3>
<div>
<b><br /></b></div>
<div>
Create a Button on a Object and set the URL as described in the "URL Parameters" section.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-xl-Zbc5EfFM/U2UX4UZCrYI/AAAAAAAAAY0/KaH3dVxjQZk/s1600/Project+Custom+Button+or+Link++New+Button+or+Link+++salesforce.com+++Developer+Edition.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-xl-Zbc5EfFM/U2UX4UZCrYI/AAAAAAAAAY0/KaH3dVxjQZk/s1600/Project+Custom+Button+or+Link++New+Button+or+Link+++salesforce.com+++Developer+Edition.png" height="317" width="400" /></a></div>
<div>
<br /></div>
<b><br /></b></div>
</div>
<h3 style="text-align: left;">
<b>Sample URL </b></h3>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div class="well">
<b><span style="color: #0c343d;">https://blogforce9.ap1.visual.force.com/apex/PDFAttacher?pdfSrcUrl=https://blogforce9.ap1.visual.force.com/apex/TestPageB&pid=</span></b>{!Account.Id}<b><span style="color: #0c343d;">&pdfName=PDFAttacherTest.pdf&retUrl=/</span></b>{!Account.Id}<br />
<b><br /></b>
<br />
<ul style="text-align: left;">
<li><b>Source PDF is : </b>https://blogforce9.ap1.visual.force.com/apex/TestPageB</li>
<li><b>Parent Record Id : </b>{!Account.Id}</li>
<li><b>Generated File Name</b> : PDFAttacherTest.pdf</li>
<li><b>Return URL : </b>/{!Account.Id}</li>
</ul>
</div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<h3 style="text-align: left;">
<b>Code </b></h3>
<div>
<b><br /></b></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><apex:page >
<apex:includeScript value="../../soap/ajax/29.0/connection.js" />
<script>
/*Mehtod to upload attachment to a parent record*/
function uploadAttachment(filecontent, filename, filetype, parentId) {
var attachment = new sforce.SObject('Attachment');
attachment.Name = filename;
attachment.IsPrivate = false;
attachment.ContentType = filetype;
attachment.Body = filecontent;
attachment.Description = filename;
attachment.ParentId = parentId;
var result = sforce.connection.create([attachment]);
if(!result[0].getBoolean("success")){
alert('PDF download failed.');
}
else if({!$CurrentPage.parameters.retUrl != NULL}){
window.location.href = '/{!$CurrentPage.parameters.retUrl}';
}
}
/*Method to convert the attachment to base64 and attach the same to a record*/
function reqListener () {
var reader = new window.FileReader();
reader.readAsDataURL(this.response);
reader.onloadend = function() {
base64data = reader.result.replace('data:application/pdf;base64,','');
if(base64data.indexOf('text/html') == -1){
uploadAttachment(base64data,'{!$CurrentPage.parameters.pdfName}','application/pdf','{!$CurrentPage.parameters.pid}');
}
else{
alert('Please check the PDF source URL.');
}
}
}
/*Method to request the PDF and retreive the BLOB*/
function loadPDF(){
sforce.connection.sessionId = '{!$Api.Session_ID}';
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.responseType='blob'
oReq.open("get", "{!$CurrentPage.parameters.pdfSrcUrl}", true);
oReq.send();
}
</script>
<apex:outputPanel rendered="{!($CurrentPage.parameters.pdfSrcUrl != NULL && $CurrentPage.parameters.pid != NULL && $CurrentPage.parameters.pdfName != NULL)}">
<script>
loadPDF();
</script>
</apex:outputPanel>
</apex:page> </code></pre>
</div>
<div>
<b><br /></b></div>
<div class="well lead">
<b>Project & Managed Package Installation : </b><a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DrPpO">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DrPpO</a></div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com0tag:blogger.com,1999:blog-2434290243241406364.post-80540230633823539652014-04-07T10:00:00.000+05:302014-04-07T21:42:37.886+05:30Using Angular with Visualforce Remoting<div dir="ltr" style="text-align: left;" trbidi="on">
With the rise of the Web and the HTML5, libraries like Angular , Knockout, Backbone started becoming popular. Among them somehow Angular stood out of the queue and looked more promising than others. It was also because of the fact that it is maintained by Google!<br />
<br />
With VF pages I somehow couldn't find a good way to implement Angular, I have been tinkering with the library to make it work with Visualforce. I somehow wanted to marry Angular Factories with Visualforce Remoting and ended up doing the same using promise.<br />
<br />
<br />
Here is small example how to use Visualforce Remoting with Angular.<br />
<br />
<h3 style="text-align: left;">
Visualforce Page</h3>
<br />
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><apex:page controller="AngularRemoting_Con">
<vs:importvisualstrap />
<vs:visualstrapblock >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"/>
<!--Remoting Stuff-->
<script>
function getSobjects(callback){
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.AngularRemoting_Con.getData}',
callback,
{escape: false}
);
}
</script>
<script>
var vfremote = angular.module('VFRemoting',[]);
vfremote.factory('VFRemotingFactory',function($q,$rootScope){
var factory = {};
factory.getData = function(){
var deferred = $q.defer();
getSobjects(function(result){
$rootScope.$apply(function(){
deferred.resolve(result);
});
});
return deferred.promise;
}
return factory;
});
vfremote.controller('VFRemoteController',function($scope,VFRemotingFactory){
VFRemotingFactory.getData().then(function(result){
$scope.data = result;
});
});
</script>
<div ng-app="VFRemoting">
<div ng-controller="VFRemoteController">
<ul class="list-group">
<li ng-repeat="acc in data" class="list-group-item">{{acc.Name}}</li>
</ul>
</div>
</div>
</vs:visualstrapblock>
</apex:page></code></pre>
<br />
<br />
<h3 style="text-align: left;">
Controller Class</h3>
<br />
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828125px;"><code style="word-wrap: normal;"> public class AngularRemoting_Con {
@RemoteAction
public static List<SObject> getData(){
return [SELECT Id,Name FROM Account];
}
} </code></pre>
<br />
<br />
<h3 style="text-align: left;">
How it looks like ?</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-7JNydaviJzk/U0GzLvnjciI/AAAAAAAAAYI/-rTpceOoSYs/s1600/Page+Editor+++AngularRemoting.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="media-object" src="http://3.bp.blogspot.com/-7JNydaviJzk/U0GzLvnjciI/AAAAAAAAAYI/-rTpceOoSYs/s1600/Page+Editor+++AngularRemoting.png" height="190" width="320" /></a></div>
<br />
<h4 style="text-align: left;">
</h4>
<div class="well">
<h4 class="lead" style="text-align: left;">
A bit more about the pages</h4>
<div>
<ul style="text-align: left;">
<li>The pages uses <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">VisualStrap</a> for styling, that can be removed along with all the components starting with namespace "vs".</li>
<li>The Angularjs brings data from controller using Visualforce Remoting, it depends on "getSobjects" method to call controller method.</li>
<li>AngularJs uses Factories to communicate with remoting method "getSobject"</li>
</ul>
<div>
<br /></div>
</div>
<div>
This page can be extended to do a lot more things, bringing data dynamically to the VF pages, with the two way binding that angular provides, you can use this to make superfast single page apps.</div>
<div>
<br /></div>
<div>
I am looking forward to Visualforce Remote objects and probably will be posting a blog about how to use them with AngularJS, but at the end I don't think there would be much of differences rather than some basic changes in the code structure. And obviously with Remote objects you won't need a controller!</div>
<div>
<br /></div>
</div>
<div>
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com4tag:blogger.com,1999:blog-2434290243241406364.post-8465144769690602992014-03-13T04:11:00.000+05:302014-03-13T21:40:49.757+05:30Using Visualstrap with Salesforce1 : User Dashboard / Overview Page<div dir="ltr" style="text-align: left;" trbidi="on">
Salesforce has recently unveiled the new Salesforce1 app that lets you create mobile app very easily using technologies like JS, Visualforce and HTML and yes of course you can use VisualStrap create mobile ready pages.<br />
<br />
Since Visualstrap is based on Bootstrap it inherits all the features from Bootstrap. Its a very powerful, sleek, front-end framework that lets you create mobile ready pages very fast!<br />
<br />
<h3 style="text-align: left;">
Creating a Visualforce Page "VSDashboardS1"</h3>
<br />
So lets start with a User Dashboard / Overview page that we talked earlier here <a href="http://blogforce9.blogspot.in/2014/01/visualstrap-possibilities.html">http://blogforce9.blogspot.in/2014/01/visualstrap-possibilities.html</a><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39hsMF8QIHJJSUHsj0w8b8hprL5YqC4Ke7jH5zh2qQcNtKyc3b9oPiO6sxK1mAaVsUa7L8WkAD2QfWkp1ubeXYurE870b7v0-DqsXjyBjrXYKopgcseasiBImroco4qNbdL_MT946FGg/s1600/VSDashBoardS1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39hsMF8QIHJJSUHsj0w8b8hprL5YqC4Ke7jH5zh2qQcNtKyc3b9oPiO6sxK1mAaVsUa7L8WkAD2QfWkp1ubeXYurE870b7v0-DqsXjyBjrXYKopgcseasiBImroco4qNbdL_MT946FGg/s1600/VSDashBoardS1.png" height="192" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Desktop View</td></tr>
</tbody></table>
<br />
<h4 style="text-align: left;">
Prerequisite </h4>
<h4 style="text-align: left;">
<ul style="text-align: left;">
<li><span style="font-weight: normal;"><a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">Visualstrap</a> : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">Visualstrap</a> needs to be installed for using the component library.</span></li>
</ul>
</h4>
<h4 style="text-align: left;">
Few things that needs to be considered</h4>
<br />
<ul style="text-align: left;">
<li><b>Desktop & Mobile support : </b>Since we are going to support the page both on desktop and mobile we need to find a way to stack the grids on mobile devices so that they can be easily viewed. This can be easily done by using proper grid classes.</li>
<li><b>Navigation :</b> We have to make sure all the links are updated, so that every thing works with Salesforce1 and Desktop</li>
<li><b>Responsive :</b> The page needs to be responsive so that it fits in the screen of different mobile devices.</li>
</ul>
<div>
<br /></div>
<br />
<h4 style="text-align: left;">
<b>Desktop & Mobile support </b></h4>
<div>
To make sure the grids properly stack up according to devices we should have to select proper column/ grid classes. In this example we are going to have three blocks per row, since a row in Bootstrap is of 12, each block should span to 4 units, hence the type "col-md-4"</div>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><vs:row>
<vs:column type="col-md-4">
...
</vs:column>
<vs:column type="col-md-4">
...
</vs:column>
<vs:column type="col-md-4">
...
</vs:column>
</vs:row> </code></pre>
</div>
<div>
<br /></div>
<div>
col-md-* classes are displayed in single row in a device with regular display where as they get stacked in mobile devices with smaller displays.</div>
<div>
<br /></div>
<div>
<br /></div>
<h4 style="text-align: left;">
<b>Navigation</b></h4>
<div>
<b><br /></b></div>
<div>
We have to make sure navigation works for both Salesforce1 and desktop, this can be done by detecting whether the app is viewed in Salesforce1 or Desktop. Have a look at the below JS function , the function checks whether "sforce.one" exists (which exists for Salesforce1) and switches the navigation method accordingly.</div>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">function goToDetailPage(recId){
if(typeof sforce != 'undefined' && typeof sforce.one != 'undefined'){
sforce.one.navigateToSObject(recId);
}
else{
window.location.href = '/'+recId;
}
return false;
} </code></pre>
</div>
<br />
<br />
<h4 style="text-align: left;">
<b>Responsive</b></h4>
<div>
Visualstrap grid classes are all responsive and hence they will adapt according to screen width.</div>
<div>
<br />
<br />
<h4 style="text-align: left;">
The Design</h4>
</div>
<div>
To make sure the page uses all the real estate available on the screen, the page should be stacked vertically for mobile where as it should span horizontally for desktop. This is generally done use grid classes. </div>
<div>
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqc1umoPSOga6SGw1n_KPQp9SRCRbvMQ34EZby1tZXylBe3FacmAVUl2ne0sCBcKdBwTz5kHS8DAhbyRmMZz8OHlHwmwQ0C6f8gXwx5fI8a8t6Zhh1lwcd6Tl36jngHGddXK65eark_rk/s1600/Desktop.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqc1umoPSOga6SGw1n_KPQp9SRCRbvMQ34EZby1tZXylBe3FacmAVUl2ne0sCBcKdBwTz5kHS8DAhbyRmMZz8OHlHwmwQ0C6f8gXwx5fI8a8t6Zhh1lwcd6Tl36jngHGddXK65eark_rk/s1600/Desktop.jpg" height="217" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Desktop layout</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLPH90nXbKUJdrCHD-CTOZpbyWvDheO1crapfdoCSkg6R65Fe3YAsgZKDuwW7ECwqdjjBOtRxzk6dRMmXQK5VZjwuPf2r3to-z-SVjnNj_4dTYQBFY79WZ2Bcv7a16BTBo_dL28-Wo-0/s1600/Mobile.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLPH90nXbKUJdrCHD-CTOZpbyWvDheO1crapfdoCSkg6R65Fe3YAsgZKDuwW7ECwqdjjBOtRxzk6dRMmXQK5VZjwuPf2r3to-z-SVjnNj_4dTYQBFY79WZ2Bcv7a16BTBo_dL28-Wo-0/s1600/Mobile.jpg" height="320" width="171" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mobile Layout</td></tr>
</tbody></table>
<br />
<br /></div>
<h4 style="text-align: left;">
VF Page</h4>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"> <apex:page sidebar="false" docType="html-5.0" controller="VSDashBoard_Con">
<vs:importvisualstrap />
<script>
function goToDetailPage(recId){
if(typeof sforce != 'undefined' && typeof sforce.one != 'undefined'){
sforce.one.navigateToSObject(recId);
}
else{
window.location.href = '/'+recId;
}
return false;
}
</script>
<vs:visualstrapblock style="padding:5px" >
<center>
<vs:pageheader title="User Dashboard" icon="calendar" subtitle="{!$User.FirstName} {!$User.LastName}"/>
</center>
<vs:row >
<vs:column type="col-md-4">
<vs:panel title="Tasks" type="primary">
<vs:well style="text-align:center;">
<vs:glyph icon="tasks" style="font-size:40px"/> &nbsp;<span style="font-size:54px">{!Tasks.size}</span>
<p class="text-muted">Tasks due for Today</p>
</vs:well>
<apex:dataTable value="{!Tasks}" var="task" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Subject">
<apex:outputLink onclick="goToDetailPage('{!task.Id}')">{!task.Subject}</apex:outputLink>
</apex:column>
<apex:column value="{!task.Status}" headerValue="Status"/>
<apex:column value="{!task.ActivityDate}" headerValue="Due Date"/>
</apex:dataTable>
<vs:alert rendered="{!Tasks.empty}" type="success" style="text-align:center">
<vs:glyph icon="ok-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
<vs:column type="col-md-4">
<vs:panel title="Cases" type="primary">
<vs:well style="text-align:center;">
<vs:glyph icon="briefcase" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!Cases.size}</span>
<p class="text-muted">Assigned Cases</p>
</vs:well>
<apex:dataTable value="{!Cases}" var="case" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Case Number">
<apex:outputLink onclick="return goToDetailPage('{!case.Id}')" >{!case.CaseNumber}</apex:outputLink>
</apex:column>
<apex:column value="{!case.Status}" headerValue="Status"/>
<apex:column value="{!case.Priority}" headerValue="Priority"/>
</apex:dataTable>
<vs:alert rendered="{!Cases.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
<vs:column type="col-md-4">
<vs:panel title="Leads" type="primary">
<vs:well style="text-align:center;">
<vs:glyph icon="user" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!Leads.size}</span>
<p class="text-muted">Unread Leads</p>
</vs:well>
<apex:dataTable value="{!Leads}" var="lead" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Name">
<apex:outputLink onclick="return goToDetailPage('{!lead.Id}')" >{!lead.Name}</apex:outputLink>
</apex:column>
<apex:column value="{!lead.Status}" headerValue="Status"/>
<apex:column value="{!lead.CreatedDate}" headerValue="Created Date"/>
</apex:dataTable>
<vs:alert rendered="{!Leads.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
</vs:row>
<vs:row >
<vs:column type="col-md-6">
<vs:panel title="Last Viewed Accounts" type="primary">
<apex:dataTable value="{!Accounts}" var="acc" styleClass="table table-condensed table-hover table-bordered" >
<apex:column headerValue="Name">
<apex:outputLink onclick="return goToDetailPage('{!acc.Id}')" >{!acc.Name}</apex:outputLink>
</apex:column>
<apex:column value="{!acc.Type}" headerValue="Type"/>
<apex:column value="{!acc.BillingState}" headerValue="State"/>
</apex:dataTable>
<vs:alert rendered="{!Accounts.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
<vs:column type="col-md-6">
<vs:panel title="Last Viewed Contacts" type="primary">
<apex:dataTable value="{!Contacts}" var="contact" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Name">
<apex:outputLink onclick="return goToDetailPage('{!contact.Id}')" >{!contact.Name}</apex:outputLink>
</apex:column>
<apex:column value="{!contact.Phone}" headerValue="Phone"/>
<apex:column value="{!contact.Department}" headerValue="Department"/>
</apex:dataTable>
<vs:alert rendered="{!Contacts.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
</vs:row>
</vs:visualstrapblock>
</apex:page> </code></pre>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h4 style="text-align: left;">
<b>Controller</b></h4>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">public without sharing class VSDashBoard_Con {
public List<Task> getTasks(){
return [SELECT Id,Subject,Status, ActivityDate FROM Task WHERE ActivityDate = TODAY AND Status != 'Completed' AND Status != 'Deferred'];
}
public List<Case> getCases(){
return [SELECT Id,CaseNumber,Status,Subject, Priority FROM Case WHERE OwnerId=:UserInfo.getUserId() AND isClosed = FALSE];
}
public List<Lead> getLeads(){
return [SELECT Id,Name,Status, CreatedDate FROM Lead WHERE OwnerId=:UserInfo.getUserId() AND IsUnreadByOwner = true];
}
public List<Account> getAccounts(){
return [SELECT Id,Name,BillingState,Type FROM Account ORDER BY LastViewedDate DESC limit 5 ];
}
public List<Contact> getContacts(){
return [SELECT Id,Name,Phone, Department FROM Contact ORDER BY LastViewedDate DESC limit 5 ];
}
} </code></pre>
</div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Deploying the Page to Salesforce1</h3>
<div>
<ul style="text-align: left;">
<li>Mark the page VSDashboardS1 "<b>Available for Salesforce mobile apps</b>"</li>
</ul>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-U3jAg5L6QQJHNYlQVivWB0yWXlJw6Vh35hQDyielxXVtGjMSdwgkGIarGgtcrjV9OpDMQu4_GpTOiqkMri9zoaSMCy3-33n9n8LxfaHIYxlM9S9SwtRrFF7RJ6s4PENkBPsxNIMeQ4Q/s1600/+VSDashBoardS1+++salesforce.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-U3jAg5L6QQJHNYlQVivWB0yWXlJw6Vh35hQDyielxXVtGjMSdwgkGIarGgtcrjV9OpDMQu4_GpTOiqkMri9zoaSMCy3-33n9n8LxfaHIYxlM9S9SwtRrFF7RJ6s4PENkBPsxNIMeQ4Q/s1600/+VSDashBoardS1+++salesforce.png" height="211" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>Create a Visualforce Tab</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8L42kuJdxZceYS36cSXT4FYW77Ul_VlIwXq5z5BdaUpmEBve9sWjMDbJkYqYGJNt7xyOE_TTOQWgXgCUmoEds-6NAPgLgu_sSWHKkUDJi4eWqJJjWRVfJs4jodhQe8YRxbFgb5rJmIw/s1600/Edit+Visualforce+Custom+Tab++VSDashBoard+++salesforce.com+++Developer+Edition.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8L42kuJdxZceYS36cSXT4FYW77Ul_VlIwXq5z5BdaUpmEBve9sWjMDbJkYqYGJNt7xyOE_TTOQWgXgCUmoEds-6NAPgLgu_sSWHKkUDJi4eWqJJjWRVfJs4jodhQe8YRxbFgb5rJmIw/s1600/Edit+Visualforce+Custom+Tab++VSDashBoard+++salesforce.com+++Developer+Edition.png" height="195" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li style="text-align: left;">Add tab to Mobile Navigation Menu</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7RXYfTsxfhJPtoNHR4SujctZISLp0Bp9c0AEtMqqJcYF3j9fC3rOa8dr1e5ByR3JDgdHkEUFx7LhvGIK0k6Qrnokawh27mQuhgktxJ7SiKtw_llfgUTdRVXrg3urhLr0mI4UMwJFo550/s1600/Mobile+Navigation+++salesforce.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7RXYfTsxfhJPtoNHR4SujctZISLp0Bp9c0AEtMqqJcYF3j9fC3rOa8dr1e5ByR3JDgdHkEUFx7LhvGIK0k6Qrnokawh27mQuhgktxJ7SiKtw_llfgUTdRVXrg3urhLr0mI4UMwJFo550/s1600/Mobile+Navigation+++salesforce.png" height="89" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
How it looks like on a Mobile Device ?</h3>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GxPJJlK1JnBz9sSy3xhOi8uE2cjZeTvWm4Vw2kbcDC5sela9oyk-qOblPLsH-BumHMzCZ3nLTNakFBACtPC1pgbIIFah8Jd-36ESiTNRuqpYK_PQW-uGQmaEHCkA9csQB6mlnl6KZOg/s1600/Screenshot_2014-03-12-18-29-49.png" height="320" style="margin-left: auto; margin-right: auto;" width="180" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">VSDashboard in the nav menu</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVI9bY0m-8rjO5hyphenhyphen5KH5MeuHu6pCt_P9OP43Fz7s23zckStyjj24xSsR_xncgxuwBpF7MK1fQjuxzY6UzHIvD6bTcz99V66s5wkpTj9MWnDLSk4T5qlBUa5E-lMkb4UmrWEScSaM7vueE/s1600/Screenshot_2014-03-12-18-29-58.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVI9bY0m-8rjO5hyphenhyphen5KH5MeuHu6pCt_P9OP43Fz7s23zckStyjj24xSsR_xncgxuwBpF7MK1fQjuxzY6UzHIvD6bTcz99V66s5wkpTj9MWnDLSk4T5qlBUa5E-lMkb4UmrWEScSaM7vueE/s1600/Screenshot_2014-03-12-18-29-58.png" height="320" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The VSDashBoard page</td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6aObFeE_6XeJ3te30vTeARRQKfSJNXM3GIip9SNhux-33ez1m0Yaw8jpSw_GibTFw89j3wvUH0mDYSZG1ss0KJEKkN8dosrxG5_PatoKABkeHvGceDe398O2yedp7MlGPtGF9jP3-l0/s1600/Screenshot_2014-03-12-18-30-05.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6aObFeE_6XeJ3te30vTeARRQKfSJNXM3GIip9SNhux-33ez1m0Yaw8jpSw_GibTFw89j3wvUH0mDYSZG1ss0KJEKkN8dosrxG5_PatoKABkeHvGceDe398O2yedp7MlGPtGF9jP3-l0/s1600/Screenshot_2014-03-12-18-30-05.png" height="320" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The VSDashBoard page</td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQLo8vtOU_PhimpinmvB1WuM_j7mniF3DAMIEeJIMiKF6NgeT8zxaHLn9LEwxLGSSYWsNh2hIp4N8QuEQYoTKcYVMw0BtFZ5BcO3h-TolBl_NTrKP1gNdG9uFo-pPljyPL7Mr1dUr9_s/s1600/Screenshot_2014-03-12-18-30-55.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQLo8vtOU_PhimpinmvB1WuM_j7mniF3DAMIEeJIMiKF6NgeT8zxaHLn9LEwxLGSSYWsNh2hIp4N8QuEQYoTKcYVMw0BtFZ5BcO3h-TolBl_NTrKP1gNdG9uFo-pPljyPL7Mr1dUr9_s/s1600/Screenshot_2014-03-12-18-30-55.png" height="320" width="180" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFm6etZJxNgm63HmU03_tgLhyUwVVElye6XAkuBwfytjmCbndwWrPDNKae6_uCar49XZAyN6LY1spqyZqGJZ_xZ_WcJWJTMyoJYO_Vl6lgt-meU4fCBuLmN2I8waHI0KC76fCl8RvEKs/s1600/Screenshot_2014-03-12-18-31-29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFm6etZJxNgm63HmU03_tgLhyUwVVElye6XAkuBwfytjmCbndwWrPDNKae6_uCar49XZAyN6LY1spqyZqGJZ_xZ_WcJWJTMyoJYO_Vl6lgt-meU4fCBuLmN2I8waHI0KC76fCl8RvEKs/s1600/Screenshot_2014-03-12-18-31-29.png" height="320" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Detail Pages
<br />
<div style="text-align: left;">
</div>
</td></tr>
</tbody></table>
<table>
<tbody>
<tr>
<td><div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GxPJJlK1JnBz9sSy3xhOi8uE2cjZeTvWm4Vw2kbcDC5sela9oyk-qOblPLsH-BumHMzCZ3nLTNakFBACtPC1pgbIIFah8Jd-36ESiTNRuqpYK_PQW-uGQmaEHCkA9csQB6mlnl6KZOg/s1600/Screenshot_2014-03-12-18-29-49.png" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GxPJJlK1JnBz9sSy3xhOi8uE2cjZeTvWm4Vw2kbcDC5sela9oyk-qOblPLsH-BumHMzCZ3nLTNakFBACtPC1pgbIIFah8Jd-36ESiTNRuqpYK_PQW-uGQmaEHCkA9csQB6mlnl6KZOg/s1600/Screenshot_2014-03-12-18-29-49.png" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GxPJJlK1JnBz9sSy3xhOi8uE2cjZeTvWm4Vw2kbcDC5sela9oyk-qOblPLsH-BumHMzCZ3nLTNakFBACtPC1pgbIIFah8Jd-36ESiTNRuqpYK_PQW-uGQmaEHCkA9csQB6mlnl6KZOg/s1600/Screenshot_2014-03-12-18-29-49.png" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GxPJJlK1JnBz9sSy3xhOi8uE2cjZeTvWm4Vw2kbcDC5sela9oyk-qOblPLsH-BumHMzCZ3nLTNakFBACtPC1pgbIIFah8Jd-36ESiTNRuqpYK_PQW-uGQmaEHCkA9csQB6mlnl6KZOg/s1600/Screenshot_2014-03-12-18-29-49.png" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GxPJJlK1JnBz9sSy3xhOi8uE2cjZeTvWm4Vw2kbcDC5sela9oyk-qOblPLsH-BumHMzCZ3nLTNakFBACtPC1pgbIIFah8Jd-36ESiTNRuqpYK_PQW-uGQmaEHCkA9csQB6mlnl6KZOg/s1600/Screenshot_2014-03-12-18-29-49.png" imageanchor="1" style="clear: left; float: left; margin-right: 1em;"></a>
</div>
</td>
</tr>
<tr>
<td><div class="well lead">
Project Link : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000BnyDm">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000BnyDm</a>
<br />
<div>
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com1tag:blogger.com,1999:blog-2434290243241406364.post-73915194176072944382014-02-24T20:01:00.000+05:302014-02-26T03:09:40.527+05:30Apex Code Coverage List 1.2<div dir="ltr" style="text-align: left;" trbidi="on">
Well this is the extended version of the app that I blogged few days back. The first version allowed user to see the code coverage in a listview format without going to developer console. Current version 1.2 now allows you to see the "<b>Lines Covered</b>", so now with this update you need not to go to the developer console at all.<br />
<br />
This version uses SyntaxHighlighter plugin to highlight the code. You can read more about how this works in this <a href="http://blogforce9.blogspot.in/2014/02/tooling-api-js-remoting-jsrender.html" target="_blank">blog</a>.<br />
<br />
<br />
<b>Features</b><br />
<br />
<ul style="text-align: left;">
<li>Quickly view the list of class / trigger coverage</li>
<li>View the Org wide coverage</li>
<li><b>View the lines covered for a specific class (new in v 1.2)</b></li>
</ul>
<div>
<b><br /></b></div>
<div style="text-align: center;">
<b><u>Some Screens of the actual app</u></b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeubxH8zqxYehL-9cFOViLrv-4D2VPQEkYLUiNaAFTliZKRq9X420tqPgTL2RQ6FB7TFLT96GDPdHNKWcu7DF-FJTX-gV8aayaw7RFHe4neSh0M-31E7vfQiz41Dr5qk4FSwYw1s1BKo/s1600/ApexCodeCoverageList.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeubxH8zqxYehL-9cFOViLrv-4D2VPQEkYLUiNaAFTliZKRq9X420tqPgTL2RQ6FB7TFLT96GDPdHNKWcu7DF-FJTX-gV8aayaw7RFHe4neSh0M-31E7vfQiz41Dr5qk4FSwYw1s1BKo/s1600/ApexCodeCoverageList.png" height="290" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Apex code coverage list page</td></tr>
</tbody></table>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXyeC6YesIb1KYorNM2KF0qubChg2QBJ9TNZnrf5btaWf5S-3Mk-s0-CLdm_GNu-2d-pmfLzkuG0r1ATygXI5xczBGT_ccMRHshH9MXdN9NEN_Bj0DLdP4zdFOWwp7wQjaKeQAENlFp0/s1600/ApexCodeCoverageList.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXyeC6YesIb1KYorNM2KF0qubChg2QBJ9TNZnrf5btaWf5S-3Mk-s0-CLdm_GNu-2d-pmfLzkuG0r1ATygXI5xczBGT_ccMRHshH9MXdN9NEN_Bj0DLdP4zdFOWwp7wQjaKeQAENlFp0/s1600/ApexCodeCoverageList.png" height="234" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The page displaying the covered lines</td></tr>
</tbody></table>
<div>
<b><br /></b>
<br />
<div class="lead well">
Project Link / Installation : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000An7Jt" target="_blank">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000An7Jt</a></div>
<div>
</div>
<br />
<br />
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com2tag:blogger.com,1999:blog-2434290243241406364.post-38941429648167062032014-02-10T18:26:00.000+05:302014-02-10T18:26:19.738+05:30Tooling API + JS Remoting + JSRender + VisualStrap = Awesome <div dir="ltr" style="text-align: left;" trbidi="on">
Since salesforce moved code coverage to developer console, I somehow didn't like it,waited for a while.... and again for like months and no go :( , Salesforce never brought back the old listviews, I was quite missing this little feature that lets you to have a quick glance of the code coverage. After few weeks finally planned to build something for myself.<br />
This was a great chance to learn a thing or two about Tooling API and a chance to mix some js libraries together to brew something really cool.<br />
<div>
<br /></div>
<div>
After thinking for a while I think these are things I will need to build the page</div>
<div>
<ul style="text-align: left;">
<li><b>Tooling API :</b> To bring the org code coverage</li>
<li><b>JSRemoting</b> : To bring data to page without the viewstate and in a fast manner</li>
<li><b>JSRender</b> : JsRender is jQuery Templating plugin that lets you create HTML from predefined templates</li>
<li><b>VisualStrap</b> : And the VisualStrap to generate a BootStrap responsive UI for both mobile and desktop</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPn1ebY78urIgiT6mdalIhQ3fgujW7Oa9-r-ZA3t3JnPbF4iKQGaTnZVr6xtJz3l7SAeSAF2ubYiy__6px0F3RO0e4X9gd1bVYfknIvPam_FbHu6c63gFZmUGWkiuzFsENZmIwzeNQSvA/s1600/Page+Editor+++ApexCodeCoverageList.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPn1ebY78urIgiT6mdalIhQ3fgujW7Oa9-r-ZA3t3JnPbF4iKQGaTnZVr6xtJz3l7SAeSAF2ubYiy__6px0F3RO0e4X9gd1bVYfknIvPam_FbHu6c63gFZmUGWkiuzFsENZmIwzeNQSvA/s1600/Page+Editor+++ApexCodeCoverageList.png" height="304" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The page in action</td></tr>
</tbody></table>
<h3 style="text-align: left;">
<b>Tooling API</b></h3>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
The page uses the Tooling API REST service to retrieve the code coverage result.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"> private static String sendToolingQueryRequest(String queryStr){
HttpRequest req = new HttpRequest();
req.setEndpoint(TOOLINGAPI_ENDPOINT+'query/?q='+queryStr);
/*Set authorization by using current users session Id*/
req.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionID());
req.setHeader('Content-Type', 'application/json');
req.setMethod('GET');
Http http = new Http();
HTTPResponse res = http.send(req);
return res.getBody();
} </code></pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To get the data from the endpoint the method sends the query along with the session id to get the response as JSON string which again used in the JS to render the UI.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">{
"size": 1,
"totalSize": 1,
"done": true,
"records": [{
"attributes": {
"type": "ApexCodeCoverage",
"url": "/services/data/v29.0/tooling/sobjects/ApexCodeCoverage/71490000002RqOVAA0"
},
"NumLinesCovered": 2,
"ApexClassOrTriggerId": "01p90000001MTXTAA4",
"ApexClassOrTrigger": {
"attributes": {
"type": "Name",
"url": "/services/data/v29.0/tooling/sobjects/ApexClass/01p90000001MTXTAA4"
},
"Name": "jQueryUIBlockDemo_Con"
},
"NumLinesUncovered": 0
}],
"queryLocator": null,
"entityTypeName": "ApexCodeCoverage"
} </code></pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<b>JSRemoting</b></h3>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
JSRemoting does the job of bringing the data from controller</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="text-align: left;">
<b>JSRender</b></h3>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
JSRender takes the job of rendering the data received from the service and use them to generate the table. The templates are pretty easy to handle once you have the data and the decided upon the HTML structure, you can easily create them.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I wanted my page to look like a list so the obvious choice was a table and all the data received should be represented as row, and hence we need a template to generate the rows or "<tr>" for the table. In JSRender JSON data are binded by {{>MY_JSON_FIELDNAME}} </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So the template should be </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><script id="coverageRowTemplate" type="text/x-jsrender">
<tr>
<td width="20px">
<a href="/{{>ApexClassOrTriggerId}}" target="_blank" class="btn btn-xs btn-info"> <span class="glyphicon glyphicon-export"/> view </a>
</td>
<td>
{{>ApexClassOrTrigger.Name}}
</td>
<td>
{{>NumLinesUncovered}}
</td>
<td>
{{>NumLinesCovered}}
</td>
</tr>
</script></code></pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The above template just displays the data received from the remoting method, lets extend the template to show more info like percentage, totalNumber of lines and may be a background color ?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So to do that we will need some helper methods for the template</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">$.views.helpers({
calculatePercentage: function(NumLinesUncovered,NumLinesCovered){
return ((NumLinesCovered/(NumLinesCovered+NumLinesUncovered))*100).toFixed(2);
},
totalLines:function(NumLinesUncovered,NumLinesCovered){
return NumLinesUncovered + NumLinesCovered;
},
rowStatusClass: function(NumLinesUncovered,NumLinesCovered){
var sclass='danger';
var percentG = ((NumLinesCovered/(NumLinesCovered+NumLinesUncovered))*100).toFixed(2);
if(percentG >= 90){
sclass = 'success'
}
else if(percentG >= 75){
sclass = 'warning';
}
return sclass;
}
}); </code></pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The above code piece defines some helper methods and register them so that they can be used with JSRender templates. So the final template will look like</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><script id="coverageRowTemplate" type="text/x-jsrender">
<tr class="{{:~rowStatusClass(NumLinesUncovered,NumLinesCovered)}}">
<td width="20px">
<a href="/{{>ApexClassOrTriggerId}}" target="_blank" class="btn btn-xs btn-info"> <span class="glyphicon glyphicon-export"/> view </a>
</td>
<td>
{{>ApexClassOrTrigger.Name}}
</td>
<td>
{{>NumLinesUncovered}}
</td>
<td>
{{>NumLinesCovered}}
</td>
<td>
{{:~totalLines(NumLinesUncovered,NumLinesCovered)}}
</td>
<td>
{{:~calculatePercentage(NumLinesUncovered,NumLinesCovered )}}
</td>
</tr>
</script></code></pre>
<div>
<br /></div>
</div>
<div>
Now the template serves most of the fields, to generate the HTML </div>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">var html = $( "#JSRENDER_TEMPLATEID" ).render(JSON_DATA ); </code></pre>
</div>
<div>
<br /></div>
<div>
and this html can be appended to an existing table in the page to generate a table with the data.</div>
<div>
<br /></div>
<div>
<b>VisualStrap</b> </div>
<div>
<br /></div>
<div>
VisualStrap is used to generate the Mobile friendly good looking responsive layout along with status classes displayed based on the code coverage percentage</div>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li>Above 90 : Green (css class = "success")</li>
<li>Above 75 : Yellow (css class = "warning")</li>
<li>For everything else : Red (css class = "danger")</li>
</ul>
<div>
<br /></div>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0p-3nQY2UhVxlwbW7S8zwOFMEbLRHIivjrDAFMOsV-XUybU7tpUqDroupgx4o6dhR7eKjCvHbvy13OLniLEPrVofJrrZGEbgl4cbao67_GggG_4XhZST3ZrWYo9XPM8R-uqfIX5Bzh8/s1600/Page+Editor+++ApexCodeCoverageList.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0p-3nQY2UhVxlwbW7S8zwOFMEbLRHIivjrDAFMOsV-XUybU7tpUqDroupgx4o6dhR7eKjCvHbvy13OLniLEPrVofJrrZGEbgl4cbao67_GggG_4XhZST3ZrWYo9XPM8R-uqfIX5Bzh8/s1600/Page+Editor+++ApexCodeCoverageList.png" height="400" width="367" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The mobile layout</td></tr>
</tbody></table>
So the final product a fast good looking page to view the org code coverage.<br />
<br />
<div class="alert alert-info">
<b>Installation :</b> You can follow the project detail link to install a unmanaged package of this page. If you already have visualstrap unmanaged package installed you may have to remove it or you can use source from github to install the same.</div>
<br />
VisualForce Page<br />
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"> <apex:page controller="ApexCodeCoverageList_Con" sidebar="false">
<c:importvisualstrap />
<apex:includeScript value="{!$Resource.JSRender}"/>
<script>
function getCodeCoverage(){
var rBtn = $('#refreshBtn').button('loading');
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.ApexCodeCoverageList_Con.fetchCodeCoverage}',
function(result,event){
if(event.status){
console.log(result);
var parsedResult = jQuery.parseJSON(result);
/*render html using jsrender and attach it to the table*/
$('#coverageTableBody').html($( "#coverageRowTemplate" ).render( parsedResult.records ));
}
else{
alert(event.message);
}
rBtn.button('reset');
},
{escape: false}
);
}
function getOrgCoverage(){
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.ApexCodeCoverageList_Con.fetchOrgCoverage}',
function(result,event){
if(event.status){
var parsedResult = jQuery.parseJSON(result);
$('#orgCoverage').html(parsedResult.records[0].PercentCovered);
}
else{
alert(event.message);
}
},
{escape: false}
);
}
function getCoverage(){
getOrgCoverage();
getCodeCoverage();
}
/*JSrender helper methods*/
function initHelperMethods(){
$.views.helpers({
calculatePercentage: function(NumLinesUncovered,NumLinesCovered){
return ((NumLinesCovered/(NumLinesCovered+NumLinesUncovered))*100).toFixed(2);
},
totalLines:function(NumLinesUncovered,NumLinesCovered){
return NumLinesUncovered + NumLinesCovered;
},
rowStatusClass: function(NumLinesUncovered,NumLinesCovered){
var sclass='danger';
var percentG = ((NumLinesCovered/(NumLinesCovered+NumLinesUncovered))*100).toFixed(2);
if(percentG >= 90){
sclass = 'success'
}
else if(percentG >= 75){
sclass = 'warning';
}
return sclass;
}
});
}
$(function(){
initHelperMethods();
getCoverage();
})
</script>
<!-- JS render template -->
<script id="coverageRowTemplate" type="text/x-jsrender">
<tr class="{{:~rowStatusClass(NumLinesUncovered,NumLinesCovered)}}">
<td width="20px">
<a href="/{{>ApexClassOrTriggerId}}" target="_blank" class="btn btn-xs btn-info"> <span class="glyphicon glyphicon-export"/> view </a>
</td>
<td>
{{>ApexClassOrTrigger.Name}}
</td>
<td>
{{>NumLinesUncovered}}
</td>
<td>
{{>NumLinesCovered}}
</td>
<td>
{{:~totalLines(NumLinesUncovered,NumLinesCovered)}}
</td>
<td>
{{:~calculatePercentage(NumLinesUncovered,NumLinesCovered )}}
</td>
</tr>
</script>
<c:visualstrapblock >
<c:panel type="primary">
<center>
<c:pageheader icon="cog" title="Apex Code Coverage" subtitle="All Classes"/>
<div class="text-muted" style="position:absolute;top:20px;right:20px">Using Tooling API, JS Remoting, JSRender and VisualStrap</div>
</center>
<apex:outputPanel layout="block" styleClass="well well-sm">
<center>
<button id="refreshBtn" onclick="getCoverage();return false;" class="btn btn-success" data-loading-text="Refreshing...">
<c:glyph icon="refresh"/> Refresh
</button>
</center>
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="row">
<apex:outputPanel layout="block" styleClass="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>
Action
</th>
<th>
Apex Class/ Trigger
</th>
<th>
Lines Not Covered
</th>
<th>
Lines Covered
</th>
<th>
Total Lines
</th>
<th>
Coverage Percentage
</th>
</tr>
</thead>
<tbody id="coverageTableBody">
</tbody>
</table>
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="col-md-2">
<vs:panel type="primary" title="Overall Coverage" >
<center>
<h2 style="font-size:54"><span id="orgCoverage"/> %</h2>
<p class="text-muted infolabel">Across all apex classes and triggers</p>
</center>
</c:panel>
</apex:outputPanel>
</apex:outputPanel>
</c:panel>
</c:visualstrapblock>
</apex:page></code></pre>
</div>
<div>
<br /></div>
<div>
<b>Apex Class</b></div>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">/*
* @Author : Avi (avidev9@gmail.com)
* @Description : Controller class for ApexCodeCoverageList page, Contains remoted method and method to call tooling api
*
**/
public class ApexCodeCoverageList_Con{
private static FINAL String ORG_INSTANCE;
private static FINAL String TOOLINGAPI_ENDPOINT;
static{
ORG_INSTANCE = getInstance();
TOOLINGAPI_ENDPOINT = 'https://'+ORG_INSTANCE+'.salesforce.com/services/data/v29.0/tooling/';
}
@RemoteAction
public static String fetchCodeCoverage(){
return sendToolingQueryRequest('SELECT+NumLinesCovered,ApexClassOrTriggerId,ApexClassOrTrigger.Name,NumLinesUncovered+FROM+ApexCodeCoverage');
}
@RemoteAction
public static String fetchOrgCoverage(){
return sendToolingQueryRequest('SELECT+PercentCovered+FROM+ApexOrgWideCoverage');
}
/*Method to send query request to tooling api endpoint*/
private static String sendToolingQueryRequest(String queryStr){
HttpRequest req = new HttpRequest();
req.setEndpoint(TOOLINGAPI_ENDPOINT+'query/?q='+queryStr);
/*Set authorization by using current users session Id*/
req.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionID());
req.setHeader('Content-Type', 'application/json');
req.setMethod('GET');
Http http = new Http();
HTTPResponse res = http.send(req);
return res.getBody();
}
/*Method to get org instance*/
private static String getInstance(){
String instance;
List<String> parts = System.URL.getSalesforceBaseUrl().getHost().replace('-api','').split('\\.');
if (parts.size() == 3 ) Instance = parts[0];
else if (parts.size() == 5 || parts.size() == 4) Instance = parts[1];
else Instance = null;
return instance;
}
} </code></pre>
</div>
<div>
<br />
<div>
<br /></div>
<div class="lead well">
Project Link : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000An7Jt" target="_blank">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000An7Jt</a></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com8tag:blogger.com,1999:blog-2434290243241406364.post-65543689561001977632014-01-29T22:36:00.000+05:302014-02-02T18:54:54.587+05:30Create a simple Force.com site using VisualStrap<div dir="ltr" style="text-align: left;" trbidi="on">
I just seeded a new version of VisualStrap with much more components and added a bit of optimisation to existing css. This blog is more about how you can create your Force.com site page very easily using VisualStrap.<br />
<br />
Lets take an example of a site of a Product/Company and talks about its features/offering. The site will be a very simple one, one main block which has the company/product banner and some other small blocks that talks about the features.<br />
<br />
<br />
<h3 style="text-align: left;">
The Design</h3>
<div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2gD1iyMsXfR3iJuLcT0nKGyOYiOwD43DqEvNa8oGZB8qFosrN8CeCBAYqOn4Nn_h_k9UQ5x79ls-gKegqAl5TfK_8E9x6WY4UDuJLhGiAchzWqCCuRbfgulm7ug2pgvoXQIUO7lphtpu/s1600/VSSiteDEsign.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2gD1iyMsXfR3iJuLcT0nKGyOYiOwD43DqEvNa8oGZB8qFosrN8CeCBAYqOn4Nn_h_k9UQ5x79ls-gKegqAl5TfK_8E9x6WY4UDuJLhGiAchzWqCCuRbfgulm7ug2pgvoXQIUO7lphtpu/s1600/VSSiteDEsign.jpg" height="444" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Design</td></tr>
</tbody></table>
To achieve the above design we will basically need the following stuff<br />
<br />
<h3 style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</h3>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<ul style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<li>navbar (header & footer)</li>
<li>well (for features and some minor items)</li>
<li>column (grid)</li>
<li>row (grid)</li>
<li>jumbotron (Highlighted main panel)</li>
</ul>
<br /></div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYlEfoiggZgjE5oY5ivGePUKFuBNTJq4TN49uL4VXbX6Dkfqvzk5oDxltCRkq5m7rQ3hAW80Afha7NeFhe1t73igQ6NFxt5XyrhabCIsnxQ46XdH_ycD15BGE-HIe43C26qS5wCgDIqtH/s1600/Page+Editor+++VSSite.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYlEfoiggZgjE5oY5ivGePUKFuBNTJq4TN49uL4VXbX6Dkfqvzk5oDxltCRkq5m7rQ3hAW80Afha7NeFhe1t73igQ6NFxt5XyrhabCIsnxQ46XdH_ycD15BGE-HIe43C26qS5wCgDIqtH/s1600/Page+Editor+++VSSite.png" height="304" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Desktop View</td></tr>
</tbody></table>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NbefT1CqIFXzoFiW6E-iSohXb5k5Kpsbopmqq5J43schTzUkz7W9nfp2HjKFNf6f9Neepwj5xGWkEipjgNYeEvT2l-CX1P3IN_hDUOQ8t-2WqFfEemcMBzXe42vjHS15IB6oAsNaocV_/s1600/Page+Editor+++VSSite.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NbefT1CqIFXzoFiW6E-iSohXb5k5Kpsbopmqq5J43schTzUkz7W9nfp2HjKFNf6f9Neepwj5xGWkEipjgNYeEvT2l-CX1P3IN_hDUOQ8t-2WqFfEemcMBzXe42vjHS15IB6oAsNaocV_/s1600/Page+Editor+++VSSite.png" height="454" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mobile View (the column type/class "col-md-4" makes the blocks stack on devices with lower screen resolution)</td></tr>
</tbody></table>
<div style="text-align: center;">
<a href="http://visualstrap-developer-edition.ap1.force.com/VSSite" target="_blank">http://visualstrap-developer-edition.ap1.force.com/VSSite</a></div>
<br />
So finally the actual page uses<br />
<br />
<h3 style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</h3>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<ul style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<li>navbar</li>
<li>well</li>
<li>column (grid)</li>
<li>row (grid)</li>
<li>button</li>
<li>modal</li>
<li>glyph</li>
<li>jumbotron</li>
</ul>
<br />
<br />
<h3 style="text-align: left;">
The Code</h3>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><apex:page showHeader="false" docType="html-5.0" >
<vs:importvisualstrap />
<style>
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.intro{
margin-top:20px;
font-size:140%;
font-weight: 200;
}
</style>
<vs:visualstrapblock >
<apex:form >
<!--header -->
<vs:navbar brand="Blogforce9" inverse="true" type="fixed-top">
A site about VisualStrap
</vs:navbar>
<!-- highlighted content -->
<apex:outputPanel layout="block" styleClass="container" >
<apex:outputPanel layout="block" styleClass="jumbotron" style="text-align:center">
<h1><vs:glyph icon="bookmark" style="font-size:75%"/> VisualStrap Demo Site</h1>
<p>This is a example how VisualStrap can be used to create a site page. All the standard components can be used inside this page without any problem </p>
<apex:commandButton styleClass="btn-lg btn-success" value="Submit Request" html-data-toggle="modal" html-data-target="#newRequest"/>
</apex:outputPanel>
</apex:outputPanel>
<!-- the feature section -->
<apex:outputPanel layout="block" styleClass="container" >
<apex:outputPanel layout="block" styleClass="row">
<apex:outputPanel layout="block" styleClass="col-md-4">
<apex:outputPanel layout="block" styleClass="well">
<h3>
<vs:glyph icon="cog"/> Optimized
</h3>
<div class="intro" >VisualStrap is based on Bootstrap 3. It uses a wrapper style class to designate the areas where actual theming using bootstrap is required. VisualStrap CSS is optimized to work with Visualforce pages even with standard stylesheet and header on.</div>
</apex:outputPanel>
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="col-md-4">
<apex:outputPanel layout="block" styleClass="well">
<h3>
<vs:glyph icon="retweet"/> Flexible
</h3>
<div class="intro" >VisualStrap is based on bootstrap there are many components available in the package that can be used to create pages. If are aware about bootstrap components you can directly implement them in page without using components </div>
</apex:outputPanel>
</apex:outputPanel>
<apex:outputPanel layout="block" styleClass="col-md-4">
<apex:outputPanel layout="block" styleClass="well">
<h3>
<vs:glyph icon="tasks"/> Components
</h3>
<div class="intro" >There are many components available in the package that makes Bootstrap/VisualStrap implementation inside a page very easy. These components handles most of the styling based on a very familiar syntax</div>
</apex:outputPanel>
</apex:outputPanel>
</apex:outputPanel>
</apex:outputPanel>
<!-- footer -->
<vs:navbar brand="Blogforce9" inverse="true" type="fixed-bottom" layout="none">
<center>
<apex:outputPanel styleClass="text-muted" style="margin:20px;font-size:130%" layout="block">
<vs:glyph icon="bullhorn"/> Site powered by Force.com
</apex:outputPanel>
</center>
</vs:navbar>
<!-- the modal form-->
<vs:modal title="New Request" id="newRequest">
<apex:pageBlock mode="maindetail">
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:outputLabel >First Name</apex:outputLabel>
<apex:input type="text"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Last Name</apex:outputLabel>
<apex:input type="text"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Email</apex:outputLabel>
<apex:input type="text"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:outputPanel styleClass="modal-footer" layout="block">
<apex:commandButton value="Close" styleClass="btn-warning" html-data-dismiss="modal"/>
<apex:commandButton value="Save Request" styleClass="btn-success" html-data-dismiss="modal"/>
</apex:outputPanel>
</vs:modal>
</apex:form>
</vs:visualstrapblock>
</apex:page></code></pre>
</div>
<br />
<br />
<div class="alert alert-info">
To use the above code you need to install the latest version of VisualStrap from the below link. If you are using the source files from Github to install the components replace the "vs:" in the above code with "c:".</div>
<div>
<br />
<div class="alert alert-warning">
<b>Important Notice</b> : There is a bug in platform related to <b>Managed Package only</b> due to which salesforce is not able to resolve the namespace name properly. I have a ticket raised with salesforce but its still open. Meanwhile if you face issues with it you can use the source from the Github or use the Unmanaged Package</div>
</div>
<div>
<span style="background-color: #f9cb9c;"><br /></span></div>
<div>
<br /></div>
<div class="well lead" style="clear: both;">
<ul>
<li>
Demo Page Link : <a href="http://visualstrap-developer-edition.ap1.force.com/VSSite" target="_blank">http://visualstrap-developer-edition.ap1.force.com/VSSite</a></li>
<li>
VisualStrap Project Link : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61</a>
</li>
</ul>
</div>
</div>
Avinava Maitihttp://www.blogger.com/profile/15921612158213317968noreply@blogger.com10tag:blogger.com,1999:blog-2434290243241406364.post-61195349206666827332014-01-16T11:38:00.001+05:302014-01-16T14:16:11.424+05:30PageBlockTableEnhancerADV : Yes we have the export now!<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
A bit of Introduction </h3>
<div>
<br /></div>
<div>
<b>PageBlockTableEnhancerADV</b> is a plugin that lets you convert a normal VisualForce pageblock table into a datatable. The component internally uses the Datatables plugin to bring in features like sorting, filtering and pagination.<br />
<br />
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
So what's new ?</h3>
<div>
<br /></div>
<div>
So as planned this post is all about File Exports!, Yes files export is being ported from <a href="http://datatables.net/" target="_blank">Datatables</a> to <b>PageBlockTableEnhancerADV. </b>To export files <b>PageBlockTableEnhancerADV </b>uses the Datatable plugin <a href="http://datatables.net/extras/tabletools/" target="_blank">TableTools</a>. TableTools is very flexible plugin that hooks in to the Datatables API to give in an amazing set of exporting option.</div>
<div>
<br /></div>
<div>
So this version of <b>PageBlockTableEnhancerADV </b>with the help of<b> TableTools </b>brings in </div>
<div>
<ul style="text-align: left;">
<li>Export to PDF</li>
<li>Export to CSV</li>
<li>Export to Excel</li>
<li>Printable view</li>
<li>Copy to clipboard</li>
</ul>
<div>
If you are not aware about the <b>PageBlockTableEnhancerADV or </b><b>PageBlockTableEnhancer </b>you can read about the same from the below links</div>
<div>
<ul style="text-align: left;">
<li><b><a href="http://blogforce9.blogspot.in/2013/11/pageblocktableenhanceradv-yet-another.html" target="_blank">PageBlockTableEnhancerADV</a></b></li>
<li><b><b><a href="http://blogforce9.blogspot.in/2013/06/pageblocktable-enhancer-v22-much-needed.html" target="_blank">PageBlockTableEnhancer</a></b></b></li>
</ul>
<div>
<b><br /></b></div>
<h3 style="text-align: left;">
List of Parameters </h3>
<div>
<br /></div>
<div>
<ul style="text-align: left;">
<li><i>targetPbTableIds : comma-separated Ids of the target Pageblock tables </i></li>
<li><i>paginate : Assign true if you want to use the pagination feature,default value is true.</i></li>
<li><i>pageSizeOptions : A comma separated list of integer values that will displayed as dropdown for page size</i></li>
<li><i> defaultPageSize : Default page size that needs to be selected (at page load).</i></li>
<li><b>enableExport</b> : Set this option to true to enable export toolbar (<i>new in v2</i>)</li>
<li><b>exportFileName</b> : Default filename to use when a user uses the export feature. (<i>new in v2</i>)</li>
</ul>
<div>
<br /></div>
<h3 style="text-align: left;">
Syntax</h3>
</div>
</div>
<div>
<br /></div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px dashed rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; margin-bottom: 10px; overflow: auto; padding: 0px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; box-sizing: border-box; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0px; word-wrap: normal;"><c:PageBlockTableEnhancerADV targetPbTableIds="mid,mid2" paginate="true" defaultPageSize="5" pageSizeOptions="5,10,20,30,40,50,100" enableExport="true" exportFileName="myFile"/> </code></pre>
</div>
<div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbrGCSrzfo3yZGbijixhCYdUJGovmAOOCGj5SjkdtWQNIdI0Ij_yNdsaByj5JXkrRjtflmmp4QKi82w08VCtpsnnc_XtWPzmRGzrinwS1Gw1-B5XguV_O2JrjEz7FMTl_Rrzd_ajwkqOFF/s1600/Page+Editor+++PageBlockTableEnhancerADVDemo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbrGCSrzfo3yZGbijixhCYdUJGovmAOOCGj5SjkdtWQNIdI0Ij_yNdsaByj5JXkrRjtflmmp4QKi82w08VCtpsnnc_XtWPzmRGzrinwS1Gw1-B5XguV_O2JrjEz7FMTl_Rrzd_ajwkqOFF/s1600/Page+Editor+++PageBlockTableEnhancerADVDemo.png" height="218" width="640" /></a></div>
<div>
<br /></div>
<div class="well lead" style="text-align: center;">
<b>Demo,Source And Installation Link</b><span center="" text-align:=""> : </span><a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M3zR">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009M3zR</a></div>
<div>
<br /></div>
</div>
Avinava Maitihttp://www.blogger.com/profile/15921612158213317968noreply@blogger.com25tag:blogger.com,1999:blog-2434290243241406364.post-55789487247906292972014-01-09T17:12:00.003+05:302014-02-10T02:57:57.243+05:30VisualStrap - Exploring Possibilities!<div dir="ltr" style="text-align: left;" trbidi="on">
Few days ago I introduced a set of components called "<b>VisualStrap</b>" which will bring the BootStrap to VisualForce pages very easily. <b>VisualStrap</b> is still work in progress , I am adding new components and improving it whenever I get time.<br />
<br />
Till now, I was able to document about most of the components but the documentation needs much more than just description rather may be some examples, showing the capability of the package.<br />
<br />
Here are some very first examples.<br />
<br />
<h3 style="text-align: left;">
<u>
Case Overview Page </u></h3>
<div>
<br /></div>
A simple highlight bar style page that gives a quick glance of the Case. This page demonstrates the use of some common <b>VisualStrap</b> components and how <b>VisualStrap</b> grid works.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TQ2ooJPWYV32tDTGF57MPeGIBxiPoNEQJDS_WseT-OtpVrHToNAYPhvIX9fTKwEaKZp_MExLqZTgyE44vztGUQucutV5jUo91ysc3wCYUCsKe6KqKijG_WMir_x2qWT0k8qaRcgi5HwP/s1600/CaseOverview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0TQ2ooJPWYV32tDTGF57MPeGIBxiPoNEQJDS_WseT-OtpVrHToNAYPhvIX9fTKwEaKZp_MExLqZTgyE44vztGUQucutV5jUo91ysc3wCYUCsKe6KqKijG_WMir_x2qWT0k8qaRcgi5HwP/s1600/CaseOverview.png" height="195" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Demo Page Link : </b><a href="http://visualstrap-developer-edition.ap1.force.com/VSCaseOverview?id=5009000000EfPQo" target="_blank">http://visualstrap-developer-edition.ap1.force.com/VSCaseOverview?id=5009000000EfPQo</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br class="Apple-interchange-newline" />
<b>This page mainly uses the following <i>VisualStrap</i> components</b><br />
<br />
<ul>
<li>row</li>
<li>column</li>
<li>glyph</li>
<li>well</li>
<li>panel</li>
</ul>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><apex:page standardController="Case" sidebar="false" docType="html-5.0">
<style>
.glow{
animation: flashBg 0.9s;
-webkit-animation: flashBg 0.9s alternate infinite;
}
@keyframes flashBg
{
from {
border: 3px solid #ff6161;
}
to {
border: 3px solid #ffd324;
}
}
@-webkit-keyframes flashBg /* Safari and Chrome */
{
from {
border: 3px solid #ff6161;
}
to {
border: 3px solid #ffd324;
box-shadow: 0px 0px 50px 3px #e14f1c;
}
}
</style>
<vs:importvisualstrap />
<vs:visualstrapblock >
<vs:panel type="primary" title="Case Overview">
<vs:row >
<vs:column type="col-md-3">
<div class="glow">
<vs:well style="text-align:center">
<vs:row >
<vs:column type="col-md-4" style="font-size:54px">
<vs:glyph icon="time" style="color:red"/>
</vs:column>
<vs:column type="col-md-8">
<h2>
{!ROUND(NOW() - Case.CreatedDate,0)}
</h2>
<p class="text-muted infolabel">Days waiting for response</p>
</vs:column>
</vs:row>
</vs:well>
</div>
</vs:column>
<vs:column type="col-md-3">
<vs:well style="text-align:center">
<vs:row >
<vs:column type="col-md-4" style="font-size:54px">
<vs:glyph icon="flag"/>
</vs:column>
<vs:column type="col-md-8">
<h2>
{!Case.Status}
</h2>
<p class="text-muted infolabel">Current case status</p>
</vs:column>
</vs:row>
</vs:well>
</vs:column>
<vs:column type="col-md-3">
<vs:well style="text-align:center">
<vs:row >
<vs:column type="col-md-4" style="font-size:54px">
<vs:glyph icon="filter"/>
</vs:column>
<vs:column type="col-md-8">
<h2>
{!Case.Type}
</h2>
<p class="text-muted infolabel">Case Type</p>
</vs:column>
</vs:row>
</vs:well>
</vs:column>
<vs:column type="col-md-3">
<vs:well style="text-align:center">
<vs:row >
<vs:column type="col-md-4" style="font-size:54px">
<vs:glyph icon="comment"/>
</vs:column>
<vs:column type="col-md-8">
<p>
{!Case.Subject}
</p>
<p class="text-muted infolabel">Subject</p>
</vs:column>
</vs:row>
</vs:well>
</vs:column>
</vs:row>
</vs:panel>
</vs:visualstrapblock>
<apex:detail title="false"/>
</apex:page> </code></pre>
<div style="text-align: left;">
<br /></div>
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
</h4>
<h3 style="text-align: left;">
<u>
User Dashboard Page</u></h3>
<div>
<br /></div>
<div>
This page is a simple dashboard that gives user about the daily information that they need. Like pending activities for the day, assigned cases, assigned leads, last viewed Accounts/contacts. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwin2folx2M3CDxHuQ1yvbavW-lE-oBVzwMb1Lh4_AFFDnOusRPwnoVtQZ2f29YTW4Jb9r1u4fLW0VLs3Yp9xvCtI6BjFBEIIPRIiY-IvW4mO3lMmaXXSg0TaLO2xFoqeNKVHjEh5YZP9/s1600/VSDashBoard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwin2folx2M3CDxHuQ1yvbavW-lE-oBVzwMb1Lh4_AFFDnOusRPwnoVtQZ2f29YTW4Jb9r1u4fLW0VLs3Yp9xvCtI6BjFBEIIPRIiY-IvW4mO3lMmaXXSg0TaLO2xFoqeNKVHjEh5YZP9/s1600/VSDashBoard.png" height="316" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: Times; font-size: medium; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div style="margin: 0px; text-align: center;">
<div style="font-style: normal;">
<b>Demo Page Link :</b> <a href="http://visualstrap-developer-edition.ap1.force.com/VSDashBoard" target="_blank">http://visualstrap-developer-edition.ap1.force.com/VSDashBoard</a></div>
<i>[The layout is mobile friendly try opening the link in a iPad or try to scale down your browser window. The blocks will stack according to screen real estate]</i></div>
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>This page mainly uses the following <i>VisualStrap</i> components</b></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li>row</li>
<li>column</li>
<li>glyph</li>
<li>alert</li>
<li>panel</li>
<li>tables</li>
<li>well</li>
</ul>
<div>
<br /></div>
<div>
</div>
<br />
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"><apex:page sidebar="false" docType="html-5.0" controller="VSDashBoard_Con">
<vs:importvisualstrap />
<vs:visualstrapblock >
<center>
<vs:pageheader title="User Dashboard" icon="calendar" subtitle="{!$User.FirstName} {!$User.LastName}"/>
</center>
<vs:row >
<vs:column type="col-md-4">
<vs:panel title="Tasks" type="primary">
<vs:well style="text-align:center;">
<vs:glyph icon="tasks" style="font-size:40px"/> &nbsp;<span style="font-size:54px">{!Tasks.size}</span>
<p class="text-muted">Tasks due for Today</p>
</vs:well>
<apex:dataTable value="{!Tasks}" var="task" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Subject">
<apex:outputLink value="/{!task.Id}">{!task.Subject}</apex:outputLink>
</apex:column>
<apex:column value="{!task.Status}" headerValue="Status"/>
<apex:column value="{!task.ActivityDate}" headerValue="Due Date"/>
</apex:dataTable>
<vs:alert rendered="{!Tasks.empty}" type="success" style="text-align:center">
<vs:glyph icon="ok-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
<vs:column type="col-md-4">
<vs:panel title="Cases" type="primary">
<vs:well style="text-align:center;">
<vs:glyph icon="briefcase" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!Cases.size}</span>
<p class="text-muted">Assigned Cases</p>
</vs:well>
<apex:dataTable value="{!Cases}" var="case" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Case Number">
<apex:outputLink value="/{!case.Id}">{!case.CaseNumber}</apex:outputLink>
</apex:column>
<apex:column value="{!case.Status}" headerValue="Status"/>
<apex:column value="{!case.Priority}" headerValue="Priority"/>
</apex:dataTable>
<vs:alert rendered="{!Cases.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
<vs:column type="col-md-4">
<vs:panel title="Leads" type="primary">
<vs:well style="text-align:center;">
<vs:glyph icon="user" style="font-size:40px"/>&nbsp;<span style="font-size:54px">{!Leads.size}</span>
<p class="text-muted">Unread Leads</p>
</vs:well>
<apex:dataTable value="{!Leads}" var="lead" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Name">
<apex:outputLink value="/{!lead.Id}">{!lead.Name}</apex:outputLink>
</apex:column>
<apex:column value="{!lead.Status}" headerValue="Status"/>
<apex:column value="{!lead.CreatedDate}" headerValue="Created Date"/>
</apex:dataTable>
<vs:alert rendered="{!Leads.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
</vs:row>
<vs:row >
<vs:column type="col-md-6">
<vs:panel title="Last Viewed Accounts" type="primary">
<apex:dataTable value="{!Accounts}" var="acc" styleClass="table table-condensed table-hover table-bordered" >
<apex:column headerValue="Name">
<apex:outputLink value="/{!acc.Id}">{!acc.Name}</apex:outputLink>
</apex:column>
<apex:column value="{!acc.Type}" headerValue="Type"/>
<apex:column value="{!acc.BillingState}" headerValue="State"/>
</apex:dataTable>
<vs:alert rendered="{!Accounts.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
<vs:column type="col-md-6">
<vs:panel title="Last Viewed Contacts" type="primary">
<apex:dataTable value="{!Contacts}" var="contact" styleClass="table table-condensed table-hover table-bordered" rows="3">
<apex:column headerValue="Name">
<apex:outputLink value="/{!contact.Id}">{!contact.Name}</apex:outputLink>
</apex:column>
<apex:column value="{!contact.Phone}" headerValue="Phone"/>
<apex:column value="{!contact.Department}" headerValue="Department"/>
</apex:dataTable>
<vs:alert rendered="{!Contacts.empty}" type="warning" style="text-align:center">
<vs:glyph icon="exclamation-sign"/> No records to display
</vs:alert>
</vs:panel>
</vs:column>
</vs:row>
</vs:visualstrapblock>
</apex:page> </code></pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;"> public without sharing class VSDashBoard_Con {
public List<Task> getTasks(){
return [SELECT Id,Subject,Status, ActivityDate FROM Task WHERE ActivityDate = TODAY AND Status != 'Completed' AND Status != 'Deferred'];
}
public List<Case> getCases(){
return [SELECT Id,CaseNumber,Status,Subject, Priority FROM Case WHERE OwnerId=:UserInfo.getUserId() AND isClosed = FALSE];
}
public List<Lead> getLeads(){
return [SELECT Id,Name,Status, CreatedDate FROM Lead WHERE OwnerId=:UserInfo.getUserId() AND IsUnreadByOwner = true];
}
public List<Account> getAccounts(){
return [SELECT Id,Name,BillingState,Type FROM Account ORDER BY LastViewedDate DESC limit 5 ];
}
public List<Contact> getContacts(){
return [SELECT Id,Name,Phone, Department FROM Contact ORDER BY LastViewedDate DESC limit 5 ];
}
} </code></pre>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator alert alert-info" style="clear: both; text-align: left;">
<b>Please Note :</b> You can use <code><apex:outputPanel layout="block" styleClass="row"></code> or <code><div class="row"></code> instead of <code><vs:row></code>. Similarly you can use <code><apex:outputPanel layout="block" styleClass="col-md-4"></code> or <code><div class="col-md-4"></code> instead of <code><vs:column type="col-md-4"> . </code>And you can also use Bootstrap components inside the pages</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
VisualStrap is not limited to just these two pages, it can be leveraged to do much more. People out there can extend this to do much more ! Visualstrap is available as Managed package and as well as github. You can grab the same from the project detail page.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator alert alert-info" style="clear: both; text-align: left;">
To make the above examples work you have to install <b>VisualStrap</b> from project page below. "vs" is namespace prefix from the managed package, if you are using the source from github you may have to replace <code>"vs:"</code> with just <code>"c:"</code>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator well lead" style="clear: both; text-align: left;">
VisualStrap Project Link : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61" target="_blank">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
</div>
Avinava Maitihttp://www.blogger.com/profile/15921612158213317968noreply@blogger.com7tag:blogger.com,1999:blog-2434290243241406364.post-91907945406260633242014-01-02T19:13:00.000+05:302014-01-16T14:53:35.051+05:30Simple Popup In Salesforce Standard & VF Pages - SimpleDialog [Hack]<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
Well this is something that should be called as hack. While working with salesforce Js libraries I found some interesting methods hidden inside. Well most of them are very difficult to understand because of the naming of different input parameters but somehow I was able to decode one of them which are related to generating popup.<br />
<br />
<h3 style="text-align: left;">
<b>SimpleDialog</b></h3>
<div>
<br />
Simple dialog generates a very simple popup/dialog. So far from the code it looks like</div>
<div>
<ul style="text-align: left;">
<li>Modal popup</li>
<li>Can be draggable</li>
<li>Option to set title and content</li>
<li>Supports html in the body</li>
</ul>
<div>
So here is a bit of code that will fire a SimpleDialog</div>
</div>
<div>
<br />
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">function showSimpleDialog(){
var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);
sd.setTitle("Test Pop up");
sd.createDialog();
window.parent.sd = sd;
sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");
sd.show();
}
showSimpleDialog(); //open the popup </code></pre>
<br /></div>
<div>
This code will create a popup like below</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPiCwt0rXCtKUAZbvwoCEMCiDsjn3ZYA0pEPYuVpwtSNT8WibmWazcUrAsvevUF1ss4rE5lkUSVFtVvCanTPQdv6kdR4dXXCxmDxPyS3z1qfBsFFS1DaeGG4KhSuK4vxPP9b3zK5iIQiU/s1600/SimpleDialog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPiCwt0rXCtKUAZbvwoCEMCiDsjn3ZYA0pEPYuVpwtSNT8WibmWazcUrAsvevUF1ss4rE5lkUSVFtVvCanTPQdv6kdR4dXXCxmDxPyS3z1qfBsFFS1DaeGG4KhSuK4vxPP9b3zK5iIQiU/s640/SimpleDialog.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<h3 style="text-align: left;">
<b>Bit of Explanation about different parameters / Methods</b></h3>
<div>
<b><br /></b></div>
<div>
<ul style="text-align: left;">
<li><b>Dialog Id</b><br /><pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; font-weight: normal; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828125px;"><code style="word-wrap: normal;">var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false); </code></pre>
The firs parameter here is the dialog Id it is pretty much handled by salesforce internal method "getNextId" you can change the prefix to something more relevant. Make sure you use "getNextId" method everytime you generate a dialog else the popup won't be generated properly.</li>
<li><b>Draggable</b><br /><pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; font-weight: normal; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828125px;"><code style="word-wrap: normal;">var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false); </code></pre>
whether a dialog is draggable or not it is decided by the second parameter. Set the second parameter to true to make the dialog draggable</li>
<li><b>Title / setTitle</b><br /><pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; font-weight: normal; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828125px;"><code style="word-wrap: normal;">sd.setTitle("Test Pop up"); </code></pre>
This line actually sets the title of the popup</li>
<li><b>setContentInnerHTML</b><br /><pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; font-weight: normal; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");
</code></pre>
This lines basically sets the content of the popup. It should be a valid HTML content</li>
<li><b>show</b><br />This method triggers the popup and displays the content</li>
<li><b>hide</b><br />This method hides the popup</li>
</ul>
<div>
Or code can be wrapped a bit to make it simpler </div>
<div>
<br />
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">function showSimpleDialog(title,htmlBody,isDraggable){
var sd = new SimpleDialog("SD"+Dialogs.getNextId(), isDraggable);
sd.setTitle(title);
sd.createDialog();
sd.setContentInnerHTML(htmlBody);
sd.show();
return sd;
}
showSimpleDialog('Sample','This is sample modal popup',false); </code></pre>
<br /></div>
<div style="text-align: left;">
<b>So simplified parameters would be</b></div>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><b>title : </b>Title of the popup</li>
<li><b>htmlBody</b> : html content that you want to display in the popup</li>
<li><b>isDraggable</b> : set this to true if you want the popup to be draggable.</li>
</ul>
<br />
<h3 style="text-align: left;">
<b>Special consideration while using the popup in a standard page</b></h3>
</div>
<div>
<b><br /></b></div>
<div>
<b><br /></b></div>
<div>
You can copy the sample script inside onclick javascript of a custom button on a standard layout to implement the popup. But you have to bit careful and have to maintain the context of the "sd" variable.</div>
<div>
<br /></div>
<div>
If you check the sample script code you can see that we can display a popup by calling the "show()" method, but while working with standard pages the context variable "sd" is lost and you cannot actually call "sd.hide()" to hide the popup. To overcome this we are saving the context of the popup in "window.parent" global variable. </div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">window.parent.sd = sd; </code></pre>
</div>
<div>
and now you can access the dialog context and call hide/show function by doing </div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">window.parent.sd.hide();</code></pre>
</div>
<div>
Well if you are working in a VF page you dont need this workaround you can directly call</div>
<div>
<pre style="background-color: #f0f0f0; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGPvNmvXY9IayBppt9QD5fMyeDarda2wP0DV_BMJFWlriC_iWa_lcTVNjefOlSAvGJdtFCFfwlJ6wgKALSqtfxnMgR-9W7cK71mxheL4zqp4gs2TL_ZaNuJJnBJ38fr3EyPly9-wnXZg9/s320/codebg.gif); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px;"><code style="word-wrap: normal;">sd.hide(); </code></pre>
</div>
<div>
<br /></div>
<div class="well lead">
Demo/Installation : <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000AmQXP" target="_blank">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000AmQXP</a></div>
<div class="alert alert-danger">
<b>Please Note :</b> This example uses Salesforce internal libraries to create a dialog. Use of this libraries are discouraged by Salesforce as they can change anytime</div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com4tag:blogger.com,1999:blog-2434290243241406364.post-77881429879344302912013-12-14T14:57:00.002+05:302014-04-12T00:57:51.541+05:30VisualStrap : Visualforce Implementation of Boostrap<div dir="ltr" style="text-align: left;" trbidi="on">
After around months of playing with Bootstrap and Visualforce here is a first version of "VisualStrap". VisualStrap is a set of components that work inside your visualforce page without affecting the standard layouts (if you directly import Bootstrap inside a VF page it will mess up the whole page).<br />
<div>
<br /></div>
<div>
With VisualStrap you can make your VF pages more appealing to user , more responsive and more user friendly. Currently the below set components are Bootstrap are converted into VisualStrap but I am working hard to bring them all.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
What you get with this version of VisualStrap ? </h3>
<div>
<ul style="text-align: left;">
<li>Panels</li>
<li>Alert</li>
<li>Well</li>
<li>Label</li>
<li>Badges</li>
<li>Jumbotron</li>
<li>Forms (Vertical and Horizontal)</li>
<li>Glyphicons</li>
<li>Thumbnails</li>
<li>Column and Rows (Grid) </li>
<li>Tables (<em>new 1.1)</em></li>
<li>Buttons (<em>new 1.1)</em></li>
<li>ButtonGroup (<em>new in v1.3)</em></li>
<li>ButtonToolBar (<em>new <em>in v1.3</em>) </em></li>
<li>Pageheader (<em>new <em>in v1.3</em>)</em></li>
<li>Progressbar (<em>new <em>in v1.3</em>)</em></li>
<li>Tooltip (<em>new <em>in v1.4</em>)</em></li>
<li>List Group and List Group Item (<em>new <em>in v1.4</em>)</em></li>
<li>Modal (<em>new <em>in v1.4</em>)</em></li>
<li>Navbar (<em>new <em>in v1.4</em>)</em></li>
</ul>
<div>
VisualStrap is available as a managed package so that it will be easy for users to upgrade it whenever a new release is released (Source is available @Github please check the project detail page) </div>
</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPfHDc67OuH42BZzRlA93MCQG3MjwLCrc_KN6M_CGUTHSj1QsNrQtarVlkREAVJeQn0k6SHldLwuW3JLMO-V23zVirwqyOnUJuRIiSw8gFvgBBAThcoczCdqtmTqfO2dCNxEFU4nN-Xk/s1600/VisualStrapDemo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPfHDc67OuH42BZzRlA93MCQG3MjwLCrc_KN6M_CGUTHSj1QsNrQtarVlkREAVJeQn0k6SHldLwuW3JLMO-V23zVirwqyOnUJuRIiSw8gFvgBBAThcoczCdqtmTqfO2dCNxEFU4nN-Xk/s400/VisualStrapDemo.png" height="203" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg-_cBQouOdN6Oq2EFshLRX2J7jzQju4mEAi7vc1MZA0ukMZd7UucsuNUsNyWouiw9lXs0JRL6BC6dZ-H4kSd-rHqGw4MYShzc_VQ7FgIY4Y4_BZrZ4ycmbLGnI0tR0ib5uSAM9yUi-Mg/s1600/VisualStrapDemo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg-_cBQouOdN6Oq2EFshLRX2J7jzQju4mEAi7vc1MZA0ukMZd7UucsuNUsNyWouiw9lXs0JRL6BC6dZ-H4kSd-rHqGw4MYShzc_VQ7FgIY4Y4_BZrZ4ycmbLGnI0tR0ib5uSAM9yUi-Mg/s400/VisualStrapDemo.png" height="153" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99GXP6_uY3DksCNhhzYV3-RvXpiIhxt1NTzS_8fpoocg60KMqj_Ib2dUYp9OE0qOoWPwnqIzf5l9QHdyh8F6NtE49iFOTmU67W_3APDSagCeUhzCXnEQyvCrAXG_NR-mUzv79AtvqVMQ/s1600/VisualStrapDemo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99GXP6_uY3DksCNhhzYV3-RvXpiIhxt1NTzS_8fpoocg60KMqj_Ib2dUYp9OE0qOoWPwnqIzf5l9QHdyh8F6NtE49iFOTmU67W_3APDSagCeUhzCXnEQyvCrAXG_NR-mUzv79AtvqVMQ/s400/VisualStrapDemo.png" height="200" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br /></div>
<div>
<h3 style="text-align: left;">
Where can you use it ?</h3>
</div>
<div>
Almost everywhere! But you can consider VisualStrap for pages that are exposed as Salesforce Sites or in Customer Portal. </div>
<div>
<br />
To get started and create some awesome UI please follow the project link below</div>
<div>
<br />
<h3 style="text-align: left;">
<b>Documentation & Installation </b></h3>
Please visit the Project page for documentation, Installation and Github link.<br />
<br /></div>
<div class="well lead">
<b>Project Link :</b> <a href="http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61">http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61</a><br />
<br />
<b>Related Posts</b><br />
<br />
<ul style="text-align: left;">
<li><b><a href="http://blogforce9.blogspot.in/2014/01/visualstrap-possibilities.html" target="_blank">VisualStrap - Exploring Possibilities!</a></b></li>
<li><b><a href="http://blogforce9.blogspot.in/2014/01/create-simple-site-using-visualstrap.html" target="_blank">Create a simple Force.com site using VisualStrap</a></b></li>
<li><b><a href="http://blogforce9.blogspot.in/2014/01/create-simple-site-using-visualstrap.html" target="_blank">Using Visualstrap with Salesforce1 : User Dashboard / Overview Page</a> </b></li>
</ul>
<br />
<br /></div>
</div>
Avihttp://www.blogger.com/profile/03621884687309047868noreply@blogger.com25