Tuesday, August 14, 2018

Showing and hiding the tab in Salesforce Lightning Design System in Visualforce page using basic javascript

I am not yet familiar with Salesforce Lightning Design System (SLDS) however I need to start it somewhere.There some requirement come in and it does not have specification on what the UI look likes so I thought why not give SLDS a try.

Before SLDS comes into picture, I experienced using Bootstrap and JQuery. It's simple and easy to use however because it is external javascript library it need to have extra precautions.Sometimes we got issue when the css is conflict.

Still after SLDS , developer need to code javascript in order to enhance user experience for example changing the tab, make the inactive button visible after click as SLDS does not have code for that.It only provide you the CSS how active and disable button looks like.I notice in some demo they use React JS or JQuery.

I love it because it's neat and elegant but I found it hard to customize the theme if our organization has different color scheme from Salesforce. It can be customized using Design Token using Sass, then generate our own CSS zip file. So we can't use tag   for customize CSS. Yet, this  is another new thing to learn.

I am very reluctant to use JQuery in this because I want to avoid third party libraries.While you go through design,  you might notice, all the code that control look and feel in SLDC is defined in class.Therefore we can use Java Script to manipulate CSS to change look and feel.

Here is sample of the tab that I designed using SLDS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="slds-tabs_card slds-tabs_default">
  <ul class="slds-tabs_default__nav" role="tablist">
    <li id="first_tab_header" class="slds-tabs_default__item slds-is-active" title="First Stage Question" role="presentation">
      <a class="slds-tabs_default__link" href="javascript:showTab('first-tab',this);" role="tab" tabindex="-1" aria-selected="false" aria-controls="second_tab" id="second_tab__item">First Stage Question</a>
    </li>
       <li id="first_tab_header" class="slds-tabs_default__item" title="Second Stage Question" role="presentation">
      <a class="slds-tabs_default__link" href="javascript:showTab('second_tab',this);" role="tab" tabindex="0" aria-selected="true" aria-controls="first_tab" id="first_tab__item">Second Stage Question</a>
    </li>
  </ul>
    <!--first tab start -->

    <div id="first_tab" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="first_tab__item">
     <!--content on first tab whatever --->

    </div> 
     <!--first tab end -->
  <!--second tab start -->
   <div id="second_tab" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="second_tab__item">
     <!--content on second tab whatever --->
   </div>
<!--second tab end -->
</div>

The javascript code as below, it use classList remove and add .


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function showTab(tabName, element){
    console.log('tabName '+ tabName);
    console.log('Element '+ element);
    if(tabName=='first_tab') {
     document.getElementById('second_tab_header').classList.remove('slds-is-active');     
    document.getElementById('first_tab_header').classList.add('slds-is-active');
        
    document.getElementById('second_tab').classList.remove('slds-show');
    document.getElementById('second_tab').classList.add('slds-hide');
    
    document.getElementById('first_tab').classList.remove('slds-hide');
    document.getElementById('first_tab').classList.add('slds-show');
    
    }
    else{
    document.getElementById('first_tab_header').classList.remove('slds-is-active');     
    document.getElementById('second_tab_header').classList.add('slds-is-active');  
        
    document.getElementById('first_tab').classList.remove('slds-show');
    document.getElementById('first_tab').classList.add('slds-hide');
    document.getElementById('second_tab').classList.remove('slds-hide');
    document.getElementById('second_tab').classList.add('slds-show');
    
    }

}

The javascript code is to change the CSS value that define in class .This is very basic article but I hope it will be helpful for you.Have you tried SLDS in your organization? How do you find it?

Have a nice day.

Reference :
Lightning Design System
Using SLDS in Visualforce Page
How to change customize theme, background color in Visualforce that using Design system?

Tuesday, July 31, 2018

Trapped in Process fails with error 'The flow failed to access the value because it hasn't been set or assigned' WHILE IT IS NOT


If you have no idea about Known Issue : Process fails with error 'The flow failed to access the value because it hasn't been set or assigned' , it's worth to check it first then you might want to read this entry.
Issue : The user reports that when using Mass Edit to edit Opportunity it will prompt error

Can't Save Record

That's it. No sweet lovely sentence, no flowery and it's leave the mystery for us to dig out the root cause.Typical communication breakdown in love story.

Luckily we have email system whereby we got chance to get the exception email straight in our inbox.Here the error :


Error element myDecision (FlowDecision).
The flow failed to access the value for myVariable_current.Owner.UserRole.DeveloperName because it hasn't been set or assigned.

Just to clarify , yes we use process builder and we are aware of issue above whereby we need to put condition checking in proper order whenever our condition need to check value from other object.This is known issue described here.

A Process that makes a cross-object reference will fail when the foreign key (i.e. relationship field) the reference depends on is not populated.

Our process builder complied with the rules still it happening?

Why  error?

To test , I modified from condition based to formula well something like this.

AND(NOT(ISBLANK([Opportunity].Owner.UserRoleId  )) , OR (  [Opportunity].Owner.UserRole.DeveloperName ='Sales Manager' ,  [Opportunity].Owner.UserRole.DeveloperName ='APAC Manager'') ) 

and pray to God.

Unfortunately it's still happening and I am not able to get much information when Googling.
.
.
.

How the user input?
Using Mass Edit.

Is Process Builder does not support bulk?
Nope- process builder support bulkified .This is delivered in Winter 16. Plus the exception that we face nothing to do with limit.

What is MassEdit?
It is visualforce page that we installed long time ago.

Is it using customize controller?
No, it using standard controller.The save still same like standard, the only thing that different is the UI.No fancy code.
.
.
.
Click on Version Settings of visualforce page.
Version 15.
15...
Change to 42 and pray to God.

Success. No Error.

Yes, upgrade version can solve problem.It will be easier if the error message tell me something wrong with version.

Typical communication-breakdown =)