{"id":1364,"date":"2018-02-04T00:04:30","date_gmt":"2018-02-04T00:04:30","guid":{"rendered":"https:\/\/unofficialsf.com\/2018\/02\/04\/dependentpicklists-a-flow-screen-component\/"},"modified":"2019-05-23T12:00:28","modified_gmt":"2019-05-23T20:00:28","slug":"dependentpicklists-a-flow-screen-component","status":"publish","type":"post","link":"https:\/\/unofficialsf.com\/dependentpicklists-a-flow-screen-component\/","title":{"rendered":"Dependent Picklists, a Flow Screen Component"},"content":{"rendered":"

NOTE: This component is basically obsolete. Flow now includes a dependent picklist as an official component. You should have a good reason to bother dealing with the community component, which paved the way and served nobly, but is now deservedly retired.<\/strong><\/span><\/p>\n

Watch the Video<\/strong><\/a> . Get the Source Code<\/a> . <\/strong>Go get this component (not recommended)<\/strong><\/a><\/p>\n

Flow users have been asking for a one-screen dependent picklist solution for a long time. For those not familiar with this UI combination, it works like this:<\/p>\n

<\/figure>\n

Starting with a single set of choices that comes from a standard Salesforce field of type \u201cpicklist\u201d\u2026<\/p>\n

<\/figure>\n

Depending on the value you pick\u2026.<\/p>\n

<\/figure>\n

\u2026you get a different set of choices in the second, dependent selection control:<\/p>\n

<\/figure>\n

DependentPicklists is an installable Flow Screen Component that works on Spring \u201918 and later orgs. Each pair of picklists can be configured using the standard Cloud Flow Designer tools. This is what the control shown in the above images looks like, configured:<\/p>\n

<\/figure>\n

Let\u2019s walk through the process of setting up a dependent picklist:<\/p>\n

    \n
  1. Enable your org to run Lightning Components in Flow Screens. You need to have the \u201cEnable Lightning runtime for flows\u201d checkbox checked in Process Automation Settings, and you need to have My Domain configured.<\/li>\n
  2. Install the DependentPicklist component<\/a>. We\u2019re working on making this component installable from AppExchange and possibly part of the included set of base screen components in the future, but for now you need to install it yourself.<\/li>\n
  3. Add it to a Flow Screen. This is described here<\/a>.<\/li>\n
  4. Configure it. (See Configuring a DependentPicklists Component, below)<\/li>\n<\/ol>\n

    Configuring a DependentPicklists Component<\/h3>\n

    The control consists of a \u201cParent\u201d selection control and a \u201cDependent\u201d selection control. The main job you have, when you configure this control, is to tell the control, for every possible value that can be selected in the Parent control, which dependent picklist to use to populate the Dependent control. Let\u2019s look at the picklists we\u2019re using in the example visible above:<\/p>\n

    <\/figure>\n

    For the Parent select, we\u2019re going to use the IssueType Picklist custom field, which looks like this:<\/p>\n

    <\/figure>\n

    Step 1: Configure the Parent Control<\/strong><\/p>\n

    For this control you need to tell the component which object and field to use to populate the Parent select control. Simply type the object and field names into the attributes Parent Object Name and Parent Field Name:<\/p>\n

    <\/figure>\n

    Step 2: Link each Parent Value to a Dependent Picklist<\/strong><\/p>\n

    There are three possible values for this Parent control, so we need to provide the component with guidance for all three possibilities.<\/p>\n

    To do this, in Flow, you enter a pair of values:<\/p>\n

      \n
    1. a specific possible \u201cchoice\u201d, such as \u201cPrivateBank\u201d<\/li>\n
    2. if that choice is selected, what dependent picklist should be used for the Dependent controls.<\/li>\n<\/ol>\n

      This image shows two of the three pairs of information:<\/p>\n

      <\/figure>\n

      The interpretation should be pretty clear, if the user selects the value International in the Parent control, the component will go and find the picklist values from that field.<\/p>\n

      Note that while the component assumes by default that all of the dependent picklists are on the same object as the Parent, you can specify a picklist on a different object, by entering it like this:<\/p>\n

      Account.MyOtherPicklist__c<\/p>\n

      3) Map your Output Values<\/strong><\/p>\n

      As always you need to map your output values to Flow variables so you can do something productive with the values entered by the user.<\/p>\n

      The two output values are shown here:<\/p>\n

      <\/figure>\n

      Hope this is useful! If you want to customize this control, the source code is available here<\/a>.<\/p>\n

      Finally, I want to give a special shoutout to Piyush Soni<\/a>. I used a lot of code from his solution for using APEX to get field describes<\/a>. Nice work, Piyush!<\/p>\n

      Note that this is not an official Salesforce product or release.<\/p>\n

      Watch the Video<\/strong><\/a>\u00a0. <\/strong>Get the Source Code<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      NOTE: This component is basically obsolete. Flow now includes a dependent picklist as an official component. You should have a good reason to bother dealing with the community component, which paved the way and served nobly, but is now deservedly retired. Watch the Video . Get the Source Code . Go get this component (not […]<\/p>\n","protected":false},"author":35209406,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[23932],"tags":[51394554],"class_list":["post-1364","post","type-post","status-publish","format-standard","hentry","category-flow","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pasQ6m-m0","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/posts\/1364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/users\/35209406"}],"replies":[{"embeddable":true,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/comments?post=1364"}],"version-history":[{"count":4,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/posts\/1364\/revisions"}],"predecessor-version":[{"id":12972,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/posts\/1364\/revisions\/12972"}],"wp:attachment":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/media?parent=1364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/categories?post=1364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/tags?post=1364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}