Showing posts with label VisualForce. Show all posts
Showing posts with label VisualForce. Show all posts

Thursday, August 8, 2019

How to Display Hyperlink in Visual Force Page When Rendering in Lightning Experience


  • To do this we have to use the Salesforce Lightning Design System(SLDS) styles in visual force page.
  • In SLDS we have a style class called slds-text-link which will highlights the specified text with different color with underscore link.

Sample Source Code:


<apex:page standardController="Case"  sidebar="false" lightningStylesheets="true">
    <apex:slds />
    <apex:form id="formId" >
      
        <div class="slds-text-link">
            <apex:outputText>I Love Coding</apex:outputText>
            
        </div>
    </apex:form>
</apex:page>

Output:



Hope this helped you..Enjoy!..

How to Use SLDS Icons/SVGs in Visual Force Pages

To use Icons/Svgs in visual force pages below 2 steps is required

  • Include latest slds styles   <apex:slds />
  • apply use property in svg tag with required icon
       <use xmlns:xlink="http://www.w3.org/1999/xlink" 
           xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#call" />
                

<apex:page standardController="Case" docType="html-5.0" id="pageId" showHeader="false" showChat="false" sidebar="false" lightningStylesheets="true">
    <apex:slds />
    <apex:form id="formId" >
        <div class="slds-truncate sldswordWrap" >
            <span class="slds-icon_container slds-icon-standard-call" title="Dial To Bo">
                <svg class="slds-icon" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#call" />
                </svg>
                <span class="slds-assistive-text">Description of icon when needed</span>
            </span>
        </div>
    </apex:form>
</apex:page>

Output:



Hope this helped you..Enjoy!..

How to Use Rendered Attribute With Html Tags

Scenario:

Basically if you want to conditionally show/hide in any visual force element we will use the "rendered=true/false".Let assume if your using any html tags like <div> <span> in your visual force page and you want to hide/show conditionally we can not use the "rendered=true/false" property with these html tags.

Solution:

In these type of situations you can use some standard css styles to show or hide html content on conditionally.


<div style="{!IF(AND(condition1,condition2),'display:block','display:none')}">

//display:block - Shows the content,it's similar to rendered="true"

//dispaly:none - Hides the content,it's similar to rendered="false"

Sample Code:

<div class="slds-truncate sldswordWrap" style="{!IF(AND(condition1,condition2),'display:block','display:none')}">
      <span class="slds-icon_container slds-icon-standard-call">
        <svg class="slds-icon" aria-hidden="true">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#call" />
        </svg>
        <span class="slds-assistive-text">Description of icon when needed</span>
      </span>
</div>

Hope this helped you..Enjoy!..

Wednesday, July 10, 2019

How To Check Whether User is In Console or Not in Lightning Experience

Basically if you want to check whether user in Lightning experience console(sales/service consoles in lightning experience not the just lightning experience ) you can use the same sforce console methods which you have used in classic.This method will support in lightning experience with out any changes.

Sample code:

<apex:page> 
<apex:includeScript value="/support/console/42.0/integration.js" /> 
<apex:includeScript value="/support/api/41.0/interaction.js"/> 

<button onclick="openTab();" > Console openPrimaryTab</button> 

<script> 
function inConsole() { 
if (sforce.console.isInConsole()) { 
alert('In console'); 
}else { 
alert('Not in console'); 
} 
}
</apex:page>

Note:
Even after using this if it's not working please check you version of /support/api/42.0/integration.js. If your version is below 42 then it will not work.So,please change the version it will work automatically.

Hope this helped you..Enjoy!..

Wednesday, August 23, 2017

Salesforce Site Template is Not Coming in Force.com Site

If your Site Template is not coming on your there might be the below issues.

1. Site Template page has not been added for Site Template on Site Detail Page



2. If your using any visual force page in your sites and if your not adding Template to visual force page you will not be able show the template.Please add the template to each and every page.


<apex:page standardController="Case" showHeader="false">
    <apex:composition template="{!$Site.Template}">
        <apex:define name="body">
    <head>
              <apex:includeScript value="{!$Resource.dataTableJS}"/>
       <apex:stylesheet value="{!$Resource.dataTableCSS}" />
     </head>
   <apex:form>
      ----
      ----
   </apex:form>
 </apex:define>
   </apex:composition>
</apex:page>

Hope this helps you...Enjoy!

CSS Styles/Scripts Are Not Working in Salesforce Force.com Sites

If your styles/scripts are working perfectly in Sandbox and Production preview but if it's not working on Force.com sites which has hosted publicly on Sales force server below points might be the issue.

Your page is referring to some external CSS/JS files:

<apex:page>
 <head>
 <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> 
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>

If your referring any styles/scripts from external sources with out storing them in Static Resource you will end up with problem Please store that files in Statistic resource and then use it then it will work in Force.com sites as well.


<apex:page>
 <head>
  <apex:includeScript value="{!$Resource.dataTableJS}"/>
  <apex:stylesheet value="{!$Resource.dataTableCSS}" />
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>


Your Static Resource is File not accessible publicly



If your using any static resource in your page and if that static resource is not accessible publicly (Cache Control set to Private) then styles will not reflect in Force.com sites.So mark your Static resources cache control as Public



Hope this helps you...Enjoy!


Monday, July 3, 2017

How To Dispaly The DropDown Values With CheckBoxes Vertically In Visual Force

In my previous post I have explained to how to display the drop down values with check boxes so we will use the same post but In this post I will explain how to display that list vertically rather than horizontally.

In <apex:SelectCheckBoxes> tag we have an attribute called 'layout' which will decides the direction of the display .If you set that to layout="pageDirection" then it will displays automatically in vertical.

Source Code:


In VisualForce Page:

<apex:selectcheckBoxes value="{!selFruits}" layout="pageDirection">
 <apex:selectOption itemLabel="Mango" itemValue="Mango" />
 <apex:selectOption itemLabel="Apple" itemValue="Apple" />
 <apex:selectOption itemLabel="Banana" itemValue="Banana" />
 <apex:selectOption itemLabel="Guava" itemValue="Guava"/>
        <apex:selectOption itemLabel="Orange" itemValue="Orange"/>

</apex:selectcheckBoxes>

In Apex Class:

Public List<String> selFruits{get;set;} // This should be list not Single String


OutPut:




Thanks for visiting..hope this helps you!