Creating two column layout in Flow

Salesforce Two column layout in Flow
Salesforce Two column layout in Flow

Salesforce flow does not support two column page layout in flow, please vote this idea if you want it as out of box functionality.

However, using below solution we can convert single column page layout to double column layout in flow.

We need to embed flow in below Visualforce. Not necessarily you need to have a knowledge of Visualforce code, simply copy paste in your Salesforce organization and replace flow name with your flow name in your organization. This Visualforce page uses JQuery library to manipulate DOM element. Please download latest version of JQuery and save it as static resource with name “JQuery2_1_4” or you can also update static resource name in below code.

You can use variable “ignoreTableRows” to add row numbers or field sequence which you don’t want to covert as two column. I have added as much as comment to make code self explanatory.

Visualforce page:

 
<!-- Author : Jitendra Zaa Description : Below Visualforce page converts single column flow to double column layout -->
<apex:page >
    <!-- Enter your flow name below -->
    <flow:interview name="Two_column_flow" finishLocation="/{!$CurrentPage.parameters.id}">
        <apex:param name="varFlowVar" value="{!$CurrentPage.parameters.id}"/>
    </flow:interview> 
    
    <apex:includeScript value="{!$Resource.JQuery2_1_4}"/>
    
    <script>
        //row number of fields which should be rendered as single column, index starts with 0.
    	var ignoreTableRows = [0,1,6];
    	
    function isValidRow(rowIndex){
      for(var j = 0; j< ignoreTableRows.length; j++)
          {
          	 if(rowIndex == ignoreTableRows[j])
                 return false;
          }
        return true;
      }
        
    $(function() {
        var tableRowCounter = 0;
        var tbl = $('table .detailList');
        var rows = $('tr', tbl);        
       var i = 0;
        for(i = 0; i<rows.length;i++){ 
          if(isValidRow(i)) { 
           var currentRow = $('tr:eq('+i+')', tbl); 
           var nextRowIndex = i+1; //check if next row is valid             if(!isValidRow(nextRowIndex)) { 
   while(!isValidRow(nextRowIndex)) { 
           nextRowIndex = nextRowIndex +1; 
                if(nextRowIndex >= rows.length)
                        break;
                    }
                }
                var nextRow = $('tr:eq('+nextRowIndex+')', tbl);                
                if(nextRow) {
                    var currentColumns = $('td', currentRow);
                    var nextRowColumns = $('td', nextRow);
                    
                    if(currentColumns[2] && currentColumns[3]) {
                        //remove 3rd and 4th column
                        $(currentColumns[2]).remove();
                        $(currentColumns[3]).remove();                        
                        $(nextRowColumns[0]).detach().appendTo(currentRow);
                        $(nextRowColumns[1]).detach().appendTo(currentRow);  
                        $(nextRow).remove(); 	
                      } 
                 } 
            } 
        }         
    }); 
    </script>


<style type="text/css">
        .dataCol, .labelCol{
            padding-top: 5px !important;
            padding-bottom: 5px !important;
        }
    </style>


</apex:page>

Demo output :

Preview Column 1 to Column 2 in Salesforce flow
Preview Column 1 to Column 2 in Salesforce flow

Posted

in

by

Tags:

Comments

20 responses to “Creating two column layout in Flow”

  1. Radnip Avatar
    Radnip

    It’s a shame Salesforce pulled out Javascript from the actual flows. I can understand why they did it, but did make doing this kinda of thing a hell of a lot easier!

    1. Jitendra Zaa Avatar

      Ohh.. I actually didn’t knew that we had capability for Javascript, I started using flow recently only.

  2. Patricia Sterling - OIT Avatar
    Patricia Sterling – OIT

    Error: No variable named “varFlowVar” in flow. how to use this statement to get the 2 column layout a flow

    1. Raghu Avatar
      Raghu

      did you figured out that “VarFlowVar” ??

      1. Jitendra Zaa Avatar

        You would need to define this variable in your flow or ignore line number 5 in above code.

        1. Raghu Avatar
          Raghu

          Hi Ji,

          Thanks for the reply ..
          I deleted the line 5, but still no luck .. ?

          Not Sure If I am doing this part correctly ” Please download latest version of JQuery and save it as static resource with name “JQuery2_1_4” ”

          Please guide me.

          Thanks,
          Raghu

          1. Ram Avatar
            Ram

            Hi Raghu ,

            Any luck ? I was stuck at the same point . Even after having the proper static resource for me it is still the same single column with 10 fields . Any help here is appreciated . Thanks .

          2. Jitendra Zaa Avatar

            You would need to download JQuery from below link and upload as static resource https://jquery.com/download/

          3. Ram Avatar
            Ram

            Hi Jitendra,

            I downloaded the jquery tried both (Download the compressed, production jQuery 3.0.0

            Download the uncompressed, development jQuery 3.0.0) and uploaded as static resource but it still shows as same one column layout . I am attaching the screenshots . Please help on this.

            My Code :

            //row number of fields which should be rendered as single column, index starts with 0.

            var ignoreTableRows = [0,1,6];

            function isValidRow(rowIndex){

            for(var j = 0; j< ignoreTableRows.length; j++)

            {

            if(rowIndex == ignoreTableRows[j])

            return false;

            }

            return true;

            }

            $(function() {

            var tableRowCounter = 0;

            var tbl = $('table .detailList');

            var rows = $('tr', tbl);

            var i = 0;

            for(i = 0; i= rows.length)

            break;

            }

            }

            var nextRow = $(‘tr:eq(‘+nextRowIndex+’)’, tbl);

            if(nextRow) {

            var currentColumns = $(‘td’, currentRow);

            var nextRowColumns = $(‘td’, nextRow);

            if(currentColumns[2] && currentColumns[3]) {

            //remove 3rd and 4th column

            $(currentColumns[2]).remove();

            $(currentColumns[3]).remove();

            $(nextRowColumns[0]).detach().appendTo(currentRow);

            $(nextRowColumns[1]).detach().appendTo(currentRow);

            $(nextRow).remove();

            }

            }

            }

            }

            });

            .dataCol, .labelCol{

            padding-top: 5px !important;

            padding-bottom: 5px !important;

            }

          4. Raghu Avatar
            Raghu

            Hi Ji,

            I am getting this error ?

            Thanks,
            Raghu

          5. Raghu Avatar
            Raghu

            Sorry forgot the attachment..

          6. QuickNote Avatar
            QuickNote

            If you are copying and pasting the code, make sure ‘if(!isValidRow(nextRowIndex)) { ‘ isn’t commented out. The extra ‘}’ is why you are getting the error. Also, remove the space in ‘table .detailList’. It should be ‘table.detailList’.

            That is what got code it working for me.

          7. Ram Avatar
            Ram

            Hi ,

            Can someone please help with my query.

            Thanks,
            Ram

          8. Jitendra Zaa Avatar

            Hi Ram,
            Can you check if you are getting any error in javascript console ? If you are on chrome click “Ctrl+Shift+J” or in IE press F12

          9. Ram Avatar
            Ram

            Hi Jitendra,

            I am seeing two errors . One error which is related to “failed to load resource” i was not sure what it is at all . I am not using that resource anywhere in my code and the code i am using is exact replica of yours . Please take a look in to the screenshot .Thanks.

          10. Ram Avatar
            Ram

            Hi Jitendra,

            Its working for me thanks for all your help.

          11. Raghu Avatar
            Raghu

            Hi Ram,

            Does it works ??

            Please share how ?

            Thanks,
            Raghu

          12. Ram Avatar
            Ram

            Copy the above code mentioned and remove the flow variable . It worked for me .

  3. Nilesh Borse Avatar
    Nilesh Borse

    Nice Tutorial
    Can we change the look and feel of the input field in the flows using CSS ?

    1. Jitendra Zaa Avatar

      Yes we can. Just find selector using chrome developer tool or any other tool.

Leave a Reply to Raghu Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.