TransWikia.com

Unable to add records as multiple pills in visual force page

Salesforce Asked on December 10, 2021

Currently, I’m working on a requirement which is to display selected records from one table named table to another table named table2 as pills. I have written the code which is working fine without pills. I am unable to see the records while using pills. Please let me know where i have missed it or is there any limitation to use pills within vf page any help would be much appreciated

I want to add records like this

enter image description here

[![<apex:page controller="AccountSelectClassController" sidebar="false" showHeader="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" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Salesforce Module</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Import the Design System style sheet -->
    <apex:slds />
</head>
<body>
    <script type="text/javascript">
    function selectAllCheckboxes(obj,receivedInputID)
    {
        var inputCheckBox = document.getElementsByTagName("input"); 
        var inputCheckBoxs = document.getElementsByTagName("output");                 
        for(var i=0; i<inputCheckBox.length; i++)
        {          
            if(inputCheckBox[i].id.indexOf(receivedInputID)!=-1)
            {                                    
                inputCheckBox[i].checked = obj.checked;
            }
        }
        for(var i=0; i<inputCheckBoxs.length; i++)
        {          
            if(inputCheckBoxs[i].id.indexOf(receivedInputID)!=-1)
            {                                    
                inputCheckBoxs[i].checked = obj.checked;
            }
        }
    }
</script>
<div class="slds-scope">
<div class="myapp">
<apex:form>
<apex:pageBlock>
<apex:pageBlockButtons>
    <apex:commandButton value="Show Selected Accounts" action="{!processSelected}" reRender="table,table2"/>
</apex:pageBlockButtons>             
<apex:pageblockSection title="All Accounts" collapsible="false" columns="2">
    <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" title="All Accounts">
    <apex:column >
    <apex:facet name="header">
    <apex:inputCheckbox >
    <apex:actionSupport event="onclick" action="{!processSelected}" onsubmit="selectAllCheckboxes(this,'inputId')" rerender="table,table2"/>
    </apex:inputCheckbox>
    </apex:facet>
    <apex:inputCheckbox value="{!accWrap.selected}" id="inputId">
    <apex:actionSupport event="onclick" action="{!processSelected}" rerender="table,table2"/>
    </apex:inputCheckbox>
    </apex:column>
    <apex:column value="{!accWrap.acc.Name}" />
    <apex:column value="{!accWrap.acc.BillingState}" />
    <apex:column value="{!accWrap.acc.Phone}" />
    </apex:pageBlockTable>
    <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
        <div  class="slds-pill_container">
        <span class="slds-pill slds-pill_link">
        <a href="javascript:void(0);" class="slds-pill__action" title="Full pill label verbiage mirrored here">
        <span class="slds-pill__label">Account Name</span>
        </a>
        <button class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove">
        <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
        </svg>
        <span class="slds-assistive-text">Remove</span>
        </button>
        </span>
        </div>
    </apex:pageBlockTable>  
</apex:pageblockSection>
</apex:pageBlock>
</apex:form>
</div>
</div> 
</body>
</html>
</apex:page>][1]][1]
lightning pilllightning pill containerpageblocktablesldsvisualforce

2 Answers

try this in vfpage

    <apex:outputPanel id="table2">
    <div  class="slds-pill_container">
        <apex:repeat value="{!selectedAccounts}" var="c" id="repeatTable2">
            
            <span class="slds-pill slds-pill_link">
            <a href="javascript:void(0);" class="slds-pill__action" title="Full pill label verbiage mirrored here">
            <span class="slds-pill__label">{!c.Name}</span>
            </a>
            <button class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove" onclick="removeSelected('{!c.Id}');return false;">
            <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
            </svg>
            <span class="slds-assistive-text">Remove</span>
            </button>
            </span>
        </apex:repeat>  
     </div>
    </apex:outputPanel>
 
        </apex:pageblockSection>
        </apex:pageBlock>
        <apex:actionFunction name="removeSelected" action="{!remnoveSelected}" reRender="table,table2" >
            <apex:param name="IdParam" assignTo="{!removeId}" value="" />
        </apex:actionFunction>

and this method in apex controller

 public void remnoveSelected() {
   String removeIdfor  =  
  Apexpages.currentPage().getParameters().get('IdParam');
   system.debug('@@@ --> '+ removeIdfor);
   for(Integer i = wrapAccountList.size() - 1; i >= 0; i--) {
    if(wrapAccountList[i].acc.Id.equals(removeIdfor)) {
        system.debug('@@@ I am getting removed');
        wrapAccountList[i].selected = false;
        selectedAccounts.remove(i);
    }
  }
}

Answered by SushantN on December 10, 2021

Instead of second pageblockTable with id "Table2" I will recommend you to use apex:repeat tag and wrap it with apex:outputPanel with the id of table2 so your reRender should also work.I was able to get the pills working with below code.

  <apex:page controller="AccountSelectClassController" sidebar="false" 
  applyHtmlTag="false" showHeader="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

    <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Salesforce Module</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- Import the Design System style sheet -->
    <apex:slds />
    </head>
    <script type="text/javascript">
    function selectAllCheckboxes(obj, receivedInputID) {
     var inputCheckBox = document.getElementsByTagName("input");
     for (var i = 0; i < inputCheckBox.length; i++) {
       if (inputCheckBox[i].id.indexOf(receivedInputID) != -1) {
        inputCheckBox[i].checked = obj.checked;
       }
      }
     }
  </script>
  <apex:slds />
  <div class="slds-scope">
    <apex:form>
     <apex:pageBlock>
      <apex:pageBlockButtons>
      <apex:commandButton value="Show Selected Accounts" action="{!processSelected}" rerender="table2" />
    </apex:pageBlockButtons>

    <apex:pageblockSection title="All Accounts" collapsible="false" columns="2">

      <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" title="All Accounts">
        <apex:column>
          <apex:facet name="header">
            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')" />
          </apex:facet>
          <apex:inputCheckbox value="{!accWrap.selected}" id="inputId">
            <apex:actionSupport event="onclick" action="{!processSelected}" rerender="table,table2" />
          </apex:inputCheckbox>
        </apex:column>
        <apex:column value="{!accWrap.acc.Name}" />
        <apex:column value="{!accWrap.acc.BillingState}" />
        <apex:column value="{!accWrap.acc.Phone}" />
      </apex:pageBlockTable>
      <!--
            <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                <apex:column value="{!c.Name}" headerValue="Account Name"/>
                <apex:column value="{!c.BillingState}" headerValue="Billing State"/>
                <apex:column value="{!c.Phone}" headerValue="Phone"/>
            </apex:pageBlockTable> -->

      <apex:outputPanel id="table2">
        <div class="slds-pill_container">
          <apex:repeat value="{!selectedAccounts}" var="c" id="repeatTable2">

            <span class="slds-pill slds-pill_link">
              <a href="javascript:void(0);" class="slds-pill__action"
                title="Full pill label verbiage mirrored here">
                <span class="slds-pill__label">{!c.Name}</span>
              </a>
              <button class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}">
                  </use>
                </svg>
                <span class="slds-assistive-text">Remove</span>
              </button>
            </span>
          </apex:repeat>
        </div>
      </apex:outputPanel>


    </apex:pageblockSection>
  </apex:pageBlock>
</apex:form>

Answered by SushantN on December 10, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP