LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
        • Displaying Salesforce CMS Files in a Data Table
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Interactive Step-by-Step Configuration Guide

Was this helpful?

  1. Tutorials
  2. Use Cases

Creating a MapCard Showcase

Last updated 1 year ago

Was this helpful?

Overview

This tutorial will effectively explore creating a MapCard Showcase in Experience Cloud using the Avonni Card and Avonni Map components. This combination is ideal for visually displaying the location of a current record, enriching the user interface with interactive and informative elements.

Why Use These Components?

Avonni Card:

  • Centralizing Key Information: The Avonni Card is a focal point for presenting essential details. It organizes information about a specific item or feature clearly and concisely, making it easy for users to grasp the key points quickly.

  • Enhanced Visual Presentation: With its customizable design, the Avonni Card can be tailored to highlight important content attractively, enhancing the visual appeal of the presented information.

Avonni Map:

  • Geographical Context: The Avonni Map complements the Avonni Card by providing geographical context. It visually displays the location related to the item or feature described in the card, offering users a spatial understanding of the information.

  • Interactive Exploration: Users can interact with the map to explore locations, gaining a more comprehensive and engaging experience. This interactivity adds a dynamic layer to the information presented in the Avonni Card.

Interactive Step-by-Step Configuration Guide