Modifying the Application Flow
Table of Contents
To modify the content of the application, such as fields, picklist values or display text, you will need to edit the Screen Flow directly. This article provides instructions for some simple customizations and resources to learn more about Flow.
Copying the Application Template Flow for Customization
When customizing the template, first create a new version of the flow so that any changes you make can easily be reverted to the original version. While you can use versioning to go back to an earlier version of the flow, it is best practice to maintain the original template as a fallback. Alternatively, if you wish to create multiple applications, this feature allows you to clone from the original.
Make a Copy of the Existing Flow
To create a new flow based on the template, navigate to Setup → Process Automation → Flows. Click on the name of the application that you wish to start from.
This will bring you to Flow Builder. We want to make a new copy of the flow, so you can refer back to the original in the future. Start by clicking Save As New Version in the upper right-hand corner.
In the window that appears, click the dropdown next to "Save As" and select "A New Flow." Enter the Flow Label (display name) and Description for your copy of the flow (for example, Custom – HomeKeeper Online Application – Homeownership). The Flow API Name will automatically populate when you fill in the Flow Label.
Click Save to create your new copy of the flow. Once you’ve made updates, always save and activate your custom flow to begin using it.
CAUTION: Please note that the flow must run in “System Mode without Sharing” to be accessible to guest users.
It is enabled by default, but if you run into any errors receiving data from your Site page, check to make sure this setting is selected.
Editing the Application Flow
Adding/Editing Display Text in the Application
Follow these steps to add static information to any page of the application, including display text, images or graphics, and hyperlinks.
EXAMPLE: In this example, we'll be adding a list of required documents to the Document Upload page
To edit the text that is displayed on any of the application pages, you’ll need to edit the flow from Flow Builder. From Setup → Process Automation → Flows, click on the name of your new copy of the application flow made by following the instructions above.
In Flow Builder, find the screen that corresponds to the application page you wish to edit. In this example, we’re editing the document upload page. Most of the screen components are in blue to the left.
The Document Upload screen, however, is to the bottom right of the flow. Click to drag the page around or use the zoom in and out buttons to view all components.
Double-click on the component you wish to edit. This will bring up the Edit Screen window.
Edit Existing Text
To edit existing text, click on the Display Text component that begins with “Please upload…”, and the Display Text editor panel will pop up on the right.
Scroll down to find the text body. Edit your text below where it says, ‘Insert a resource…”
- This is a rich text editor, so you can format your text however you like, including font size, hyperlinks, and images. Scroll down in the Display Text panel to view all available options.
Add New Text Boxes
To add new text boxes, find Display Text in the components panel on the left. Click and drag the Display Text component onto the page.
Add your text using the instructions under the “Edit Existing Text” section above, and click ‘Done’.
Updating a screen requires you to save the flow as a new version to finalize your changes. In the upper right corner, click Save as a New Version → Save, without making any changes to the name or description.
NOTE: Only one version of a Flow can be Active at a time. When you click ‘Activate’, you're setting the current version as active, but you can always revert back to an earlier version.
Whenever you make a significant change to your Flow (such as editing text, adding fields, etc.), you will be required to ‘Save as a New Version’ before activating. This is the system's way of ensuring that you can easily revert back, undoing any unwanted changes.
You’ll see a new version number next to your flow’s name in the upper left corner. Click ‘Activate’ to finalize the changes. This new version will now appear wherever the flow is accessed from, including your Experience Site page.
NOTE: If you need to revert to an earlier version of your flow, you can view earlier versions of your flow by clicking the dropdown arrow next to the name of your flow in the Flow Builder header. From there, you can revert to earlier versions, undoing any changes made without losing them.
CAUTION: Before activating your flow, a panel will appear with warnings. These are known warnings and will not affect the performance of the flow.
The first warning is about System Mode without Sharing, which grants users access to your data. The HomeKeeper Online Application Template has been designed to safely use this setting along with our Guest User Code Updates provided in HomeKeeper Version 2.14.
The second warning is that the ThankYou screen does not provide any further navigation. By default, the template is designed for users to close out of the tab.
Adding Fields and Picklist Values to the Flow
If you wish to include other HomeKeeper fields or your own custom fields on the application, you can add them from the Flow Builder.
EXAMPLE: In this example, we'll be adding another HomeKeeper field to the application, the Farm Worker picklist on the Service File object
First, access the Flow Builder. From Setup → Process Automation → Flows, click on the name of the new flow version you made following the instructions above. Find the screen you wish to modify, and double-click the screen component you want to edit to open the screen editor.
Create the Field in the Screenflow
In the Edit Screen under the Components tab, use the search bar to search for the field type of the field you want to add.
Drag and drop the input component that is the same type as your field (the Farm Worker field is a picklist, so we've added the Picklist component here).
Once it is placed, you’ll be able to edit it from the Picklist panel on the right.
First, enter a label. You will name the field on the screen the same as the field that you want to add. (Example: We have labeled the screen field Farm Worker, because we are adding the Farm Worker field from the Service File). The API Name will automatically populate.
NOTE: From this page, you can also choose if this field is required in the Application by checking off the “Require" box. Marking fields as required in the flow does not mean that your field will become required when editing the Service File.
Next, if you are adding a Picklist as we are here, you must enter each picklist value under the “Choice” field. Scroll down to enter the available options.
NOTE: In this example, the picklist values are simply ‘Yes’ and ‘No’. For longer text, it can be helpful to have your field open in the Object Manager in one tab of your browser, and Flow Builder in another. Then you can copy and paste the picklist values from the field in Object Manager directly to avoid errors.
WARNING: When adding picklists to a screen, the text for your “Choice” values must exactly match the picklist values on the existing field. If there are any differences in the picklist values of the field and the choices available in the screen (such as a typo or extra space) the automation will fail.
For each choice, click “New Choice Resource” in the dropdown. Then, type each picklist value. Repeat for all dropdown/picklist values you want to appear in the application.
You can select a default choice here as well. Once you’ve added the options for this field, you can click away to add additional components. Click ‘Done’ to return to the main Flow Builder screen.
Connect Your New Field to the Corresponding Record
Now that the input field has been added to the screen, you need to connect it to the correct record in your HomeKeeper. Farm Worker is a field on the Service File, so locate the Create Records – CreateServiceFile action.
Double-click on the new action to open the Edit Create Records window. Scroll down to the bottom of the Set Field Values for the Service File section. Click Add Field.
In the left box, enter the name of the field in HomeKeeper. In the right box, find the Screen Component you created in the previous step (should be the same as the field name).
Click Done to return to Flow Builder.
Editing a screen requires you to Save as a New Version. See the instructions above for how to Save your changes.
Add Your Flow to the Experience Site Page
To add your copy of the flow to the Experience Site, navigate to your Experience Site Builder from Setup → Digital Experiences → All Sites. In the Site Builder, click on the existing Flow Component, which is the original application.
To Replace the Existing Flow with Your Edited Copy
The Flow menu will appear on the right side of your screen. Click the dropdown field under Flow and enter the name of your copy of the Online Application flow. This will replace the existing Flow with your copy.
Click ‘Publish’ in the upper right-hand corner to finalize your changes.
To Display Multiple Applications on the Same Site
Follow these instructions to display your copy of the Online Application without deleting the old one. For example, if you're providing different applications for different types of clients, you can display your new copy on a separate page.
Create a New Site Page
Start by creating a new Site page. At the top of your screen, click the Home dropdown box:
Select Standard Page → + New Blank Page → 1 full-width column layout.
Name your new page something distinct from your Primary Application and click ‘Create’ to finalize.
Edit Your New Site Page
Your new page will be blank. Add the ‘Rich Text Content’ component to place a header or other text.
Add the Flow component to place your new application flow.
Add New Site to Navigation Menu
Now, we have to add your new page to the Navigation Menu.
Click on the Navigation Bar at the top to start - your's may have fewer options, but it will say ‘Home’ and will be blue by default.
The Navigation Menu will open on the right-hand side of your screen. Click ‘Edit Default Navigation’:
Select ‘Add a New Menu Item’
Enter the following-
- Name: Name of the new application you want to display
- Type: Site Page
- Page: (the name of the new page you created) LIVE HomeKeeper Online Application
- Check the box next to Publically Available?
Click ‘Save Menu’ to create your new tab.
Now, both applications are available from the navigation bar!
- You must have a Home Page and cannot rename it. If you wish to place your original application on a new page, copy the steps above to create a new page for it.
- You can put more information on Home, or just leave it blank, since you can link directly to each of your Application Pages.
Click ‘Publish’ in the upper right-hand corner to finalize your changes.
Learn More
There is so much more to learn about Flow, and the best place to start is with Salesforce's learning resources: