1

`First, I am not a developer by any means so please be kind. :) I have created a custom Visualforce Log a Call page which makes use of URL Param button to auto populate a picklist field (Vertical__c) on the page with the same picklist field value from the Account page.

Within the Visualforce page I also have a multi select field (Accomplished__c) who's values is dependent on the picklist field (Vertical__c) values.

This is where i am stuck. I can't figure out how to make the multiselect field (Accomplished__c) dependent on my picklist field (Vertical__c). I've looked into using the "apex:actionRegion" attribute but all I see is how to render a section not the values within a apex:selectList. In addition, I'm not sure how to create the Controller that dictates which picklist value will render the applicable multi select values.

Any insight would be greatly appreciated.

<apex:page standardController="Task" extensions="LogACallControllerExtension,NextStep,TaskAccomplished" docType="html-5.0" showHeader="false" standardStylesheets="false"><code>

<style>
.sf1input, .sf1textarea {
   width:100%;
    font-family: 'ProximaNovaSoft-Regular', 'Helvetica Neue';
    font-size: 15px;
   color: #3c3d3e;
   padding: 7px 14px;
   line-height: 25px;
   border: 1px solid #cfd0d2;
  border-radius: 5px;
   background-color: #e8eaeb;
   box-shadow: inset 0 2px 2px rgba(0,0,0,.07);
   box-sizing: border-box;
}

.sf1input:focus, .sf1textarea:focus {
   border: 1px solid #bbc0c4;
  background-color: #fff;
   outline-style: none;
}

.assistiveText { 
position: absolute !important; 
height: 1px; 
width: 1px; 
overflow: hidden; 
clip: rect(1px,1px,1px,1px); 
}
</style> 

<head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> 
      <apex:stylesheet value="{!URLFOR($Resource.Mobile_Design_Templates,'Mobile-Design-Templates-master/common/css/app.min.css')}"/> 
      <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates,'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates,'Mobile-Design-Templates-master/common/js/jquery.touchwipe.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates,'Mobile-Design-Templates-master/common/js/main.min.js')}"/>    
      <apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"/>
<script>
    function disableOnSubmit(input) {
        setTimeout('disableAfterTimeout(\'' + input.id + '\');', 50);
    }
    function disableAfterTimeout(id) {
        var toDisable = document.getElementById( id );
        toDisable.disabled = 'disabled';
        // Use the Salesforce CSS style to make the button appear disabled
        toDisable.className = 'btnDisabled';
        toDisable.value = "Saving..."
    }
</script>

</head>  

<apex:form >     
<div class="app-content"> 
<header>
<h1>Log A Call<'/h1><br /><br />
</header>

<section class="border-bottom">
<div class="content">
           <label>Related To<'/label><br />
            <apex:inputField style="assistiveText" value="{!Task.WhatId}" ?>
</div>
</section>    

<section class="border-bottom">
<div class="content">            
            <label>Vertical<'/label><br />
            <apex:actionRegion >
            <apex:inputField style="form-control" value="{!Vertical__c}" ><br />
            <apex:actionSupport event="onchange" reRender="TaskAccomplished" />
            </apex:inputField>
            </apex:actionRegion>
             </div></section>

<section class="border-bottom">
<div class="content">            
            <label>Accomplished</label><br />
          <apex:selectList id="TaskAccomplished" styleclass="form-control" multiselect="true" value="{!Task.Accomplished__c}" style="height:66px" >
          <apex:selectOptions value="{!TAccomplishedOptions}"/>
            </apex:selectList>
           </div>'/section>


<section class="border-bottom">
<div class="content">            
            <label>Relevant Notes</label><br />
            <apex:inputField style="form-control" value="{!Task.Relevant_Notes__c}" /><br />
             </div></section>       

<section class="data-capture-buttons one-buttons">
<div class="content"><'apex:commandButton id="save" value="Save" action="{!save}" onclick="disableOnSubmit(this);" /><br />
</div>
</section>
</div>
</apex:form>
</apex:page>
  • 2
    If you are using a standard controller it should work without any special tricks / rerendering. If you could post you VF code we can better assist you – Eric Mar 2 '16 at 17:47
  • 1
    I could do this for you but "teach a man to fish...." Please add the code to your question by editing it. Make sure to use the code formatter in the editor. – Eric Mar 2 '16 at 18:01
  • Ok..got my code up. @Eric – Rob R. Mar 2 '16 at 18:52
  • The standard multi select list wasn't ideal to due to layout and constraint issue on a mobile device. – Rob R. Mar 2 '16 at 19:25
  • Remove the action support stuff for the master pick list. It is not needed. developer.salesforce.com/releases/release/Summer10/… OR developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/… . Also I removed all of the ' after your < in the code. not sure why it was there as it would not compile with those in there – Eric Mar 2 '16 at 19:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.