Creating a new component

Overview

The New Component Modal is the starting point for every Dynamic Component you build. It opens when you click New Component in the Avonni Components App and offers three paths to get going: a standard template or one of your team's custom templates.

Choose the path that matches how much you already know about what you want to build.

---

Open the New Component Modal

1. Open the Avonni Components App from the Salesforce App Launcher.

2. Click New Component (top-right of the component list view).

3. The modal opens with three tabs at the top: Standard Templates and Custom Templates.

If you're already inside a folder, the new component lands in that folder by default. Move it later from the row action menu if needed.

---

Choose a Starting Point

Path	Best when...
Standard Templates	You want a known starting shape (a Data Table page, a Kanban view, a Map) and prefer to tweak from a working baseline.
Custom Templates	Your team has already built and saved a reusable starting point that matches your use case.

There's no wrong choice — every component is fully editable in the Builder regardless of how it was created. Pick the path that gets you closest to what you have in mind, then iterate.

---

Standard Templates

Standard Templates are preconfigured starting points maintained by Avonni and organized by use case. Each template comes with the right components on the canvas, sensible default settings, and example data wiring you can replace with your own.

Common categories include:

• Data display — Data Table, Kanban, List, Repeater starting points

• Visualization — Map, Chart, Calendar...

• Forms & input — Multi-field input layouts with validation patterns

• Conversations — Chat, Feed, Comment-thread starting points

To use one:

1. Click the Standard Templates tab.

2. Browse the gallery or filter by category.

3. Click a template to see a preview and a description of its contents.

4. Click Use Template.

5. Give the new component a name (use a clear, descriptive one — Account_PipelineKanban, not MyComponent1).

6. Click Create. The Component Builder opens with the template loaded.

→ Component Builder Overview — what to do once the Builder opens

---

Custom Templates

Custom Templates are components your team has saved as reusable starting points. They appear in this tab for everyone in the org with access.

To use a custom template:

1. Click the Custom Templates tab.

2. Find the template (filter by name or by who created it).

3. Click Use Template and follow the same naming flow as standard templates.

To save a component as a custom template:

1. Open the component in the Component Builder.

2. From the component menu (top-right), select Save as Template.

3. Give the template a name and a short description so others can find it.

4. Set the visibility (org-wide or restricted to specific profiles).

Custom Templates pay off when you have a recurring pattern — a standard "record detail" layout, a branded form, a shared filter panel. Save it once, and every future component starts five steps ahead

---

After Creation

Whichever path you choose, the flow is the same:

1. The Component Builder opens with your new component loaded.

2. Set the Target Object API Name in Settings if it isn't already populated.

3. Review the components on the canvas and the bindings in the Properties Panel.

4. Save your work, then Preview to confirm it looks right.

5. Deploy the component when you're ready to use it on a Lightning Page.

→ Publishing a Component — pushing it live

---

Picking the Right Starting Point

A quick decision guide:

You want to...	Pick
Build something close to what a Standard Template already does	Standard Template — fastest to a working result
Reproduce a layout your team uses across multiple pages	Custom Template — consistency for free
Build something simple from scratch and skip the templates	Pick the closest Standard Template and clear what you don't need — faster than starting blank

---

Troubleshooting

Problem	Cause	Fix
A custom template I expect to see isn't there	Visibility was restricted to specific profiles when the template was saved, and your profile isn't included.	Ask the template creator to update visibility, or have an admin adjust the sharing settings.
The new component lands in the wrong folder	The modal defaults to the folder you opened it from.	Move the component from the row action menu in the component list view.
I picked a template by mistake and want to start over	The component is editable but already has the template's content.	Delete the component from the list view and start a new one — faster than clearing everything from the canvas.

Where to go next

Page	What's on it
Component Builder Overview	Tour of the visual design environment you just landed in.
Quick Start tutorial	Build a real component end to end in under 10 minutes.
Publishing a Component	Make your new component available on Lightning Pages or Experience Sites.
Working with Versions	Once it's live, manage updates safely with versioning.