hope you are having a good day!
I could find two links related my questions.
Visualforce Error - The dependent picklist requires its controlling field on the page
According to the two links above, I think I should paste this.
<apex:inputField value="{!Grant__c.Global_Regions__c}"/>
<apex:inputField value="{!Grant__c.Geographic_Focus__c}"/>
I have no coding background so don't know how to solve this problem for now.
Can you advise me where should I add the code?
My Org have a Project object with custom VF button.
We add Grant Object record by using that button.
Grant Object have Global region - Geographic focus fields(Country - State)
I create 'Field dependencies' on them then.
I face the error message when I use the VF button.
I paste the VF code below, please advise me.
<apex:page standardController="Project__c" extensions="SearchGrantsController" docType="html-5.0" title="Search Grants for {!Project__c.Name}" sidebar="false" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="{!URLFOR($Resource.TableSorterJS,'/jquery.tablesorter.js')}"></script>
<apex:stylesheet value="{!URLFOR($Resource.TableSorterJS,'/themes/blue/style.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.TableSorterJS,'/themes/blue/asc.gif')}"/>
<apex:stylesheet value="{!URLFOR($Resource.TableSorterJS,'/themes/blue/desc.gif')}"/>
<apex:stylesheet value="{!URLFOR($Resource.TableSorterJS,'/themes/blue/bg.gif')}"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
window.onload = function (){
//see if the page is lightning or classic
if(document.referrer.indexOf(".lightning.force.com") > 0){
console.log('lightning page');
var e = document.getElementsByClassName('classicStyle');
for(var i = 0; i < e.length; i++){
e[i].classList.add('hide');
};
console.log('hid classic version');
}else{
console.log('classic page');
var e = document.getElementsByClassName('lightningStyle');
for(var i = 0; i < e.length; i++){
e[i].classList.add('hide');
};
console.log('hid lighting version');
}
};
var simpleSearch, advancedSearch, advProp, isLightning;
$(document).ready(function(){
sLink = $('[id$="searchLink"]');
sLink2 = $('#searchLink2');
advancedSearch = $('[id$="advancedCriteriaTable"]');
advancedSearch2 = $('[id$="advancedCriteriaTable2"]');
$('[id$="resultTable"]').tablesorter({headers:{0:{sorter:false}}});
$('select.multipicklist').each(function(){
console.log('MPL!');
$(this).attr('size','6');
});
$('.datepicker').datepicker({
format: 'yyyy-MM-dd'
});
$('input[type=date]').on('change',function(){
$('.datepicker').hide();
})
})
function toggleSearch(){
//simpleSearch.toggle();
var innerLink = sLink.html();
if(innerLink == 'Show Advanced Options'){
sLink.html('Hide Advanced Options');
}
else{
sLink.html('Show Advanced Options');
}
$('[id$="simpleBtn"]').toggle();
advancedSearch.toggle();
}
function toggleProjectSearch(){
//simpleSearch.toggle();
var innerLink = sLink2.html();
if(innerLink == 'Show Advanced Options'){
sLink2.html('Hide Advanced Options');
}
else{
sLink2.html('Show Advanced Options');
}
$('[id$="simpleBtn2"]').toggle();
advancedSearch2.toggle();
}
function addToProject(id){
var chxbx = $('[id$="'+id+'_chxbx"]').find("input[type='checkbox']")
console.log(chxbx);
chxbx.prop('checked',true);
}
function toggleTabs(str){
if(str=='grant'){
$('[id$="grantSearch"]').attr('style','display:block;');
$('[id$="projectSearch"]').attr('style','display:none;');
$('[id$="gtab"]').addClass('active');$('[id$="gtab"]').removeClass('inactive');
$('[id$="ptab"]').addClass('inactive');$('[id$="ptab"]').removeClass('active');
}
else{
$('[id$="grantSearch"]').attr('style','display:none;');
$('[id$="projectSearch"]').attr('style','display:block;');
$('[id$="gtab"]').addClass('inactive');$('[id$="gtab"]').removeClass('active');
$('[id$="ptab"]').addClass('active');$('[id$="ptab"]').removeClass('inactive');
}
}
function selectAll(el){
if($(el).prop('checked')){
$('[id$="resultTable"]').find('input[type=checkbox]').each(function(){
$(this).prop('checked',true);
});
}
else{
$('[id$="resultTable"]').find('input[type=checkbox]').each(function(){
$(this).prop('checked',false);
});
}
}
</script>
<style type="text/css">
.myBtn {
border-radius: 5px !important;
color: #fff !important;
background: #337ab7 !important;
border-color: #2e6da4 !important;
padding: 5px 10px 5px 10px !important;
}
#searchBox{
width: 80%;
margin-bottom: 15px;
background-color: lightgrey;
}
.centerBox {
position: relative;
margin: 0 auto;
}
#resultTable > thead > tr > th {
text-align: center;
}
.panel {
width: 90%;
}
#advancedCriteriaTable, #simpleCriteriaTable {
margin-bottom: -10px;
}
#advancedCriteriaTable .form-control{
font-size: 8px !important;
}
.btnDisabled {
background: grey !important;
}
.disabledLink {
pointer-events: none;
cursor: default;
color: grey;
}
.multipicklist {
font-size: 8px !important;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
padding: 6px 12px;
}
.inactive {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #337ab7 !important;
border: 1px solid lightgrey;
}
.inactive > a{
color: white !important;
}
.nav-tabs > li > a:hover {
border-top-radius: 5px;
background-color: lightgrey !important;
color: #337ab7 !important;
}
.hide {
display:none;
}
</style>
<div class="container-fluid">
<br/>
<div class="text-center"><h2 >{!Project__c.Name}</h2></div>
<br/>
<apex:pageMessages escape="false"/>
<apex:outputField value="{!Project__c.State__c}" rendered="false"/>
<apex:outputField value="{!Project__c.Sector__c}" rendered="false"/>
<apex:outputPanel rendered="{!Project__c.Id != null}">
<apex:form style="width:50%;position:relative;margin:0 auto">
<div align="center" style="margin-bottom:10px">
<apex:commandButton action="{!URLFOR($Action.Project__c.View,Project__c.Id)}" value="Return to Project" styleClass="myBtn"/>
</div>
</apex:form>
<div class="panel panel-primary centerBox" id="searchBox">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li role="presentation" class="active" id="gtab"><a href="javascript:toggleTabs('grant');">Search by Grant</a></li>
<li role="presentation" class="inactive" id="ptab"><a href="javascript:toggleTabs('project');">Search By Project</a></li>
</ul>
</div>
<div class="panel-body">
<apex:form style="font-size:11px !important;">
<div id="grantSearch" style="display:block;">
<!-- Simple Search by Name Only -->
<table class="table" id="simpleCriteriaTable">
<thead></thead>
<tbody>
<tr>
<td colspan="2">
<apex:input type="text" styleClass="form-control" html-placeholder="Search For Grants" value="{!searchName}"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<apex:commandButton id="simpleBtn" action="{!doSimpleSearch}" styleClass="myBtn" value="Search"/>
</td>
<td style="text-align:right">
<a id="searchLink" href="javascript:toggleSearch();">Show Advanced Options</a>
</td>
</tr>
</tfoot>
</table>
<!-- Advanced Search -->
<table class="table" id="advancedCriteriaTable" style="display:none;">
<thead></thead>
<tbody>
<tr>
<td width="50%">
<div class="form-group">
<label class="checkbox inline">Eligibility</label>
<apex:inputField styleClass="multipicklist" id="eligibility_crit" value="{!dummyGrant.Eligibility__c}"/>
</div>
</td>
<td width="50%">
<div class="form-group">
<label class="checkbox inline" for="geofocus_crit">Geographic Focus</label>
<apex:inputField styleClass="multipicklist" id="geofocus_crit" value="{!dummyGrant.Geographic_Focus__c}"/>
</div>
</td>
</tr>
<tr>
<td width="50%">
<div class="form-group">
<center><label for="itclass_crit">IT Classification</label></center>
<apex:inputField styleClass="form-control" id="itclass_crit" value="{!dummyGrant.IT_Classification__c}"/>
</div>
</td>
<td width="50%">
<div class="form-group">
<center><label for="funder_crit">Funder Type</label></center>
<apex:inputField styleClass="form-control" id="funder_crit" value="{!dummyGrant.Funder_Type__c}"/>
</div>
</td>
</tr>
<tr>
<td >
<div class="form-group">
<center><label for="deadline_crit">Deadline Date Range</label></center>
<div class="form-group" id="deadline_crit" >
<p>Start: </p>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="deadline_crit1" value="{!deadlineStart}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<span style="min-width:30px;"><p>End: </p></span>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="deadline_crit2" value="{!deadlineEnd}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</td>
<td >
<div class="form-group">
<center><label for="expir_crit">Expiration Date Range</label></center>
<div class="form-group" id="expir_crit" >
<span style="min-width:30px;"><p>Start: </p></span>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="expir_crit1" value="{!expirationStart}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<span style="min-width:30px;"><p>End: </p></span>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="expir_crit2" value="{!expirationEnd}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td >
<apex:commandButton id="advBtn" action="{!doAdvancedSearch}" styleClass="myBtn" value="Search"/>
</td>
<!-- <td style="text-align:right">
<a href="javascript:toggleSearch();">Simple Search</a>
</td> -->
</tr>
</tfoot>
</table>
</div>
<div id="projectSearch" style="display:none;">
<table class="table">
<tbody>
<tr>
<td >
<!-- <h3>Get Grants From Existing Project</h3></center> -->
<div class="form-group" style="width:50%">
<!-- <label for="projName">Project Name</label> -->
<c:AutoComplete ComponentLabel="Project Name" for="projName" SObject="Project__c"
Label="Name" Value="Id" ReturnValue="{!searchProjId}" Details="Autocomplete_Detail_Display__c">
<apex:input id="projName" styleClass="form-control"/>
</c:AutoComplete>
<small class="text-muted">Search for Project-related Grants</small>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<apex:commandButton action="{!doACSearch}" id="simpleBtn2" styleClass="myBtn" value="Search"/>
</td>
<td style="text-align:right">
<a id="searchLink2" href="javascript:toggleProjectSearch();">Show Advanced Options</a>
</td>
</tr>
</tfoot>
</table>
<table class="table" id="advancedCriteriaTable2" style="display:none;">
<thead></thead>
<tbody>
<tr>
<td width="50%">
<div class="form-group">
<label class="checkbox inline">Eligibility</label>
<apex:inputField styleClass="multipicklist" id="eligibility_crit2" value="{!dummyGrant2.Eligibility__c}"/>
</div>
</td>
<td width="50%">
<div class="form-group">
<label class="checkbox inline" for="geofocus_crit">Geographic Focus</label>
<apex:inputField styleClass="multipicklist" id="geofocus_crit2" value="{!dummyGrant2.Geographic_Focus__c}"/>
</div>
</td>
</tr>
<tr>
<td width="50%">
<div class="form-group">
<center><label for="itclass_crit">IT Classification</label></center>
<apex:inputField styleClass="form-control" id="itclass_crit2" value="{!dummyGrant2.IT_Classification__c}"/>
</div>
</td>
<td width="50%">
<div class="form-group">
<center><label for="funder_crit">Funder Type</label></center>
<apex:inputField styleClass="form-control" id="funder_crit2" value="{!dummyGrant2.Funder_Type__c}"/>
</div>
</td>
</tr>
<tr>
<td >
<div class="form-group">
<center><label for="deadline_crit">Deadline Date Range</label></center>
<div class="form-group" id="deadline_crit0" >
<p>Start: </p>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="deadline_crit3" value="{!deadlineStart2}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<span style="min-width:30px;"><p>End: </p></span>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="deadline_crit4" value="{!deadlineEnd2}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</td>
<td >
<div class="form-group">
<center><label for="expir_crit">Expiration Date Range</label></center>
<div class="form-group" id="expir_crit0" >
<span style="min-width:30px;"><p>Start: </p></span>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="expir_crit3" value="{!expirationStart2}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<span style="min-width:30px;"><p>End: </p></span>
<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
<apex:input styleclass="form-control" type="date" id="expir_crit4" value="{!expirationEnd2}"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td >
<apex:commandButton id="advBtn2" action="{!doAdvancedACSearch}" styleClass="myBtn" value="Search"/>
</td>
<!-- <td style="text-align:right">
<a href="javascript:toggleSearch();">Simple Search</a>
</td> -->
</tr>
</tfoot>
</table>
</div>
</apex:form>
</div>
</div>
<!-- RESULTS PANEL -->
<div class="panel panel-default centerBox">
<div class="panel-body">
<apex:form >
<table class="table table-bordered tablesorter" id="resultTable">
<caption>
Showing page {!currentPageNumber} of {!pageSize}<br/>
<apex:commandLink action="{!first}" styleclass="{!IF(hasPrevious,'','disabledLink')}">First</apex:commandLink>
<apex:commandLink action="{!previous}" styleclass="{!IF(hasPrevious,'','disabledLink')}">Previous</apex:commandLink>
<apex:commandLink action="{!next}" styleclass="{!IF(hasNext,'','disabledLink')}">Next</apex:commandLink>
<apex:commandLink action="{!last}" styleclass="{!IF(hasNext,'','disabledLink')}">Last</apex:commandLink>
</caption>
<thead>
<tr style="background:white !important">
<td colspan="7">
<apex:commandButton disabled="{!searchResults.size = 0}" action="{!save}" styleClass="myBtn" value="Add to Project"/>
</td>
</tr>
<tr class="row">
<th class="col-md-1">Select <input type="checkbox" onchange="selectAll(this);"/></th>
<th class="col-md-2">Name</th>
<th class="col-md-6">Summary</th>
<th class="col-md-1">Authority</th>
<th class="col-md-1">Deadline</th>
<th class="col-md-1">Score</th>
</tr>
</thead>
<tbody>
<apex:outputPanel rendered="{!searchResults.size > 0}">
<apex:repeat value="{!searchResults}" var="result">
<tr class="row">
<td class="col-md-1" style="text-align:center;" id="{!result.grant.Id}_chxbx"><apex:inputcheckbox value="{!result.checked}"/></td>
<!-- Name column has Hover. controlled by Grant__c Mini Page Layout -->
<td class="col-md-2 classicStyle">
<a href="{!URLFOR($Action.Grant__c.View,result.grant.Id)}" target="_blank" class="nameHover" id="{!result.grant.Id}"
onmouseover="LookupHoverDetail.getHover('{!result.grant.Id}', '/{!result.grant.Id}/m?retURL=%2F{!result.grant.Id}&isAjaxRequest=1').show();"
onmouseout="LookupHoverDetail.getHover('{!result.grant.Id}', '/{!result.grant.Id}/m?retURL=%2F{!result.grant.Id}&isAjaxRequest=1').hide();"
>
{!result.grant.Name}</a>
</td>
<td class="col-md-2 lightningStyle">
<a href="{!URLFOR($Action.Grant__c.View,result.grant.Id)}" target="_blank" id="{!result.grant.Id}">
{!result.grant.Name}
</a>
</td>
<td class="col-md-6">{!result.summary}</td>
<td class="col-md-1">{!result.grant.Authority__r.Name}</td>
<td class="col-md-1">
<apex:outputPanel rendered="{!result.nextdeadline != null}">
<apex:outputText value="{0,date,MM/dd/yyyy}">
<apex:param value="{!result.nextdeadline}"/>
</apex:outputText>
</apex:outputPanel>
<apex:outputPanel rendered="{!result.nextdeadline = null}">
No deadline
</apex:outputPanel>
</td>
<td class="col-md-1">
{!result.sortPercent}
<span>%</span>
</td>
</tr>
</apex:repeat>
</apex:outputPanel>
<!-- If no records found -->
<apex:outputPanel rendered="{!searchResults.size = 0}">
<tr class="row">
<td colspan="5" style="text-align:center;">No records found!</td>
</tr>
</apex:outputPanel>
</tbody>
<tfoot>
<tr style="background:white !important">
<td colspan="7">
Showing page {!currentPageNumber} of {!pageSize}<br/>
<apex:commandLink action="{!first}" styleclass="{!IF(hasPrevious,'','disabledLink')}">First</apex:commandLink>
<apex:commandLink action="{!previous}" styleclass="{!IF(hasPrevious,'','disabledLink')}">Previous</apex:commandLink>
<apex:commandLink action="{!next}" styleclass="{!IF(hasNext,'','disabledLink')}">Next</apex:commandLink>
<apex:commandLink action="{!last}" styleclass="{!IF(hasNext,'','disabledLink')}">Last</apex:commandLink>
</td>
</tr>
<tr style="background:white !important">
<td colspan="7">
<apex:commandButton disabled="{!searchResults.size = 0}" action="{!save}" styleClass="myBtn" value="Add to Project"/>
</td>
</tr>
</tfoot>
</table>
</apex:form>
</div>
</div>
</apex:outputPanel>
</div>
</apex:page>
