Contact Local Weather

Before you start

This use case has some configuration prerequisites. Make sure you review the Set up section of this page before building !

Learning focus points

• Display external data in Avonni Dynamic Components
• Use HTTP callout actions in flow
• Populate components using on-load interactions and flows

---

Objective

• Build a dynamic card on contacts that return the locale weather data on page load
• Push the boundaries of your customer 360 knowledge

---

Solution

This solution uses Avonni Dynamic Components combined with Salesforce flow and HTTP callout action, all built with no code.

Users get a clean and colourful contact card displaying weather and key data.

How It Works (User Perspective)

1. The user opens the contact record page
2. The component instantly loads the contact's locale weather data
3. Dynamic visibility rules ensure the component's appearance reflects the weather, just like a weather app would

Beautiful weather

Nighttime

Strong wind

Storm

What we'll create

• 1 External service (prerequisite, completely standard configuration)
• 1 autolaunched Flow with an HTTP action to get the weather API data
• 1 Dynamic component

  • With an on-load interaction to ensure the component has all the relevant data upon loading

---

Set up

Prerequisite: Configure an external service

This use case will leverage the OpenWeather app : https://openweathermap.org/api

• External Credential = “how do I authenticate?”
• Named Credential = “where am I calling?”
• Flow = “what endpoint + parameters?”

Configuration

• External credential

  • Label / Name : OpenMeteo_NoAuth
  • Protocol = Custom

    • “Custom” is what Salesforce uses for no-auth / manual headers cases.
• Principal

  • Parameter Name = NoAuth
  • Identity = Named Principal
• Named Credential

  • Label / Name = OpenMeteo
  • URL = https://api.open-meteo.com
  • External Credential = OpenMeteo_NoAuth
• Create a Permission set named PS_OpenMeteoAccess to give users access

  • With External Credential Principal Access to the OpenMeteo_NoAuth service

Build the Autolaunched Flow

1

In Flow Builder, create an Autolaunched Flow

2

Retrieve the Contact record

• Use a Get record element to get the current contact information

  • You only need the MailingLatitude and MailingLongitude for this use case

3

Create the GetOpenWeather HTTP Action

• Set up an HTTP flow action with the following settings

Parameter	Type in Flow	Example	Dynamic	Value	Description
latitude	Double	45.5017	Yes	Contact.MailingLatitude	Current contact's latitude
longitude	Double	-73.5673	Yes	Contact.MailingLongitude	Current contact's longitude
current	String	comma-separated fields	Static	temperature_2m,apparent_temperature,weather_code,wind_speed_10m,precipitation,rain,showers,is_day	All current weather (now) fields the HTTP request will return. Use those needed for your use case. Output will be a variable of the weather at the time of the request.
daily	String	comma-separated fields	Static	temperature_2m_max,temperature_2m_min,precipitation_probability_max,rain_sum,showers_sum,precipitation_sum,sunrise,sunset,daylight_duration,sunshine_duration	All daily weather fields the HTTP request will return. Use those needed for your use case. Output will be a collection of the next 7 days' weather data.
timezone	String	auto	Static	auto	Timezone of the locale.

• Return JSON example

{
"utcx5foffsetx5fseconds_set": true,
"utcx5foffsetx5fseconds": -14400,
"timezonex5fabbreviation_set": true,
"timezonex5fabbreviation": "GMT-4",
"timezone_set": true,
"timezone": "America/New_York",
"longitude_set": true,
"longitude": -73.975105,
"latitude_set": true,
"latitude": 40.762505,
"generationtimex5fms_set": true,
"generationtimex5fms": 0.41556358337402344,
"elevation_set": true,
"elevation": 16,
"dailyx5funits_set": true,
"dailyx5funits": {
"z0time_set": true,
"z0time": "iso8601",
"temperaturex5f2mx5fmin_set": true,
"temperaturex5f2mx5fmin": "°C",
"temperaturex5f2mx5fmax_set": true,
"temperaturex5f2mx5fmax": "°C",
"sunshinex5fduration_set": true,
"sunshinex5fduration": "s",
"sunset_set": true,
"sunset": "iso8601",
"sunrise_set": true,
"sunrise": "iso8601",
"showersx5fsum_set": true,
"showersx5fsum": "mm",
"rainx5fsum_set": true,
"rainx5fsum": "mm",
"precipitationx5fsum_set": true,
"precipitationx5fsum": "mm",
"precipitationx5fprobabilityx5fmax_set": true,
"precipitationx5fprobabilityx5fmax": "%",
"daylightx5fduration_set": true,
"daylightx5fduration": "s"
},
"daily_set": true,
"daily": {
"z0time_set": true,
"z0time": [
"2026-03-26",
"2026-03-27",
"2026-03-28",
"2026-03-29",
"2026-03-30",
"2026-03-31",
"2026-04-01"
],
"temperaturex5f2mx5fmin_set": true,
"temperaturex5f2mx5fmin": [
6.7,
4.3,
-0.3,
1.9,
6.3,
8.7,
8
],
"temperaturex5f2mx5fmax_set": true,
"temperaturex5f2mx5fmax": [
24.5,
16.2,
5.8,
10.6,
14.2,
13.1,
24.8
],
"sunshinex5fduration_set": true,
"sunshinex5fduration": [
31462.92,
0,
43211.37,
43200,
22562.3,
21378.7,
41607.48
],
"sunset_set": true,
"sunset": [
"2026-03-26T19:14",
"2026-03-27T19:15",
"2026-03-28T19:16",
"2026-03-29T19:17",
"2026-03-30T19:18",
"2026-03-31T19:19",
"2026-04-01T19:20"
],
"sunrise_set": true,
"sunrise": [
"2026-03-26T06:48",
"2026-03-27T06:47",
"2026-03-28T06:45",
"2026-03-29T06:43",
"2026-03-30T06:42",
"2026-03-31T06:40",
"2026-04-01T06:38"
],
"showersx5fsum_set": true,
"showersx5fsum": [
0,
0,
0,
0,
0,
0,
0
],
"rainx5fsum_set": true,
"rainx5fsum": [
1.4,
11.22,
0,
0,
4,
6,
0.3
],
"precipitationx5fsum_set": true,
"precipitationx5fsum": [
1.4,
11.22,
0,
0,
4,
6,
0.3
],
"precipitationx5fprobabilityx5fmax_set": true,
"precipitationx5fprobabilityx5fmax": [
35,
60,
21,
1,
17,
30,
34
],
"daylightx5fduration_set": true,
"daylightx5fduration": [
44711.08,
44873.78,
45036.72,
45199.8,
45362.93,
45526.01,
45688.93
]
},
"currentx5funits_set": true,
"currentx5funits": {
"z0time_set": true,
"z0time": "iso8601",
"windx5fspeedx5f10m_set": true,
"windx5fspeedx5f10m": "km/h",
"weatherx5fcode_set": true,
"weatherx5fcode": "wmo code",
"temperaturex5f2m_set": true,
"temperaturex5f2m": "°C",
"showers_set": true,
"showers": "mm",
"rain_set": true,
"rain": "mm",
"precipitation_set": true,
"precipitation": "mm",
"isx5fday_set": true,
"isx5fday": "",
"interval_set": true,
"interval": "seconds",
"apparentx5ftemperature_set": true,
"apparentx5ftemperature": "°C"
},
"current_set": true,
"current": {
"z0time_set": true,
"z0time": "2026-03-26T08:45",
"windx5fspeedx5f10m_set": true,
"windx5fspeedx5f10m": 15,
"weatherx5fcode_set": true,
"weatherx5fcode": 3,
"temperaturex5f2m_set": true,
"temperaturex5f2m": 10.5,
"showers_set": true,
"showers": 0,
"rain_set": true,
"rain": 0,
"precipitation_set": true,
"precipitation": 0,
"isx5fday_set": true,
"isx5fday": 1,
"interval_set": true,
"interval": 900,
"apparentx5ftemperature_set": true,
"apparentx5ftemperature": 7.4
}
}

This configuration provides you with extra data for full flexibility in your implementation.

We will not be using everything for this example : the daily configuration is optional.

View the Going furthersection for expanded ideas on this use case.

4

Assign variables for output

• Use an assignment to map output variables that you want to display in the dynamic component
• Create and assign output variables and formulas
• Assign the action's outputs to variables for easier data management and to transfer them to the dynamic component
• Use formulas to create useful booleans

Review the Flow variables table for details.

5

Save and test your flow

Flow variables

Variable name	Type	Description
vCurrentTemp	Number	Current temperature
vCurFeelsLike	Number	Current "feels like" temperature
vCurPrecipitation	Number	Current amount of precipitation (mm)
vCurWindSpeed	Number	Current wind speed (km/h)
vCurStrongWind	Boolean	True if the wind is over a speed threshold (defined in the flow)
vOutCurIsDay	Boolean	True if the API returns that it is currently daytime

Formulas

Name	Type	Formula	Description
F_CurStrongWind	Boolean	IF ( {!vCurWindSpeed} > 50 , true, false)
F_IsDay	Boolean	IF ( {!vCurIsDay} = 1, true, false)

---

Build the Dynamic Component

This arcade only goes through the On-load interaction, an image and visibility rules. View bellow fort he full setup.

1

Create variables

• Create input variables to retrieve data from the flow (names are those used in the example)
• Variables should match the flow outputs

Review the Contact Local Weather table for details.

2

Create an On-Load interaction

• In the left panel, create a on-load interaction

  • Type : Execute flow
  • Flow Name : select your autolaunched flow
  • Input : recordId
  • Output : map all the input variables created in step 1 witht the flow output variables

3

Set up Dynamic styling

• Add a Container component
• Make the background colourful and dynamic

  • In the Style tab, set the background colour to the F_BackgroundColour variable

4

Configure the Header

• Add a container in the first slot

  • In the style tab, set background to #cfe9fe (or your colour of choice)
• Add a Media Object in the container to organize items
• Add an Avatar, fields, chip container (tags) and buttons to customize the header

We won't go into details as these components are examples and not critical to the use case.

Navigate to the Going furthersection for guidance about configuration.

5

Build the image column

• Drag a column component into the canvas and divide it into 2 columns
• Use the left column to display weather images dynamically, this column will display the main weather image

  • Drag image components and set visibility rules (use your choice of images as Image Source).

    • "Sun / Daylight"

      • Set Visibility rule = F_MainWeatherIcon = Sun
    • "Night"

      • Set Visibility rule = F_MainWeatherIcon = Moon
    • "Rain"

      • Set Visibility rule = F_MainWeatherIcon = Rain
    • "Storm"

      • Set Visibility rule = F_MainWeatherIcon = Storm
    • "Wind"

      • Set Visibility rule = F_MainWeatherIcon = Wind

6

Configure the widget column

• Populate the right column of the component with your widgets
• Use Text components, containers and images to build widgets showcasing important data, such as the temperature, precipitation and wind speed

7

Save and review

Dynamic Component Variables

vCurrentTemp	Number	Current temperature
vCurFeelsLike	Number	Current "feels like" temperature
vCurPrecipitation	Number	Current amount of precipitation (mm)
vCurWindSpeed	Number	Current wind speed (km/h)
vCurStrongWind	Boolean	True if the wind is over a speed threshold (defined in the flow)
vOutCurIsDay	Boolean	True if the API returns that it is currently daytime

Formulas

F_BackgroundColour	Text	IF ( {!vOutCurIsDay} = true , '#1ab9ff' , '#107cad')	Dynamically change the background based on the vOutCurIsDay variable
F_TextColour	Text	IF ( {!vOutCurIsDay} = true , '#ffffff', '#1ab9ff')	Dynamically change the text colour to ensure it is readable with the background
F_MainWeatherIcon	Text	IF( OR( {!vCurPrecipitation} >= 10, {!vCurWindSpeed} >= 40 ), "Storm", IF( {!vCurPrecipitation} > 0,"Rain", IF( {!vCurWindSpeed} >= 20, "Wind", IF( {!vOutCurIsDay} = true,"Sun","Moon" ))))	Used for your weather image visibility rules and be based on the variables created in 1

---

Going further

Ideas

• Leverage the daily data returned by the HTTP action you've set up to build a 7 days forecast.

Features

On Load Interaction

Dynamic components

AvatarButtonChip ContainerImage