Build an Invitation App with Salesforce

Design and build an end-to-end invitation app in Salesforce, capturing event details and RSVPs via invitation URLs and social links, with a live preview and mobile-friendly themes.

Identify prerequisites and required tools for building an invitation app with Salesforce, including basics of Salesforce, Lightning Web Components, HTML, CSS, JavaScript, and Apex, plus VS Code and Salesforce CLI.

Create a Salesforce org and set up a Lightning Web Runtime site. Build LWC components to fetch and display data via Apex, and model objects with fields.

Sign up for a Salesforce developer edition, verify your account via email, set a password that meets the criteria, and log in to your new Salesforce org.

Enable digital experiences in Salesforce, set up an experience site using the LWR template, customize and publish a public invitation site with guest access.

Master data modeling in Salesforce by creating the invitation custom object in Experience Cloud, the first of three objects, configuring an auto-number invitation number, tab, and fields via Object Manager.

Add and configure fields on the invitation object in Salesforce, including text fields, date and time, URL, phone, picklist theme, and a formula invite URL to an experience site.

Create a program details custom object in Salesforce using Object Manager, define label and plural label, set record name to program detail name as text, save, and optional tab wizard.

Add fields to the program detail object in Salesforce, including program date, program start time, program end time, and a master-detail relationship to the invitation named program details only.

Create a custom invitation response object in Salesforce to store site responses (accept or reject), configure its labels and an auto-number for the record name via Object Manager.

Add fields to the invitation response object in Salesforce, including name, email, phone, a picklist with joyfully accept and regretfully decline, guests, and comments, linked by master-detail to the invitation.

Add a roll-up summary field on the invitation object to count invitation responses that are joyfully accepted, showing the invitation accepted count.

Create a Salesforce lightning app named invitation app, customize color and image, and add the invitations object as a tab to enable creating invitation records with event, name, and address.

Customize the invitation page layout in Salesforce by dragging fields into sections, adding a two-column contact and social media area, and configuring RSVP and related lists.

Create your first invitation record in the Salesforce invitation app by entering event details, greetings, participants, date, time, address, and map URL; then add program details and manage RSVP rules.

Fix the invitation url by ensuring guest user access, publish the page in the site builder, and test the link in Salesforce to confirm it opens without prompts.

Set up a VS Code project with a manifest, authorize your Salesforce org, and connect the invitation app to the org using the Salesforce CLI extension.

Create an invitation banner lightning web component in VS Code, deploy it to Salesforce, and preview the result in Experience Builder by setting targets to lightning__Community__Page.

Upload and deploy static resources in Salesforce to power a banner with themed images. Import the resource, set a dynamic theme, and render the background in the LWC.

Adjust site spacing in the Salesforce builder by unchecking max content width and setting all spacing to zero, then preview the end-to-end layout.

Design the layout for the banner component by arranging social media icons, event info, and a countdown using flex layout and CSS styling to center content.

Create an apex class with a public static aura-enabled cacheable method get invitation details by id returning invitation__c fields greeting message, social URLs, event participants, date and time, and theme.

Fetch invitation banner details in lwc from apex via wire with a reactive id, map theme and social URLs, and format the date time with lightning formatted date time.

Build a dynamic countdown timer using setInterval and an interval ID, compute days, hours, minutes, and seconds from current time and event date, and stop with clearInterval when it expires.

Add confetti to the banner by loading the confetti.js static resource in Salesforce, then trigger it with confetti.add using the rendered callback.

Create and deploy an invitation program Lightning web component, expose it for the Lightning Community, and place it in the center column beneath the invitation banner.

Fetch program details by invitation ID from Salesforce using Apex and a wire service, cache the results, and store them in the program list of the invitation component.

Design and implement a responsive invitation program details layout using a two-column lightning layout, display program name with date and time, and style headings and borders with data from Apex.

Fetch invitation address details in Salesforce by creating an Apex method and wiring it to a reactive record ID to retrieve the event address, map URL, and contact number.

Design a responsive two-column invitation address component with a map on the left and address and contact details on the right, using lightning layout and apex data to populate fields.

Create an invitation response component in Salesforce Lightning web components using VSCode, deploy it, and preview it in the Lightning community page.

Fetches invitation rsvp details from apex for a given invitation id, wiring the get rsvp details method to retrieve accept, decline, and respond-by messages for display.

Design and build an invitation response component for a Salesforce app, featuring an RSVP form (name, email, phone, RSVP, extra guests, comments) with SLDS styling and a formatted respond-by date.

Fetches dynamic invitation response picklist values from the response field, maps them to radio option objects with proper label and API name, and wires them to the Lightning component.

Capture and submit an rsvp form with a dynamic picklist, sending data to Apex to create an invitation response record including name, email, phone, guests, accept or decline, and comments.

Learn how to display a submitted RSVP message in a Salesforce invitation app by rendering accept or decline messages after form submission and updating the UI.

Store RSVP submission status in the browser using local storage to prevent resubmission on refresh, linking the key to the invitation’s record ID and displaying the correct message on load.

Implement logic in the invitation app to display an RSVP after date message and block submission when the respond-by date has passed, by comparing today with the provided date.

Ensure the invitation app is responsive on mobile by testing in the Salesforce org, adjusting padding, countdown width, banner, and typography with media queries, then republishing to verify.

Learn to implement color theming in a Salesforce invitation app by converting colors to variables, mapping them with DXP styling hooks, and enabling admin palette changes that update the UI.

Make the invitation id dynamic by reading it from the URL parameter, replacing hard-coded ids across banner, address, and program details, then publish and test on the live site.

Perform end-to-end testing of the Salesforce invitation app by creating a new invitation, adding event details, social links, map, and program data, then verify theme changes and invitation status.