{"id":4993,"date":"2015-11-03T05:23:33","date_gmt":"2015-11-03T05:23:33","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4993"},"modified":"2016-03-08T20:48:37","modified_gmt":"2016-03-08T20:48:37","slug":"creating-two-column-layout-in-flow","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-two-column-layout-in-flow\/","title":{"rendered":"Creating two column layout in Flow"},"content":{"rendered":"
\"Salesforce<\/a>
Salesforce Two column layout in Flow<\/figcaption><\/figure>\n

Salesforce flow does not support two column page layout in flow, please vote this idea<\/a> if you want it as out of box functionality.<\/p>\n

However, using below solution we can convert single column page layout to double column layout in flow.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Visualforce page:<\/strong><\/p>\n

 \r\n<!-- Author : Jitendra Zaa Description : Below Visualforce page converts single column flow to double column layout -->\r\n<apex:page >\r\n    <!-- Enter your flow name below -->\r\n    <flow:interview name="Two_column_flow" finishLocation="\/{!$CurrentPage.parameters.id}">\r\n        <apex:param name="varFlowVar" value="{!$CurrentPage.parameters.id}"\/>\r\n    <\/flow:interview> \r\n    \r\n    <apex:includeScript value="{!$Resource.JQuery2_1_4}"\/>\r\n    \r\n    <script>\r\n        \/\/row number of fields which should be rendered as single column, index starts with 0.\r\n    \tvar ignoreTableRows = [0,1,6];\r\n    \t\r\n    function isValidRow(rowIndex){\r\n      for(var j = 0; j< ignoreTableRows.length; j++)\r\n          {\r\n          \t if(rowIndex == ignoreTableRows[j])\r\n                 return false;\r\n          }\r\n        return true;\r\n      }\r\n        \r\n    $(function() {\r\n        var tableRowCounter = 0;\r\n        var tbl = $('table .detailList');\r\n        var rows = $('tr', tbl);        \r\n       var i = 0;\r\n        for(i = 0; i<rows.length;i++){ \r\n          if(isValidRow(i)) { \r\n           var currentRow = $('tr:eq('+i+')', tbl); \r\n           var nextRowIndex = i+1; \/\/check if next row is valid             if(!isValidRow(nextRowIndex)) { \r\n   while(!isValidRow(nextRowIndex)) { \r\n           nextRowIndex = nextRowIndex +1; \r\n                if(nextRowIndex >= rows.length)\r\n                        break;\r\n                    }\r\n                }\r\n                var nextRow = $('tr:eq('+nextRowIndex+')', tbl);                \r\n                if(nextRow) {\r\n                    var currentColumns = $('td', currentRow);\r\n                    var nextRowColumns = $('td', nextRow);\r\n                    \r\n                    if(currentColumns[2] && currentColumns[3]) {\r\n                        \/\/remove 3rd and 4th column\r\n                        $(currentColumns[2]).remove();\r\n                        $(currentColumns[3]).remove();                        \r\n                        $(nextRowColumns[0]).detach().appendTo(currentRow);\r\n                        $(nextRowColumns[1]).detach().appendTo(currentRow);  \r\n                        $(nextRow).remove(); \t\r\n                      } \r\n                 } \r\n            } \r\n        }         \r\n    }); \r\n    <\/script>\r\n\r\n\r\n<style type="text\/css">\r\n        .dataCol, .labelCol{\r\n            padding-top: 5px !important;\r\n            padding-bottom: 5px !important;\r\n        }\r\n    <\/style>\r\n\r\n\r\n<\/apex:page>\r\n<\/pre>\n
Demo output :<\/strong><\/p>\n
\"Preview<\/a>
Preview Column 1 to Column 2 in Salesforce flow<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Simple utility to convert One column to Two column layout in Salesforce Flow<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[352],"class_list":["post-4993","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-flow"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5885,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-spring-17-release-my-favorite-features\/","url_meta":{"origin":4993,"position":0},"title":"Salesforce Spring 17 release – My favorite features","author":"Jitendra","date":"January 27, 2017","format":false,"excerpt":"List of my favorite features in Salesforce Spring 17","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Apex Batch job - Spring 17","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":5010,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-none-required-dropdown-field-in-flow\/","url_meta":{"origin":4993,"position":1},"title":"Non mandatory dropdown field in Flow","author":"Jitendra","date":"November 12, 2015","format":false,"excerpt":"Creating Non Mandatory dropdown field in Salesforce flow","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce flow Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/11\/Salesforce-flow-Output.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/11\/Salesforce-flow-Output.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/11\/Salesforce-flow-Output.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4967,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-flow-interview-questions-for-admins-part-23\/","url_meta":{"origin":4993,"position":2},"title":"Salesforce Flow Interview Questions for admins – Part 23","author":"Jitendra","date":"December 7, 2015","format":false,"excerpt":"\ufeff Consider it interview questions or FAQs, However below are some high level information or gotchas related to Salesforce Flow. 221. How to create lookup field in Salesforce flow? Ans : There is no direct way to create a lookup field in flow but we can use workaround mentioned in\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Sample Salesforce flow using loop element","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/11\/Sample-Salesforce-flow-using-loop-element.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/11\/Sample-Salesforce-flow-using-loop-element.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/11\/Sample-Salesforce-flow-using-loop-element.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":6298,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-winter-18-release-my-favorite-features\/","url_meta":{"origin":4993,"position":3},"title":"Salesforce Winter 18 Release \u2013 My Favorite Features","author":"Jitendra","date":"October 4, 2017","format":false,"excerpt":"My favorite Salesforce Winter 18 features about Lightning, Flow, Platform Event , Shield and Salesforce DX","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flow in Salesforce App Builder","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4987,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flow-in-salesforce-youtube-video-tutorial\/","url_meta":{"origin":4993,"position":4},"title":"Flow in Salesforce – Youtube Video tutorial","author":"Jitendra","date":"October 31, 2015","format":false,"excerpt":"Short video tutorials to understand basics of Salesforce flow and how to get most of it","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/4tR0nNVjhjM\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5070,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/dependent-picklist-in-salesforce-flow-using-custom-metadata-type-video\/","url_meta":{"origin":4993,"position":5},"title":"Dependent picklist in Salesforce flow using Custom Metadata type – Video","author":"Jitendra","date":"December 7, 2015","format":false,"excerpt":"Salesforce flow is great alternative for Visualforce pages used by admin. I have written, multiple blog post on Salesforce flow already and in this post we will discuss how we can create dependent picklist in Flow. If you are already using flow, might know that creating dependent picklist is not\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce flow - Dependent picklist output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/12\/Salesforce-flow-Dependent-picklist-output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4993"}],"version-history":[{"count":10,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4993\/revisions"}],"predecessor-version":[{"id":5407,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4993\/revisions\/5407"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}