Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PappuPappu 

new post

Hi Guys,

I should create a Visualforce page by using SLDS with a dropdown list having all the custom list view names and a table which display the record's of the selected list view.

I have created the basics of VF page with SLDS but, not able to append the List view to dropdown and display the related list view records in a table.

Below is my code. Your help is highly appreciated.

VF Page:

<apex:page controller="example" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    
<apex:form>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'styles/salesforce-lightning-design-system.css')}" />
</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds">    

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->
  <div class="slds-grid">

    <!-- GRID COL -->
    <div class="slds-col">

      <!-- HEADING AREA -->
      <p class="slds-text-heading--label">Accounts</p>
      <h1 class="slds-text-heading--medium">My Accounts</h1>
      <!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->
    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">
          New Account
        </button>
        <button class="slds-button slds-button--neutral">
          More
        </button>
      </div>

    </div>
    <!-- / GRID COL -->

  </div>
  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>
<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->
<div class="slds-form-element">
    <label class="slds-form-element__label">Account Type</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:selectList value="{!selectedVal}" size="1"> 
    <apex:selectOption value="{!list}" /> 
</apex:selectList>
        </div>
    </div>
</div>
      
<!-- / PRIMARY CONTENT WRAPPER -->   

<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
  <!-- LAYOUT GRID -->
  <div class="slds-grid slds-grid--align-spread">
    <p class="slds-col">Salesforce Lightning Design System Example</p>
    <p class="slds-col">&copy; Your Name Here</p>
  </div>
  <!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->    

</html>
    </apex:form>
</apex:page>

APEX Controller:

Public class example {
    
public String selectedVal{get;set;}  // This will hold the selected value, the id in here

public List<SelectOption> getlist(){
      
        List<SelectOption> optns = new List<SelectOption>();
        // before getting here you must populate your queryResult list with required fields
        for(SelectOption lstObj : [SELECT Id, Name FROM Listview WHERE SobjectType = 'Request__C' order by name ASC]){
            optns.add(new SelectOption (lstObj.Name));
        }
        return optns;
}
    }


Please Note : The requirement is creating the VF ONLY with SLDS.
sachin kadian 5sachin kadian 5
Hi,

I am not sure but what i think is we cannot query all the records that belongs to a specific list view. 

What i can suggest you is , you can render whole list view using following code -

VF page - 
  
<apex:page showHeader="true" tabstyle="Case" controller="TextVFPDFController">
    
    <apex:form>
        <apex:selectList value="{!selectedVal}" size="1"> 
            <apex:selectOptions value="{!list}" > 
                
            </apex:selectOptions>
            <apex:actionSupport event="onclick" reRender="LeadList"/>
        </apex:selectList>
        
    </apex:form>
    
    
    <apex:outputPanel id="LeadList">
        <apex:enhancedList type="Lead" height="300" rowsPerPage="25" customizable="False" listId="{!selectedVal}"/>   
    </apex:outputPanel>
    
</apex:page>

Apex class- 
public class TextVFPDFController {
    public String selectedVal{get;set;}  // This will hold the selected value, the id in here
    
    public List<SelectOption> getlist(){
        
        List<SelectOption> optns = new List<SelectOption>();
        // before getting here you must populate your queryResult list with required fields
        for(Listview lstObj : [SELECT Id, Name FROM Listview WHERE SobjectType = 'Lead' order by name ASC]){
            String listId = lstObj.Id;
            listId = listId.subString(0,15);
            if(selectedVal == null){
                selectedVal = listId;
            }
            optns.add(new SelectOption (listId,lstObj.Name));
        }
        
        return optns;
    }
}

May be this can help you further -

https://salesforce.stackexchange.com/questions/167009/can-we-access-all-listview-records-of-any-object-using-listview-id​
PappuPappu
Thanks for the quick response Sachin.

I am able to render the list view to dropdown. But, when i am using the beow code with VF page, getting an error saying  "'apex:enhancedList' component cannot be nested within form tags". Is ther anyway to overcome this.?
Apologies, I am newbie to salesforce, thats the reason asking so many questions.

    <apex:outputPanel id="LeadList">
        <apex:enhancedList type="Lead" height="300" rowsPerPage="25" customizable="False" listId="{!selectedVal}"/>   
    </apex:outputPanel>
sachin kadian 5sachin kadian 5
You need to use enhancedList tag out  of <apex:form> tag. Check the code i posted. My <apex:outputPanel id="LeadList"> is not inside <apex:form> tag.
PappuPappu
I used enhancedlist tag out of <apex:form> tag.
Below is the code I am using.

<apex:page controller="TextVFPDFController" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    
<apex:form>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'styles/salesforce-lightning-design-system.css')}" />
</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds">    

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->
  <div class="slds-grid">

    <!-- GRID COL -->
    <div class="slds-col">

      <!-- HEADING AREA -->
      <p class="slds-text-heading--label">Accounts</p>
      <h1 class="slds-text-heading--medium">My Accounts</h1>
      <!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->
    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">
          New Account
        </button>
        <button class="slds-button slds-button--neutral">
          More
        </button>
      </div>

    </div>
    <!-- / GRID COL -->

  </div>
  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>
<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->
<div class="slds-form-element">
    <label class="slds-form-element__label">Request Type</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:selectList value="{!selectedVal}" size="1"> 
            <apex:selectOptions value="{!list}" > 
                
            </apex:selectOptions>
            <apex:actionSupport event="onclick" reRender="LeadList"/>
        </apex:selectList>
        </div>
    </div>
</div>
      
<!-- / PRIMARY CONTENT WRAPPER -->   

<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
  <!-- LAYOUT GRID -->
  <div class="slds-grid slds-grid--align-spread">
    <p class="slds-col">Salesforce Lightning Design System Example</p>
    <p class="slds-col">&copy; Your Name Here</p>
  </div>
  <!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->    

</html>
    </apex:form>    
        <apex:outputPanel id="LeadList">
        <apex:enhancedList type="Lead" height="300" rowsPerPage="25" customizable="False" listId="{!selectedVal}"/>   
         </apex:outputPanel>    
</apex:page>
sachin kadian 5sachin kadian 5
Dont use <apex:form> on whole page.

Do this  -
  
<apex:form>

<apex:selectList value="{!selectedVal}" size="1"> 
    <apex:selectOption value="{!list}" /> 
</apex:selectList>

</apex:form>

Keep other items out of apex form so that you can put outputpanel anywhere.

Are you still getting any issue? isnt it working for you? what exactly are you getting? can you share apex class too?​
sachin kadian 5sachin kadian 5
Just make sure you are in salesforce classic to see this . If you want in salesforce lightning, you need to create lightning component instead of VF page.
PappuPappu

As you mentioned, I have changed the FORM tag.

Now I am facing error as "<apex:enhancedList> component cannot be included when <apex:page> 'showHeader' attribute is false". After I have turned the attribute of 'showheader' and 'applyHtmlTag' to true, VF page displays "Invalid selectOptions found. Use SelectOption type in Apex. "

VF page coding:

<apex:page controller="TextVFPDFController" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'styles/salesforce-lightning-design-system.css')}" />
</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds">    

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->
  <div class="slds-grid">

    <!-- GRID COL -->
    <div class="slds-col">

      <!-- HEADING AREA -->
      <p class="slds-text-heading--label">Accounts</p>
      <h1 class="slds-text-heading--medium">My Accounts</h1>
      <!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->
    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">
          New Account
        </button>
        <button class="slds-button slds-button--neutral">
          More
        </button>
      </div>

    </div>
    <!-- / GRID COL -->

  </div>
  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>
<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->
<div class="slds-form-element">
    <label class="slds-form-element__label">Request Type</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <apex:form>

<apex:selectList value="{!selectedVal}" size="1"> 
    <apex:selectOption value="{!list}" /> 
</apex:selectList>

</apex:form>

             <apex:actionSupport event="onclick" reRender="LeadList"/>
        </div>
    </div>
</div>
      
<!-- / PRIMARY CONTENT WRAPPER -->   

<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
  <!-- LAYOUT GRID -->
  <div class="slds-grid slds-grid--align-spread">
    <p class="slds-col">Salesforce Lightning Design System Example</p>
    <p class="slds-col">&copy; Your Name Here</p>
  </div>
  <!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->    

</html>
      
        <apex:outputPanel id="LeadList">
        <apex:enhancedList type="Lead" height="300" rowsPerPage="25" customizable="False" listId="{!selectedVal}"/>   
         </apex:outputPanel>    
</apex:page>

Apex Class:

public class TextVFPDFController {
    public String selectedVal{get;set;}  // This will hold the selected value, the id in here
    
    public List<SelectOption> getlist(){
        
        List<SelectOption> optns = new List<SelectOption>();
        // before getting here you must populate your queryResult list with required fields
        for(Listview lstObj : [SELECT Id, Name FROM Listview WHERE SobjectType = 'Lead' order by name ASC]){
            String listId = lstObj.Id;
            listId = listId.subString(0,15);
            if(selectedVal == null){
                selectedVal = listId;
            }
            optns.add(new SelectOption (listId,lstObj.Name));
        }
        
        return optns;
    }
}
PappuPappu
I am in Lightning version. The requirement is to create a visualforce page object with SLDS not Lightning component.

Though, if its possible with lightning component instead VF page. Please help me out with process.
sachin kadian 5sachin kadian 5
You need to create lightning component for this.

You can use  this. inside lightning component. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_listView.htm

 
PappuPappu
Got it sachin !!

Is it possible to show all the list view and related records with the lightinng componet? 
sachin kadian 5sachin kadian 5
It can be implemented the same way you are doing in VF page. First you can get all the list view names using query and display them in picklist.
once user choose anything in picklist, change "listName" in <lightning:listView > to show its records.
 
sachin kadian 5sachin kadian 5
Please mark the question as solved so that it can help other.
PappuPappu
Hi Sachin,

Thanks for your help so far. But I havent completed the requirement.

Currently I am using the lightning component to display the listview and record details. But, not able to perform inline editing to the records and also view the lighting component in app. It throws an error "You don't have access to this record. Ask your administrator for help or to request access.".

I am just wondering, what acces I dont have and where I look into. Below is my code.

Lightning Component

<aura:component controller="Request_Inline_Edit" implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    <ltng:require styles="/resource/slds0121/assets/styles/salesforce-lightning-design-system.min.css"/>
    <ltng:require styles="{!$Resource.SLDS +
         '/assets/styles/salesforce-lightning-design-system.css'}"/>
   <aura:dependency resource="markup://force:navigateToList" type="EVENT"/>
    <aura:handler name="init" value="{!this}" action="{!c.gotoList}"/>    
 </aura:component>

Component Controller:

({
gotoList : function (component, event, helper) {
    var action = component.get("c.getListViews");
    action.setCallback(this, function(response){
        var state = response.getState();
        console.log('clicked');
        if (state === "SUCCESS") {
            var listviews = response.getReturnValue();
            var navEvent = $A.get("e.force:navigateToList");
            navEvent.setParams({
                "listViewId": listviews.Id,
                "listViewName": null,
                "scope": "Request__C"
            });
            navEvent.fire();
        }
    });
    $A.enqueueAction(action);
},
})

Apex Class:

public class Request_Inline_Edit {
@AuraEnabled
public static List<ListView> getListViews() {
    List<ListView> listviews = 
        [SELECT Id, Name FROM ListView WHERE SobjectType = 'Request__C' limit 5];
    return listviews;
}
}