This post provides a code example for a multi-purpose Visualforce page that dynamically switches between Salesforce Classic and Lightning Experience (LEX) views based on the detected user setting.
At some future stage (perhaps Dreamforce ’16 will enlighten us here) the platform will likely provide support for auto-conversion of legacy Visualforce assets to the new Lightning UI. For those that can’t wait for this capability and require the means to build custom UI that blends with both Salesforce Classic and Lightning Experience the following example hopefully provides a useful reference. Please note, this is provided for information purposes only.
In conjunction with the example Visualforce markup, the following points should be considered:
1. For each interaction (page or sub-page) a decision should be taken as to the development approach:
CSS Switching: UI structure is consistent across views (and no page block components), therefore style class switching may work.
Conditional Visualforce: UI structure is partially consistent; perhaps the LEX view introduces a new activity timeline component for example but is otherwise closely aligned to the Salesforce Classic view. A lack of Lightning Component Framework expertise or availability may also lead to this approach.
Lightning Components: The LEX view is developed with the Lightning Component Framework; components are added to the Visualforce page via apex:includeLightning and conditionally rendered.
2. The Salesforce Lightning Design System is a CSS framework, not a JavaScript framework. In order to build UI with the SLDS requires working knowledge of a JavaScript library such as JQuery to add interactivity such as tab-switching, drop-down menu animation and tooltip display.
3. The ideal of a completely dynamic solution where certain users have the LEX view and others the Salesforce Classic view is somewhat spoiled by the constraint that application and tab icons must be shared between the two views. Predictably, icons that work well in the LEX Navigation Menu do not work at all in Salesforce Classic. Equally the square application icon style preferred in LEX looks visually jarring when rendered in the Salesforce Classic header.
4. LEX compatible pages should be responsive, Salesforce Classic pages rarely have this requirement.
5. Key Lightning Ready requirements include correct handling of the Navigation Menu expand/collqpse events, use of the Salesforce font and visual consistency with the SLDS guidelines.
The screenshots below show how the example page renders in both Salesforce Classic and LEX views.
Example Visualforce page; note this example takes the “Conditional Visualforce” approach introduced above.
[sourcecode language=”html”]
<!–
Name: Settings.page (abbreviated)
Copyright © 2016 Force365
======================================================
======================================================
Purpose:
——-
Example Settings management page.
Multiple purpose page shared between LEX and Classic themes.
> Theme3—Salesforce Classic 2010 user interface theme
> Theme4d—Modern “Lightning Experience” Salesforce theme
> Theme4t—Salesforce1 mobile Salesforce theme
Functions :
View and maintain Application Settings, Target Objects and Data Sources.
======================================================
======================================================
History
——-
redacted.
–>
<apex:page tabStyle="Settings__tab"
controller="SettingsController"
readOnly="false"
title="{!$Label.UI_Text_MDM} {!$Label.UI_Text_Settings}"
docType="html-5.0">
<apex:form >
<!– Lightning Experience Theme [Theme4d] + Theme4t—Salesforce1 mobile Salesforce theme –>
<apex:outputPanel id="lexPanel" rendered="{!OR( $User.UIThemeDisplayed == ‘Theme4d’, $User.UIThemeDisplayed == ‘Theme4t’) }">
<apex:includeScript value="{!URLFOR($Resource.PrimaryResources, ‘/js/jquery-1.11.3.min.js’)}" />
<apex:stylesheet value="{!URLFOR($Resource.SLDS202, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}" />
<script type=’text/javascript’>
var $j = jQuery.noConflict();
$j(document).ready(function(){
init();
});
function init(){
// tab hide/show content.
$j(‘.slds-tabs–scoped__item’).off(‘click’);
$j(‘.slds-tabs–scoped__item’).on(‘click’, function(){
$j(this).addClass(‘slds-active’);
$j(this).find(‘a’).attr(‘aria-selected’, true);
var contentToShow = $j(‘#’+$j(this).find(‘a’).attr(‘aria-controls’));
$j(contentToShow).removeClass(‘slds-hide’);
$j(contentToShow).addClass(‘slds-show’);
$j(this).siblings().removeClass(‘slds-active’);
$j(this).siblings().find(‘a’).attr(‘aria-selected’, false);
$j(contentToShow).siblings(‘.slds-tabs–scoped__content’).removeClass(‘slds-show’);
$j(contentToShow).siblings(‘.slds-tabs–scoped__content’).addClass(‘slds-hide’);
});
// data table menu drop downs.
$j(‘.slds-dropdown-trigger .slds-button’).off(‘click’);
$j(‘.slds-dropdown-trigger .slds-button’).on(‘click’, function(){
event.stopPropagation();
if ($j(this).parent().hasClass(‘slds-is-open’)){
$j(this).parent().removeClass(‘slds-is-open’);
$j(this).parent().attr(‘aria-expanded’, false);
} else {
$j(‘.slds-dropdown-trigger’).removeClass(‘slds-is-open’);
$j(‘.slds-dropdown-trigger’).attr(‘aria-expanded’, false);
$j(this).parent().addClass(‘slds-is-open’);
$j(this).parent().attr(‘aria-expanded’, true);
}
});
$j(document).click( function(){
$j(‘.slds-dropdown-trigger’).removeClass(‘slds-is-open’);
$j(‘.slds-dropdown-trigger’).attr(‘aria-expanded’, false);
});
// tooltip hide/show on hover over information icons related to form elements.
$j( ‘.slds-form-element__icon’ ).hover(
function() {
var tooltip = $j(this).find(‘.slds-popover’);
tooltip.css( { position:’absolute’,left:’0px’,margin:’-1.5rem’,width:’20rem’ } );
var t = $j(tooltip).outerHeight()-15;
t*=-1;
tooltip.css( { top:t } );
tooltip.removeClass(‘slds-hide’);
tooltip.addClass(‘slds-show’);
}, function() {
var tooltip = $j(this).find(‘.slds-popover’);
tooltip.removeClass(‘slds-show’);
tooltip.addClass(‘slds-hide’);
}
);
}
function showSpinner(){
$j(‘.slds-spinner_container’).removeClass(‘slds-hide’);
$j(‘.slds-spinner_container’).addClass(‘slds-show’);
var winWidth = $j(document).width();
var winHeight = $j(document).height();
$j(‘.slds-spinner_container’).css({ ‘width’: winWidth,’height’: winHeight });
}
function hideSpinner(){
$j(‘.slds-spinner_container’).removeClass(‘slds-show’);
$j(‘.slds-spinner_container’).addClass(‘slds-hide’);
}
</script>
<style>
.myapp-icon-container-background-color {
background-color: #73BFB3;
}
.myapp-column–overflow-visible {
overflow: visible !important;
}
html body.sfdcBody {
padding: 0 !important;
}
</style>
<!– custom scope wrapper –>
<div class="myapp">
<div class="slds-spinner_container slds-hide">
<div class="slds-spinner–brand slds-spinner slds-spinner–medium" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<!– header –>
<div class="slds-page-header" role="banner">
<div class="slds-media slds-media–center">
<div class="slds-media__figure">
<span class="slds-icon_container myapp-icon-container-background-color">
<img class="slds-icon" src="{!URLFOR($Resource.myapp__IconResources, ‘Settings-icons_white-01.png’)}" alt="portrait" />
</span>
</div>
<div class="slds-media__body">
<p class="slds-text-body–small page-header__info">{!$Label.UI_Text_MDM}</p>
<p class="slds-page-header__title slds-truncate slds-align-middle" title="{!$Label.UI_Text_Settings}">{!$Label.UI_Text_Settings}</p>
</div>
</div>
</div>
<!– / header –>
<!– content –>
<apex:outputPanel id="missingStandardPermissionsPanelLEX" rendered="{!NOT(hasStandardPermissions)}">
<div class="slds-notify slds-notify–alert slds-theme–error" role="alert">
<span class="slds-assistive-text">Info</span>
<h2>{!$Label.UI_Error_No_Customize_Application_Permissions}</h2>
</div>
</apex:outputPanel>
<apex:outputPanel id="noCustomPermissionPanelLEX" rendered="{!AND(hasStandardPermissions,NOT($Permission.Manage_Settings))}">
<div class="slds-notify slds-notify–alert slds-theme–error" role="alert">
<span class="slds-assistive-text">Info</span>
<h2>{!$Label.UI_Error_No_Manage_Settings_Permission}</h2>
</div>
</apex:outputPanel>
<apex:outputPanel id="msgsRefreshPanelLEX">
<span class="slds-assistive-text">Info</span>
<apex:Messages id="msgsLEX" styleclass="slds-notify slds-notify–alert slds-theme–error" html-role="alert"/>
</apex:outputPanel>
<apex:outputPanel id="mainPanelLEX" rendered="{!AND(showMainPanel,$Permission.Manage_Settings,hasStandardPermissions)}">
<div class="slds-tabs–scoped">
<ul class="slds-tabs–scoped__nav" role="tablist">
<li class="slds-tabs–scoped__item slds-text-heading–label {!IF(selectedTab==’applicationSettings’, ‘slds-active’, ”)}" title="{!$Label.UI_Text_Application_Settings}" role="presentation">
<a class="slds-tabs–scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">{!$Label.UI_Text_Application_Settings}</a>
</li>
<li class="slds-tabs–scoped__item slds-text-heading–label {!IF(selectedTab==’targetObjects’, ‘slds-active’, ”)} {!IF(appSettings.IsActive__c, ‘slds-show’, ‘slds-hide’)}" title="{!$Label.UI_Text_Target_Objects}" role="presentation">
<a class="slds-tabs–scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item">{!$Label.UI_Text_Target_Objects}</a>
</li>
<li class="slds-tabs–scoped__item slds-text-heading–label {!IF(selectedTab==’dataSources’, ‘slds-active’, ”)} {!IF(appSettings.IsActive__c, ‘slds-show’, ‘slds-hide’)}" title="{!$Label.UI_Text_Data_Sources}" role="presentation">
<a class="slds-tabs–scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item">{!$Label.UI_Text_Data_Sources}</a>
</li>
<li class="slds-tabs–scoped__item slds-text-heading–label {!IF(selectedTab==’dynamicHierarchies’, ‘slds-active’, ”)} {!IF(appSettings.IsActive__c, ‘slds-show’, ‘slds-hide’)}" title="{!$Label.UI_Text_Dynamic_Hierarchies}" role="presentation">
<a class="slds-tabs–scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-4" id="tab-scoped-4__item">{!$Label.UI_Text_Dynamic_Hierarchies}</a>
</li>
<li class="slds-tabs–scoped__item slds-text-heading–label {!IF(selectedTab==’customRollups’, ‘slds-active’, ”)} {!IF(appSettings.IsActive__c, ‘slds-show’, ‘slds-hide’)}" title="{!$Label.UI_Text_Custom_Rollups}" role="presentation">
<a class="slds-tabs–scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-5" id="tab-scoped-5__item">{!$Label.UI_Text_Custom_Rollups}</a>
</li>
</ul>
<div id="tab-scoped-1" class="slds-tabs–scoped__content {!IF(selectedTab==’applicationSettings’, ‘slds-show’, ‘slds-hide’)}" role="tabpanel" aria-labelledby="tab-scoped-1__item">
<apex:outputPanel layout="block" id="applicationSettingsRefreshPanelLEX">
<h3 class="slds-section-title–divider">{!$Label.UI_Text_Application_Settings}</h3>
<div class="slds-m-vertical–small"></div>
<fieldset class="slds-form–compound">
<div class="form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-checkbox">
<apex:inputCheckbox value="{!appSettings.IsActive__c}" />
<span class="slds-checkbox–faux"></span>
<span class="slds-form-element__label slds-truncate">{!$ObjectType.ApplicationSettings__c.fields.IsActive__c.Label}</span>
</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-IsActive" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.IsActive__c.inlineHelpText}</p>
</div>
</div>
</div>
</div>
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-checkbox">
<apex:inputCheckbox value="{!appSettings.TriggersActive__c}" />
<span class="slds-checkbox–faux"></span>
<span class="slds-form-element__label slds-truncate">{!$ObjectType.ApplicationSettings__c.fields.TriggersActive__c.Label}</span>
</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-TriggersActive" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.TriggersActive__c.inlineHelpText}</p>
</div>
</div>
</div>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-checkbox">
<apex:inputCheckbox value="{!appSettings.IsHierarchiesActive__c}" />
<span class="slds-checkbox–faux"></span>
<span class="slds-form-element__label slds-truncate">{!$ObjectType.ApplicationSettings__c.fields.IsHierarchiesActive__c.Label}</span>
</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-IsHierarchiesActive" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.IsHierarchiesActive__c.inlineHelpText}</p>
</div>
</div>
</div>
</div>
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-checkbox">
<apex:inputCheckbox value="{!appSettings.PersistNoMatches__c}" />
<span class="slds-checkbox–faux"></span>
<span class="slds-form-element__label slds-truncate">{!$ObjectType.ApplicationSettings__c.fields.PersistNoMatches__c.Label}</span>
</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-PersistNoMatches" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.PersistNoMatches__c.inlineHelpText}</p>
</div>
</div>
</div>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-checkbox">
<apex:inputCheckbox value="{!appSettings.ShowHelpCaptions__c}" />
<span class="slds-checkbox–faux"></span>
<span class="slds-form-element__label slds-truncate">{!$ObjectType.ApplicationSettings__c.fields.ShowHelpCaptions__c.Label}</span>
</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-ShowHelpCaptions" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.ShowHelpCaptions__c.inlineHelpText}</p>
</div>
</div>
</div>
</div>
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-checkbox">
<apex:inputCheckbox value="{!sysSettings.DisplayOnSettingsPage__c}" />
<span class="slds-checkbox–faux"></span>
<span class="slds-form-element__label slds-truncate">{!$ObjectType.SystemSettings__c.fields.DisplayOnSettingsPage__c.Label}</span>
</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-DisplayOnSettingsPage" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.SystemSettings__c.fields.DisplayOnSettingsPage__c.inlineHelpText}</p>
</div>
</div>
</div>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-form-element__label slds-truncate" for="select-AuditLogLevel">{!$ObjectType.ApplicationSettings__c.fields.AuditLogLevel__c.Label}</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-AuditLogLevel" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.AuditLogLevel__c.inlineHelpText}</p>
</div>
</div>
</div>
<div class="slds-form-element__control slds-size–1-of-1 slds-small-size–1-of-1 slds-medium-size–2-of-3 slds-large-size–1-of-2">
<div class="slds-select_container">
<apex:selectList id="select-AuditLogLevel"
styleClass="slds-select"
value="{!selectedAuditLogLevel}"
multiselect="false"
size="1"
title="{!$ObjectType.ApplicationSettings__c.fields.AuditLogLevel__c.inlineHelpText}">
<apex:selectOptions value="{!auditLogLevelOptions}"/>
</apex:selectList>
</div>
</div>
</div>
<div class="slds-form-element slds-size–1-of-2"></div>
</div>
<div class="slds-form-element__row">
<div class="slds-form-element slds-size–1-of-2">
<label class="slds-form-element__label slds-truncate" for="text-MaxJobsDisplayDays">{!$ObjectType.ApplicationSettings__c.fields.MaxJobsDisplayDays__c.Label}</label>
<div class="slds-form-element__icon">
<a href="javascript:void(0);">
<svg aria-hidden="true" class="slds-icon slds-icon–x-small slds-icon-text-default">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#info’)}" />
</svg>
<span class="slds-assistive-text">Help</span>
</a>
<div id="help-MaxJobsDisplayDays" class="slds-popover slds-popover–tooltip slds-nubbin–bottom-left slds-hide" role="tooltip" aria-live="polite">
<div class="slds-popover__body slds-text-longform">
<p>{!$ObjectType.ApplicationSettings__c.fields.MaxJobsDisplayDays__c.inlineHelpText}</p>
</div>
</div>
</div>
<div class="slds-form-element__control slds-size–1-of-1 slds-small-size–1-of-1 slds-medium-size–2-of-3 slds-large-size–1-of-2">
<apex:inputText id="text-MaxJobsDisplayDays" styleClass="slds-input" value="{!appSettings.MaxJobsDisplayDays__c}" html-type="number" />
</div>
</div>
<div class="slds-form-element slds-size–1-of-2"></div>
</div>
</div>
</fieldset>
<div class="slds-m-vertical–small"></div>
</apex:outputPanel> <!– application settings refresh panel –>
<apex:commandButton id="saveButtonLEX"
action="{!saveApplicationSettingsAction}"
value="{!$Label.UI_Button_Label_Save}"
rerender="mainPanelLEX,msgsRefreshPanelLEX"
onclick="showSpinner();"
oncomplete="init();hideSpinner();"
styleclass="slds-button slds-button–neutral" />
<div class="slds-m-vertical–large"></div>
</div>
<div id="tab-scoped-2" class="slds-tabs–scoped__content {!IF(selectedTab==’targetObjects’, ‘slds-show’, ‘slds-hide’)}" role="tabpanel" aria-labelledby="tab-scoped-2__item">
<apex:outputPanel id="targetObjectsRefreshPanelLEX">
<apex:outputPanel rendered="{!$Setup.ApplicationSettings__c.ShowHelpCaptions__c}">
<div class="slds-notify slds-notify–alert slds-theme–alert-texture" role="alert">
<span class="slds-assistive-text">Info</span>
<h2>{!$Label.UI_Help_Caption_Target_Object_Settings}</h2>
</div>
</apex:outputPanel>
<apex:dataTable value="{!targetObjects}" var="to" headerClass="slds-text-heading–label slds-truncate"
styleClass="slds-table slds-table–bordered slds-max-medium-table–stacked-horizontal slds-no-row-hover slds-table–striped"
columnClasses="slds-cell-wrap slds-truncate" >
<apex:column value="{!to.targetObjectLabel}" headerValue="{!$Label.UI_Column_Header_Setting_Name}" html-data-label="{!$Label.UI_Column_Header_Setting_Name}"/>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Normalisation}" html-data-label="{!$Label.UI_Column_Header_Active_For_Normalisation}">
<apex:inputCheckbox value="{!to.isActiveForNormalisation}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Matching}" html-data-label="{!$Label.UI_Column_Header_Active_For_Matching}">
<apex:inputCheckbox value="{!to.isActiveForMatching}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Merge}" html-data-label="{!$Label.UI_Column_Header_Active_For_Merge}">
<apex:inputCheckbox value="{!to.isActiveForMerge}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Conversion}" html-data-label="{!$Label.UI_Column_Header_Active_For_Conversion}">
<apex:inputCheckbox value="{!to.isActiveForConversion}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Reparenting}" html-data-label="{!$Label.UI_Column_Header_Active_For_Reparenting}">
<apex:inputCheckbox value="{!to.isActiveForReparenting}" disabled="true" />
</apex:column>
<apex:column html-data-label="{!$Label.UI_Text_Action}" styleClass="myapp-column–overflow-visible">
<div class="slds-dropdown-trigger slds-dropdown-trigger–click" aria-expanded="false">
<button type="button" class="slds-button slds-button–icon-border-filled" aria-haspopup="true">
<svg aria-hidden="true" class="slds-button__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.myapp__SLDS202, ‘/assets/icons/utility-sprite/svg/symbols.svg#down’)}" />
</svg>
<span class="slds-assistive-text">{!$Label.UI_Text_Actions}</span>
</button>
<div class="slds-dropdown slds-dropdown–right">
<ul class="slds-dropdown__list" role="menu">
<apex:outputPanel rendered="{!hasTargetObjectPageAccess}">
<li class="slds-dropdown__item">
<apex:commandLink style="color:#0070d2;" action="{!editTargetObjectAction}" value="{!$Label.UI_Text_Edit}" id="targetObjectEditCommandLinkLEX" styleclass="slds-truncate" html-role="menuitem">
<apex:param name="s" value="{!to.targetObjectName}"/>
</apex:commandLink>
</li>
</apex:outputPanel>
<li class="slds-dropdown__item">
<apex:commandLink style="color:#0070d2;"
action="{!deleteTargetObjectAction}"
rerender="targetObjectsRefreshPanelLEX,msgsRefreshPanelLEX"
value="{!$Label.UI_Text_Del}"
id="targetObjectDeleteCommandLinkLEX"
onclick="if(!confirm(‘{!$Label.UI_Text_Confirmation_Proceed_To_Delete}’)){return};"
oncomplete="init();" >
<apex:param name="s" value="{!to.targetObjectName}"/>
</apex:commandLink>
</li>
</ul>
</div>
</div>
</apex:column>
</apex:dataTable>
<!– if no target objects show columns headers and line "No results" beneath –>
<apex:outputPanel rendered="{!IF(NOT(hasTargetObjects),true,false)}">
<div class="slds-text-heading–label-normal slds-text-align–center slds-m-vertical–xx-large">{!$Label.UI_Text_No_Items_To_Display}</div>
</apex:outputPanel>
<div class="slds-m-vertical–small"></div>
<apex:actionFunction name="addTargetObject" action="{!addTargetObjectAction}" />
<button class="slds-button slds-button–neutral" onclick="addTargetObject()">{!$Label.UI_Button_Label_Add}</button>
<div class="slds-m-vertical–large"></div>
</apex:outputPanel> <!– targetObjectsRefreshPanelLEX –>
</div>
<div id="tab-scoped-3" class="slds-tabs–scoped__content {!IF(selectedTab==’dataSources’, ‘slds-show’, ‘slds-hide’)}" role="tabpanel" aria-labelledby="tab-scoped-3__item">
</div>
<div id="tab-scoped-4" class="slds-tabs–scoped__content {!IF(selectedTab==’dynamicHierarchies’, ‘slds-show’, ‘slds-hide’)}" role="tabpanel" aria-labelledby="tab-scoped-4__item">
</div>
<div id="tab-scoped-5" class="slds-tabs–scoped__content {!IF(selectedTab==’customRollups’, ‘slds-show’, ‘slds-hide’)}" role="tabpanel" aria-labelledby="tab-scoped-5__item">
</div>
</div>
<div class="slds-m-vertical–large"></div>
</apex:outputPanel>
<!– / content –>
<!– footer –>
<!– / footer –>
</div> <!– custom scope wrapper –>
</apex:outputPanel> <!– Theme4d/Theme4t –>
<!– Salesforce Classic Theme [Theme3] –>
<apex:outputPanel rendered="{!AND( $User.UIThemeDisplayed <> ‘Theme4d’, $User.UIThemeDisplayed <> ‘Theme4t’) }">
<style>
.activeTab { background-color: #F1F1F1; color:black; background-image:none; height:22px; font-family:Arial,Helvetica,sans-serif; font-size:12px }
.inactiveTab { background-color: #C0C0C0; color:black; background-image:none; height:22px; font-family:Arial,Helvetica,sans-serif; font-size:12px }
</style>
<apex:sectionHeader subtitle="{!$Label.UI_Text_Settings}" title="{!$Label.UI_Text_MDM}" />
<apex:outputPanel id="missingStandardPermissionsPanel" rendered="{!NOT(hasStandardPermissions)}">
<apex:pageMessage summary="{!$Label.UI_Error_No_Customize_Application_Permissions}" severity="warning" strength="1" />
</apex:outputPanel>
<apex:outputPanel id="noCustomPermissionPanel" rendered="{!AND(hasStandardPermissions,NOT($Permission.Manage_Settings))}">
<apex:pageMessage summary="{!$Label.UI_Error_No_Manage_Settings_Permission}" severity="warning" strength="1" />
</apex:outputPanel>
<apex:outputPanel id="msgsPanel">
<apex:pageMessages id="msgs" />
</apex:outputPanel>
<apex:outputPanel id="mainPanel" rendered="{!AND(showMainPanel,$Permission.Manage_Settings,hasStandardPermissions)}">
<apex:tabPanel switchType="client" value="{!selectedTab}" id="mainTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
<apex:tab label="{!$Label.UI_Text_Application_Settings}" name="applicationSettings" id="applicationSettingsTab">
<div style="position: relative; min-height:400px; height:auto !important; height:400px;">
<apex:actionstatus id="pageActionStatus">
<apex:facet name="start">
<div class="waitingSearchDiv" id="loaderDiv" style="background-color: #fbfbfb; height: 100%;opacity:0.65;width:100%;">
<div class="waitingHolder" style="top: 74.2px; width: 91px;">
<img class="waitingImage" src="/img/loading.gif" title="Please Wait…" />
<span class="waitingDescription">{!$Label.UI_Text_Saving}</span>
</div>
</div>
</apex:facet>
<apex:facet name="stop"></apex:facet>
</apex:actionstatus>
<apex:pageBlock id="applicationSettingsPageBlock" title="{!$Label.UI_Text_Application_Settings}" mode="edit" >
<apex:pageBlockButtons >
<apex:commandButton id="saveButton"
action="{!saveApplicationSettingsAction}"
value="{!$Label.UI_Button_Label_Save}"
rerender="mainPanel"
status="pageActionStatus"/>
</apex:pageBlockButtons>
<apex:pageMessage summary="{!$Label.UI_Help_Caption_Application_Settings}" severity="info" strength="1" rendered="{!$Setup.ApplicationSettings__c.ShowHelpCaptions__c}" />
<apex:pageBlockSection showHeader="true" columns="2" collapsible="false" title="{!$Label.UI_Text_Application_Settings}">
<apex:inputField value="{!appSettings.IsActive__c}" />
<apex:inputField value="{!appSettings.TriggersActive__c}" />
<apex:inputField value="{!appSettings.IsHierarchiesActive__c}" />
<apex:inputField value="{!appSettings.PersistNoMatches__c}" />
<apex:inputField value="{!appSettings.ShowHelpCaptions__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem >
<apex:outputLabel value="{!$Label.UI_Text_Audit_Log_Level}" for="auditLogLevelSelectList" />
<apex:selectList id="auditLogLevelSelectList"
value="{!selectedAuditLogLevel}"
multiselect="false"
size="1"
style="width:100px"
title="{!$ObjectType.ApplicationSettings__c.fields.AuditLogLevel__c.inlineHelpText}">
<apex:selectOptions value="{!auditLogLevelOptions}"/>
</apex:selectList>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem />
<apex:inputField value="{!appSettings.MaxJobsDisplayDays__c}" />
<apex:inputField value="{!appSettings.MaxSearchResultsPerDataSource__c}" />
<apex:inputField value="{!appSettings.SearchTermMinimumCharacterCount__c}" />
<apex:inputField value="{!appSettings.DefaultFuzzyMatchThresholdPercentage__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:inputField value="{!appSettings.MaxRecordsPerDataExport__c}" />
<apex:pageBlockSectionItem />
<apex:inputField value="{!appSettings.MaxChildRecordSearchResults__c}" />
<apex:pageBlockSectionItem />
<apex:outputField value="{!appSettings.NamespaceApexPrefix__c}" />
<apex:outputField value="{!appSettings.NamespaceComponentPrefix__c}" />
<apex:outputField value="{!appSettings.NamespacePrefix__c}" />
</apex:pageBlockSection>
</apex:pageBlock>
</div>
</apex:tab>
<apex:tab label="{!$Label.UI_Text_Target_Objects}" name="targetObjects" id="targetObjectsTab" rendered="{!$Setup.ApplicationSettings__c.IsActive__c}">
<apex:outputPanel id="targetObjectsRefreshPanel">
<apex:pageBlock id="targetObjectsPageBlock" title="{!$Label.UI_Text_Target_Object_Settings}" mode="edit" >
<apex:pageBlockButtons >
<apex:commandButton id="addTargetObjectButton" action="{!addTargetObjectAction}" value="{!$Label.UI_Button_Label_Add}" rendered="{!hasTargetObjectPageAccess}" />
</apex:pageBlockButtons>
<apex:pageMessage summary="{!$Label.UI_Help_Caption_Target_Object_Settings}" severity="info" strength="1" rendered="{!$Setup.ApplicationSettings__c.ShowHelpCaptions__c}" />
<apex:pageBlockTable value="{!targetObjects}" var="to" columnsWidth="15px,20%,15%,15%,15%,15%,15%" >
<apex:column headerValue="{!$Label.UI_Column_Header_Action}">
<apex:commandLink action="{!editTargetObjectAction}" value="{!$Label.UI_Text_Edit}" id="targetObjectEditCommandLink" style="color:#015BA7;" rendered="{!hasTargetObjectPageAccess}">
<apex:param name="s" value="{!to.targetObjectName}"/>
</apex:commandLink>
<apex:commandLink action="{!deleteTargetObjectAction}" rerender="targetObjectsRefreshPanel,msgsPanel" value="{!$Label.UI_Text_Del}" id="targetObjectDeleteCommandLink" style="padding-left: 10px; color:#015BA7;" onclick="if(!confirm(‘{!$Label.UI_Text_Confirmation_Proceed_To_Delete}’)){return};" >
<apex:param name="s" value="{!to.targetObjectName}"/>
</apex:commandLink>
</apex:column>
<apex:column value="{!to.targetObjectLabel}" headerValue="{!$Label.UI_Column_Header_Setting_Name}" />
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Normalisation}">
<apex:inputCheckbox value="{!to.isActiveForNormalisation}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Matching}">
<apex:inputCheckbox value="{!to.isActiveForMatching}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Merge}">
<apex:inputCheckbox value="{!to.isActiveForMerge}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Conversion}">
<apex:inputCheckbox value="{!to.isActiveForConversion}" disabled="true" />
</apex:column>
<apex:column headerValue="{!$Label.UI_Column_Header_Active_For_Reparenting}">
<apex:inputCheckbox value="{!to.isActiveForReparenting}" disabled="true" />
</apex:column>
</apex:pageBlockTable>
<!– if no target objects show columns headers and line "No results" beneath –>
<apex:outputPanel rendered="{!IF(NOT(hasTargetObjects),true,false)}">
<div style="padding: 5px; color: #808080; font: 11px Arial,Helvetica,sans-serif;">{!$Label.UI_Text_No_Search_Results}</div>
</apex:outputPanel>
</apex:pageBlock>
</apex:outputPanel>
</apex:tab>
<apex:tab label="{!$Label.UI_Text_Data_Sources}" name="dataSources" id="datasourcesTab" rendered="{!$Setup.ApplicationSettings__c.IsActive__c}">
</apex:tab>
<apex:tab label="{!$Label.UI_Text_Dynamic_Hierarchies}" name="dynamicHierarchies" id="dynamicHierachiesTab" rendered="{!AND($Setup.ApplicationSettings__c.IsActive__c, $Setup.ApplicationSettings__c.IsHierarchiesActive__c)}">
</apex:tab>
<apex:tab label="{!$Label.UI_Text_Custom_Rollups}" name="customRollups" id="customRollupsTab" rendered="{!AND($Setup.ApplicationSettings__c.IsActive__c)}">
</apex:tab>
</apex:tabPanel>
</apex:outputPanel> <!– mainPanel –>
</apex:outputPanel> <!– NOT Theme4d/Theme4t = Salesforce Classic –>
</apex:form>
</apex:page>
[/sourcecode]
