directNavigationHeader

I’ll show you a component that allows you to jump between screen flows without the “Next Screen” hustle. It will require to install the package from the link down below. From there it will be available in your screen flows.

To the official post: https://unofficialsf.com/building-a-direct-screen-access-flow/ (here you can download the package – make sure you are logged into the right org)

How it works / looks like:

What to look out for?

  • Jumping between screens will make you lose your values as its not saved yet
  • Clearing the SelectedTarget after moving forward in order to finish with all values

How to fix it?

  • Between your screen flow and the decision assign defaultVariables with the values you have chosen to store them and assign them back later again
  • Clear selectedTarget variable via assignment after each decision shape
How to build it (text version)
  1. Lets create a new screen flow and drag in the screen element
  2. Scroll down to custom components and use the directNavigationHeader
  3. Turn off the default footer and header of the screen flow
  4. Give the directNavigation Header a name and ideally you thought before hand which screens you may need. Lets just take “Price, Delivery, Quality” – this means we will have 3 screens in total. One for each value, but all having a navigationHeader with these three values in “Target String CSV” (Image 1)
  5. So make sure to populate “Target String CSV” with the same values in all of your screens so you can jump from anywhere to everywhere. Also make sure to have no spaces inbetween your values: : “Value 1,Value 2” instead of “Value 1, Value 2” (This will be otherwise a stumbling block later in your decision) (Image 1)
  6. Once we have the screen setup lets just populate each with a simple input so we have something to see
  7. I will use my awesome feedback rating component for this (you can find the implementation for this here)
  8. Make sure to enable “Advanced” in order to capture the output because we want to save it in a variable – for all the screen flows. (Image 2)
  9. Therefore I create a new variable called “selectedTarget” (Image 2)
  10. Because im Lazy I set up the first screen flow how I need it and then copy it x times
  11. There will be a “start” screen so think which one makes sense for you
  12. In order to not lose the values you picked add an assigment element in between each screen and the decision shape (Image 3)
  13. Create a variable to store each input given (Image 3)
  14. Set the created variables as “default” values for your inputs. They will empty initially but populated once you filled out a field and jump between screens (Image 4)
  15. Add a decision that checks the value of “selectedTarget” and connect it to the proper screen so that based on “selectedTarget” you send your users  to the correct screen (Image 5)
  16. They have to come from the decision and go back to the decision (see complete flow image on top)
  17. To finally save the screen flow add the finish button (turn footer on again) to each screen flow
  18. The default outcome of the decision is what you aim for. In order to get there you will have to clear the selectedTarget variable otherwise it will always redirect to the screens (Image 6)
  19. Add a assignment element when going from the decision to the screen element and clear the selectedTarget (Image 6)
  20. In the final step we will connect the default outcome to an update shape (in our use case) and populate custom fields with our inputs from the different screen flows (Image 7)

How to build it (image version)

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Leave a Reply

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