Showing posts with label HTML. Show all posts
Showing posts with label HTML. 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!..

Saturday, July 6, 2019

Base Lightning Components in Salesforce LWC

In Lightning web components(lwc) we will Base Lightning Components to display the particular record information/to create a record quickly with provided information with out using any custom apex.

List of the available Base Lightning Components are
  • lightning-record-edit-form
  • lightning-record-form
  • lightning-record-view-form

lightning-record-edit-form:

  • This component wrapper accepts the record id to display one or more fields and labels related to that field corresponding to given record id 
  • This will not require any apex because it uses Lightning Data Services to fetch the data
  • This will not support Standard objects like Task and Events.
  • Use lightning-output-field to display data in read only format
  • Use lightning-input-field to edit these fields in edit on record edit page

lightning-record-form:

  • Use this component to build the forms quickly to create a record,view the record or to update the record. 
  • Building the record creation forms is easier than building the form using lightning-record-edit-form and lightning-record-view-form. 
  • This component accepts 4 properties like object name which is mandatory,record id which is optional in case of create record ,mode to specify view/edit/read only and layout type like Full or compact
  • It will also takes care of FLS and sharing rules
 <lightning-record-form  
   record-id="739hchjsh773"  
   object-api-name="Position__c"  
   layout-type="Full"  
   mode="view">  
 </lightning-record-form>  

lightning-record-view-form:

  • Use this component when you want to dispaly the record on view mode
  • This will not require any apex because it uses Lightning Data Services to fetch the data
  • This will not support Standard objects like Task and Events.
  • It will also takes care of FLS and sharing rules.

For more information refer:

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!

How To Display Drop down Values With Check Box in Visual Force Page

If you want to display each drop down value with the checkbox you can use the below code snippet.In below code we are using Salesforce tag called <apex:selectCheckboxes> and inside that we are adding all the SelectOptions.

Source Code:

In VisualForce Page:

<apex:selectcheckBoxes value="{!selFruits}" >
 <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!