{"id":3860,"date":"2014-04-22T16:07:54","date_gmt":"2014-04-22T16:07:54","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=3860"},"modified":"2016-01-12T21:37:37","modified_gmt":"2016-01-12T21:37:37","slug":"creating-progress-bar-field-using-formula-without-any-coding","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-progress-bar-field-using-formula-without-any-coding\/","title":{"rendered":"Creating Progress Bar field using Formula| Without any coding"},"content":{"rendered":"<p style=\"text-align: justify;\">In this post we will discuss on creating Progress bar field without any coding, just by using formula field. Initially it seems like we can&#8217;t create dynamic progress bar field by using only formula in Salesforce. There are some approach, where developers stores 4 images with interval of 25% or 10 images with 10% interval and displaying image with help of Case or IF statement.<\/p>\n<p style=\"text-align: justify;\">We will create Progress bar field, which will reflect every percentage.<\/p>\n<figure id=\"attachment_3864\" aria-describedby=\"caption-attachment-3864\" style=\"width: 435px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Progress-Bar-using-Formula-field-in-Salesforce.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3864\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Progress-Bar-using-Formula-field-in-Salesforce.png?resize=435%2C34&#038;ssl=1\" alt=\"Progress Bar using Formula field in Salesforce\" width=\"435\" height=\"34\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Progress-Bar-using-Formula-field-in-Salesforce.png?w=435&amp;ssl=1 435w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Progress-Bar-using-Formula-field-in-Salesforce.png?resize=300%2C23&amp;ssl=1 300w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/a><figcaption id=\"caption-attachment-3864\" class=\"wp-caption-text\">Progress Bar using Formula field in Salesforce<\/figcaption><\/figure>\n<p>To create perfect Progress bar field, we will need to take help of two images.<!--more--><\/p>\n<ol>\n<li><a title=\"Progress Bar image\" href=\"https:\/\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Border.png\">Empty filled image with border (Download Sample)<\/a><\/li>\n<li><a title=\"Progress bar image\" href=\"https:\/\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Blue.png\">Filled rectangular image (Download Sample)<\/a><\/li>\n<\/ol>\n<p>Upload above two images in Static resource. Once it is uploaded create a formula field.<\/p>\n<p>In Formula field we will be appending both images and repeating &#8220;Filled Image&#8221; as per percentage field. Logic can be seen in below image.<\/p>\n<figure id=\"attachment_3863\" aria-describedby=\"caption-attachment-3863\" style=\"width: 435px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Logic-for-Progress-Bar-using-Formula-field-in-Salesforce.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3863\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Logic-for-Progress-Bar-using-Formula-field-in-Salesforce.png?resize=435%2C79&#038;ssl=1\" alt=\"Logic for Progress Bar using Formula field in Salesforce\" width=\"435\" height=\"79\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Logic-for-Progress-Bar-using-Formula-field-in-Salesforce.png?w=435&amp;ssl=1 435w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/04\/Logic-for-Progress-Bar-using-Formula-field-in-Salesforce.png?resize=300%2C54&amp;ssl=1 300w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/a><figcaption id=\"caption-attachment-3863\" class=\"wp-caption-text\">Logic for Progress Bar using Formula field in Salesforce<\/figcaption><\/figure>\n<p>Formula for Progress Bar Image<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nIMAGE('\/resource\/1398170360000\/BlueProgressBar', 'Test', 10, ( percField__c * 100 )) &amp;\r\nIMAGE('\/resource\/1398170333000\/ProgressBorder', 'Test', 10, (100 - percField__c * 100 )) &amp;\r\n' ' &amp;\r\nTEXT (percField__c * 100) &amp;\r\n'%'\r\n<\/pre>\n<p>In above code &#8220;1398170360000&#8221; is ID of static resource displayed in URL.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post we will discuss on creating Progress bar field without any coding, just by using formula field. Initially it seems like we can&#8217;t create dynamic progress bar field by using only formula in Salesforce. There are some approach, where developers stores 4 images with interval of 25% or 10 images with 10% interval [&hellip;]<\/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_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":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[257,254,255,256,331],"class_list":["post-3860","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-declarative-programming","tag-formula-field","tag-image","tag-point-and-click","tag-salesforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6315,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-breadcrumb-or-chevron-control-in-flow\/","url_meta":{"origin":3860,"position":0},"title":"Create Breadcrumb Or Chevron Control in Salesforce Flow","author":"Jitendra","date":"October 21, 2017","format":false,"excerpt":"Display chevron control or breadcrumb in Flow to show Salesforce flow screen navigation progress","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Chevron Component in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Chevron-in-Flow.gif?fit=460%2C368&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6160,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-hierarchy-custom-settings-to-avoid-hard-coding-in-formula-field-custom-button-process-builder-or-workflow-rules\/","url_meta":{"origin":3860,"position":1},"title":"Use Hierarchy custom settings to avoid hard coding in formula field, custom button, process builder or workflow rules","author":"Jitendra","date":"June 30, 2017","format":false,"excerpt":"Example of using Hierarchy custom settings in formula field, custom button, process builder and workflow rules. Youtube video included.","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Avoid Hard-coding Ids in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Avoid-Harcoding-Ids-in-Salesforce.jpg?fit=1188%2C621&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Avoid-Harcoding-Ids-in-Salesforce.jpg?fit=1188%2C621&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Avoid-Harcoding-Ids-in-Salesforce.jpg?fit=1188%2C621&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Avoid-Harcoding-Ids-in-Salesforce.jpg?fit=1188%2C621&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Avoid-Harcoding-Ids-in-Salesforce.jpg?fit=1188%2C621&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6598,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/read-query-parameter-in-lightning-component\/","url_meta":{"origin":3860,"position":2},"title":"Read Query Parameter in Lightning Component","author":"Jitendra","date":"September 3, 2018","format":false,"excerpt":"Launch Lightning Component using formula field and also read query parameter in Salesforce Lightning Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/09\/Launch-Lightning-Component-using-formula-.png?fit=733%2C311&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4628,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/become-expert-in-formulas-salesforce-video-newsletter-july-2015\/","url_meta":{"origin":3860,"position":3},"title":"Become expert in formulas  &#8211; Salesforce Video Newsletter &#8211; July 2015","author":"Jitendra","date":"July 7, 2015","format":false,"excerpt":"Salesforce video newletter of July 2015 for Formula","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1200,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/step-by-step-salesforce-tutorial-creating-fields-2-of-n\/","url_meta":{"origin":3860,"position":4},"title":"Step by Step Salesforce Tutorial \u2013 Creating fields \u2013 2 of 6","author":"Jitendra","date":"October 7, 2010","format":false,"excerpt":"Step by Step Salesforce Tutorial \u2013 Creating fields \u2013 2 of n series tutorial","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Create Custom object though Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/10\/Create-Custom-object-though-Salesforce-300x238.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5843,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-salesforce-lightning-component\/","url_meta":{"origin":3860,"position":5},"title":"Circular Progress Bar &#8211; Salesforce Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circular-Progress-Bar.gif?fit=332%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3860","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=3860"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3860\/revisions"}],"predecessor-version":[{"id":5227,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3860\/revisions\/5227"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}