Halloween Candy App Challenge - Advanced

[TonyaS]

Halloween Candy App - Advanced

The GOAL is to produce an app that allows users to select their preferences for what they like to see in their Halloween Candy and then run the app to generate results that show them specific candy names that meet those preferences.

If you don't have App Builder, you can start a free trial here. And don't forget there are help docs if you need them!

To complete this, users will minimally need to have the App Builder Creator role for a workspace in AACP.

First, upload the HalloweenCandy CSV to an Input Data tool in Designer Cloud.

Build a simple Designer Cloud Workflow that uses the CSV as Input and uses Filter tools to categorize which elements of candy you want and don’t want. Make sure to change the % columns to Floats.

EXAMPLE of what you could do:

Filter (2) - CHOCOLATE = true

Filter (3) - CARAMEL = true

Filter (4) - PEANUTALMONDY = false

Filter (5) - FAVORITE_PERCENTAGE >= 60

Save your workflow and Launch App Builder.

Create a NEW Application – this App will have 2 separate branches:

First Branch [Workflow Branch]:

1. Drag a Workflow integration tool onto the Orchestrate canvas to connect to the workflow you just created. Set Output Table Name to the “True” output anchor of the last filter tool in your workflow. This will enable you to see candy filtered by ingredients, with a favorite percentage >= 60%.
2. Click the X (Variables) on the leftmost side of the screen. Create 3 separate Variables called Chocolate, Caramel, and Peanuts as Boolean. Leave the Default Value blank. These will be used in the next step as well as later in Set Variables tools.
3. Now, click on your Workflow integration tool, and on the right side, click Workflow Details. Click the tool for Filter 2, and on the right, set the value as Chocolate. Do the same for Filters 3 tool and Filter 4 tool, with Caramel and Peanuts respectively.

Second Branch [Dropdowns Branch]:

4. Drag a CSV Input tool onto the Orchestrate canvas and paste the following comma separated text into it:

label,value

True,true

False,false

5. Next, connect 3 Dropdown tools off of the same output anchor of the CSV Input tool. Click each Dropdown tool and configure Label Source = label, and Value Source = value. Give them their respective Names and Output Columns: Chocolate, Caramel, Peanuts
6. Next, drag 3 Set Variables tools onto the canvas and connect each of the 3 Dropdown tools to their own Set Variables. Configure the proper Set Variables tool by choosing the proper Variable and using ‘Incoming Data’ set the Column: dropdown. Example:  Variable: Chocolate, Column: Dropdown – Chocolate.

Back to the [Workflow Branch]:

7. Lastly, we want to use a Run button to conditionally render a Bar Chart so that you can only see the Bar Chart after hitting the ‘See Results’ Run button.
8. Place the Run button after the Workflow integration tool.
9. Next, connect that Run button to a Bar Chart. Configure the X axis as CANDY_NAME and the Y Axis as FAVORITE_PERCENTAGE.
10. Click the X (Variables) on the leftmost side of the screen. Add a new Variable “See Results” with a Variable Type of Boolean and no default or override values.
11. Next, connect a Set Variables tool off the Run button and configure it to use the See Results variable, “Set variable to” Fixed Value with a Value of “True”

In the App Builder Design canvas:

1. Use the various Building Block tools to design the interface of your app. Drag the various Building Block tools out onto the Design canvas. Try to use at least 1 of each tool. Get creative.
2. On the leftmost side of the screen, go to the next section: Workflow Tools and prepare to start dragging out your Workflow tools to Design your app. Placement does not matter, so get creative here too.
3. First, place all 3 of your Dropdown tools onto the canvas.
4. Next, place your Run button onto the canvas. Click the Run button and update the configurations to style it as you wish.
5. Then, drag the Bar Chart onto the canvas. You already set the X axis as CANDY_NAME and the Y Axis as FAVORITE_PERCENTAGE earlier. Now you can Label the X and Y axes accordingly. Under Conditional Logic, set Variable as See Results, Operator as =, and Value as True. This means you only want to see the Bar Chart once the See Results button is selected. You can also add a Title, Subtitle, play with the font styles, colors and alignments.
6. Feel free to play with the Color Themes on the left side of the screen.

When you’re done, you can use the eye icon to Preview your app as users would see it and try it out. You can also try Publish and Unpublish as well as specifying Custom URL paths.

For extra credit, try adding some Images on the Design tab.

Post a screenshot of your app in a spoiler tag below when you’re finished, and let us know what you thought of this challenge!

[gawa]

Following the instruction, I managed to create my App on AACP. Thank you for providing nice and seasonal challenge, I like it.

[TonyaS]

Wow, great job @gawa  - thank you for being adventurous to try the Advanced one too!