---
title: "Custom layout: Advanced functionality - Custom variables & overrides (Welcome)"
description: Explore custom variables and built-in overrides, including Manage panel fields and video slides, available in custom layouts for the Welcome app.
---

[Skip to content](https://support.accelerator365.com/en/welcome-custom-layout-advanced-functionality#main-content)

[![Accelerator 365 Logo (Colour + No Text)](https://support.accelerator365.com/hs-fs/hubfs/Accelerator%20Logos/Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png?width=100&height=47&name=Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png)](https://support.accelerator365.com/?hsLang=en)

- [Home](https://support.accelerator365.com/en)
- [Getting started guides](https://support.accelerator365.com/en/getting-started)
- Product support
  
  Show submenu for Product support

    - [Apps](https://support.accelerator365.com/en/apps)
    - [Solutions](https://support.accelerator365.com/en/solutions)
- [Look Book support](https://support.accelerator365.com/en/look-book)
- [Pricing support](https://support.accelerator365.com/en/pricing)
- [Technical support](https://support.accelerator365.com/en/technical)
- [Accelerator 365 website](https://accelerator365.com/)

Open main navigation

Close main navigation

- [Home](https://support.accelerator365.com/en)
- [Getting started guides](https://support.accelerator365.com/en/getting-started)
- Product support
  
  Show submenu for Product support

    - [Apps](https://support.accelerator365.com/en/apps)
    - [Solutions](https://support.accelerator365.com/en/solutions)
- [Look Book support](https://support.accelerator365.com/en/look-book)
- [Pricing support](https://support.accelerator365.com/en/pricing)
- [Technical support](https://support.accelerator365.com/en/technical)
- [Accelerator 365 website](https://accelerator365.com/)
- [Contact us](https://accelerator365.com/pages/contact)

[Contact us](https://accelerator365.com/pages/contact)

 Hello, how can we help you?

- There are no suggestions because the search field is empty.

1. [Accelerator 365 Knowledge Base](https://support.accelerator365.com/en?hsLang=en)
2. [Apps](https://support.accelerator365.com/en/apps?hsLang=en)
3. [Welcome](https://support.accelerator365.com/en/apps?hsLang=en#welcome)

# Custom layout: Advanced functionality - Custom variables & overrides (Welcome)

## A detailed guide to custom variables and built-in overrides, including Manage panel fields and video slides, available in custom layouts

Once you're comfortable with the [core templating structure](https://support.accelerator365.com/en/welcome-custom-layout-core-functionality?hsLang=en), you can go further by giving content editors their own configurable fields in the Manage panel - or by relabeling, reordering, hiding, or conditionally showing the built-in fields each feature already provides.

This guide covers both: defining your own custom variables, and overriding existing built-in fields.

Jump to

- [Custom variables](https://support.accelerator365.com/en/welcome-custom-layout-advanced-functionality#custom-variables)
- [Built-in overrides](https://support.accelerator365.com/en/welcome-custom-layout-advanced-functionality#built-in-overrides)
- [Video slides](https://support.accelerator365.com/en/welcome-custom-layout-advanced-functionality#video-slides)

---

### Custom variables

Custom variables let you define configurable settings for your layouts. They are grouped by feature, and you can access them in your templates like this:

| **Path** | **Description** | **Example Access** |
| --- | --- | --- |
| custom.greeting.\* | Greeting feature variables | `{{custom.greeting.hide}}` |
| custom.time.\* | Time feature variables | `{{custom.time.hide}}` |
| custom.weather.\* | Weather feature variables | `{{custom.weather.hide}}` |
| custom.search.\* | Search feature variables | `{{custom.search.hide}}` |
| custom.content.\* | Content feature variables | `{{custom.content.heading}}, {{custom.content.cycle}}` |
| custom.background.\* | Background feature variables | `{{custom.background.title}}` |

#### Declaring a custom variable

To add a custom variable, declare it inside a `<variables>` block within your metadata template:

```
<template id="metadata" data-name="My layout" data-feature-content="true"...>    <variables>        <variable feature="content" name="cycleSeconds" type="number"            label="Seconds between slide changes"            default="5" />    </variables></template>
```

This adds a field labeled "Seconds between slide changes" to the Content section of the Manage panel. Once set by the content editor, its value is available in your template at `custom.content.cycleSeconds`, and in JavaScript via `ctx.getVariable('custom.content.cycleSeconds')`.

Every custom variable needs a `type`, which determines what kind of input renders in the Manage panel - see the full type-specific attribute tables further down.

Common attributes

Every `<variable>` supports these attributes regardless of `type`:

| **Attribute** | **Purpose** |
| --- | --- |
| `name` | The variable's identifier. Combined with `feature`, this forms its access path, e.g. `custom.content.cycleSeconds`. |
| `feature` | Which feature section the field belongs to: `greeting`, `time`, `weather`, `search`, `content`, or `background`. |
| `scope` | Set to `"slide"` to scope the variable to an individual content slide rather than the feature as a whole. |
| `label` / `label-xx` | The field's display label in the Manage panel. Use `label-xx` (e.g. `label-fr`) to provide per-locale translations. |
| `tooltip` / `tooltip-xx` | Helper text shown alongside the field. Supports the same per-locale `-xx` suffix as `label`. |
| `order` | Controls the field's position relative to other fields in the same section. |
| `default` | The value used when the field has no prior value set. |
| `showWhen` | Conditionally shows/hides the field - see [Conditional visibility](https://support.accelerator365.com/en/welcome-custom-layout-core-functionality#conditional-visibility)in the Core functionality guide. |

#### Type-specific attributes

**`type="string"`**

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `multiline` | `false` | Render as a multi-line text area instead of single-line input. |
| `rows` | `3` | Number of visible rows when `multiline="true"`. |

**`type="richtext"`** (rich text editor)

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `default` | - | Default HTML content. |
| `features` | all | Comma-separated list of toolbar features to keep enabled (omit others to disable them). |
| `brandcenterfontcolors` | `false` | Include Brand Center palette in the font color picker. |
| `brandcenterhighlightcolors` | `false` | Include Brand Center palette in the highlight color picker. |
| `defaultfontsize` | - | Must be one of `10,12,14,16,18,20,24,28,32,36,42,68` - other values are ignored. |
| `hidethemecolors` | `false` | Hide theme colors from color pickers. |
| `hidestandardcolors` | `false` | Hide standard colors from color pickers. |
| `hideautomaticcolor` | `false` | Hide the "automatic" color option. |
| `hiderecentcolors` | `false` | Hide recently-used colors. |
| `hidemorecolors` | `false` | Hide the "more colors" callout entirely. |
| child `<fontColor value="#hex" label="Name" />` | - | Add a custom swatch to the font color picker. |
| child `<highlightColor value="#hex" label="Name" />` | - | Add a custom swatch to the highlight color picker. |

Rich text always ignores the section's inherited theme color when rendering (fixed, not configurable). Empty content renders nothing rather than an empty block.

**`type="number"`**

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `min` | - | Minimum value. |
| `max` | - | Maximum value. |
| `kind="slider"` | - | Render as a slider instead of the default spin-button. |

**`type="boolean"`**

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| *(none type-specific)* | - | Renders as a toggle; only `default` (`"true"`/`"false"`) applies. |

**`type="choice"`**

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `kind="radio"` | - | Render as a radio group instead of the default dropdown. |
| child `<choice value="" label="" label-xx="" />` | - | Defines each selectable option (`value` stored, `label`/`label-xx` shown). |

`type="url"` **/** `type="image"` (identical set — `image` restricts to images) 

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `defaultTab` | - | Which picker tab opens by default (`stockimages`, `link`, `org`, `onedrive`, `site`, `upload`, `recent`). |
| `extensions` | - | Comma-separated allowed file extensions. |
| `tabs` | - | Comma-separated list of which picker tabs to show. |

**`type="color"`**

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `morecolors` | `false` | Show the "more colors" callout. |
| `brandcentercolors` | `false` | Include your organization's Brand Center palette in the "more colors" callout. |
| `hidestandardcolors` | `false` | Hide the standard palette, showing only custom `<color>` swatches / Brand Center colors. |
| `defaultcolor` | - | Hex value pre-selected when the field has no prior value (e.g. new slide). |
| child `<color key="#hex" title="Name" />` | - | Define the custom swatch palette. |

**`type="list"`** (options sourced from a SharePoint list)

| **Attribute** | **Default** | **Purpose** |
| --- | --- | --- |
| `list-url` | - | Site-relative URL of the source SharePoint list/library. |
| `list-column` | - | Internal name of the column used as the option's label/value. |
| `select` | - | Fields to retrieve (`$select`). |
| `multi-select` | `false` | Allow selecting more than one item from the list. |
| `expand` | - | Fields to expand (`$expand`), e.g. lookup columns. |
| `order-by` | - | Column name to sort items by. |
| `allow-blank` | `false` | Add a blank ("None") option; selecting it clears the value. |

---

### Built-in overrides

Every feature (Greeting, Time, Weather, Search, Content/Slides, Background) already has its own built-in fields in the Manage panel - slide title, subtitle, overlay color, schedule, audience, and so on. A layout author can **reference these existing fields by name** to hide them, relabel them, reorder them, or make them conditional - without redefining the field itself.

To do this, add a `<variable>` whose `name` matches the built-in field's identifier (always prefixed `acc-`), inside the `<variables>` block of your metadata template:

```
<variable feature="content" name="acc-slideOverlay"    label="Overlay color"    hidden="false"    order="6"    showWhen="content.featuredImage" />
```

Supported attributes on a built-in override:

| **Attribute** | **Purpose** |
| --- | --- |
| `name` | The built-in field identifier, e.g. `acc-slideTitle`, `acc-slideOverlay`, `acc-greetingPhotoSize`. |
| `label` | Replace the field's default label. **Single value only — no `label-xx` per-locale variants, and no `tooltip` override**, unlike custom variables. |
| `hidden` | `true` to remove the field from the Manage panel entirely. |
| `order` | Reposition the field among other fields in the same section. |
| `showWhen` | Show/hide conditionally - see [Conditional visibility](https://support.accelerator365.com/en/welcome-custom-layout-core-functionality#conditional-visibility) in the Core functionality guide. Can reference any other custom variable or built-in value, including on a different feature. |
| Type-specific attributes | A color-type override (e.g. `acc-slideOverlay`) also accepts the same color attributes as a custom color variable - `morecolors`, `brandcentercolors`, `hidestandardcolors`, `default`, `defaultcolor` - see the type-specific table above. |

**Example - layout-specific brand palette on the slide overlay picker, only shown once a featured image is set:**

```
<variable feature="content" name="acc-slideOverlay" label="Overlay color"    morecolors="true" brandcentercolors="true" defaultcolor="#000000" hidestandardcolors="true"    order="6" showWhen="content.featuredImage">    <color key="#000000" title="Black" />    <color key="#ffffff" title="White" /></variable>
```

#### Full list of overridable built-in fields

Not every override supports every attribute - the "Overridable via" column lists exactly which of `hidden` / `showWhen` / `order` / `label` (+ color-specific attributes) each field actually respects. Setting an unsupported attribute is silently ignored.

| Feature | Override name | Field it controls | Overridable via |
| --- | --- | --- | --- |
| Greeting | `acc-greetingDayTime` | Time-of-day segments used to pick a greeting (morning/afternoon/evening) | `hidden`, `showWhen`, `label` |
| Greeting | `acc-greetingDayTimeToggle` | Toggle to enable/disable time-of-day greetings | `hidden`, `showWhen` |
| Greeting | `acc-greetingMessage` | Default greeting message text | `hidden`, `showWhen`, `label` |
| Greeting | `acc-greetingOverrides` | Per-day/custom greeting overrides list | `hidden`, `showWhen`, `label` |
| Greeting | `acc-greetingPhoto` | User photo display toggle | `hidden`, `showWhen`, `label` |
| Greeting | `acc-greetingPhotoSize` | Photo size (small/medium/large) | `hidden`, `showWhen`, `label` |
| Time | `acc-timeDisplay` | Time display mode (Browser / Custom / Off) | `hidden`, `showWhen`, `label` |
| Time | `acc-timeFormat` | 12h / 24h format toggle (shown when display mode is Custom) | `hidden`, `showWhen`, `label` |
| Time | `acc-timeDisplayDate` | Date display mode (Browser / Custom / Off) | `hidden`, `showWhen`, `label` |
| Time | `acc-timeDateFormat` | Date format dropdown (shown when date display is Custom) | `hidden`, `showWhen`, `label` |
| Time | `acc-timeCustomDateFormat` | Free-text custom date format string (shown when date format is Custom) | `hidden`, `showWhen`, `label` |
| Time | `acc-timeTimezones` | Timezone list/picker configuration | `hidden`, `showWhen`, `label` |
| Time | `acc-timePreview` | Live preview of the time widget in the Manage panel | `hidden`, `showWhen`, `label` |
| Weather | `acc-weatherApiKey` | Weather API key field | `hidden`, `showWhen`, `label` |
| Weather | `acc-weatherLocation` | Default location field | `hidden`, `showWhen`, `label` |
| Weather | `acc-weatherTemperatureUnits` | Celsius/Fahrenheit unit toggle | `hidden`, `showWhen`, `label` |
| Weather | `acc-weatherPreview` | Live preview of the weather widget in the Manage panel | `hidden`, `showWhen`, `label` |
| Search | `acc-searchLabel` | Search box label | `hidden`, `showWhen`, `label` |
| Search | `acc-searchPlaceholder` | Search box placeholder text | `hidden`, `showWhen`, `label` |
| Search | `acc-searchScope` | Search scope (this site / hub / organisation) | `hidden`, `showWhen`, `label` |
| Search | `acc-searchReplaceSearchPage` | Toggle to replace the default results page URL | `hidden`, `showWhen`, `label` |
| Background | `acc-imagePicker` | Background image picker | `hidden`, `showWhen`, `label` |
| Background | `acc-overlayControls` | Background overlay color/opacity controls | `hidden`, `showWhen`, `label`, `default` (opacity), `defaultColor`, `colors`, `min`, `max`, `moreColors`, `hideThemeColors`, `hideStandardColors` |
| Background | `acc-altText` | Background image alt text | `hidden`, `showWhen`, `label` |
| Content/Slides | `acc-slideTitle` | Slide title | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideSubtitle` | Slide subtitle | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideImage` | Slide background image (static slides) | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideOverlay` | Slide/poster color overlay (static + video slides) | `hidden`, `showWhen`, `order`, `label`, `default` (opacity), `defaultColor`, `colors`, `min`, `max`, `moreColors`, `hideThemeColors`, `hideStandardColors`, `brandCenterColors` (static slides only) |
| Content/Slides | `acc-slideCTA` | Call-to-action button (static slides only) | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideVideoUrl` | Video source picker (video slides only) | `order`, `label` — **no `hidden`/`showWhen`**, this field always renders |
| Content/Slides | `acc-slideVideoOptions` | Wrapper section titled "Video options" that contains the Loop/Muted toggles below (video slides only, hidden entirely for SharePoint-hosted video) | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideLoop` | Loop toggle inside Video options (video slides only) | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideMuted` | Muted toggle inside Video options (video slides only) | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideSchedule` | Start/end scheduling | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideAudience` | Audience targeting | `hidden`, `showWhen`, `order`, `label` |
| Content/Slides | `acc-slideAltText` | Alt text / decorative toggle | `hidden`, `showWhen`, `order`, `label` |

 Feature/slide-scoped overrides (Content/Slides) need `scope="slide"` on the `<variable>` tag, same as slide-level custom variables.

---

### Video slides

Content slides can be of type **video** (source: YouTube, Vimeo, OneDrive, SharePoint, or direct upload), configured entirely by the content editor in the Manage panel - there is no `<variable type="video">` to declare.

**Step 1 - opt in.** Video slides only appear as an option in the Manage panel if the layout's metadata declares support for them:

```
<template id="metadata" data-name="My layout" ... data-supports-video="true">
```

Without `data-supports-video="true"`, editors cannot add a video slide at all, and any existing video slides are skipped when rendering (they never appear on the front end).

**Step 2 - render it.** Simply add this component to your slide markup:

```
<div data-component="carousel-slide-video" src="{{embedUrl}}" background="{{background}}"    id="{{id}}" loop="{{loop}}" muted="{{muted}}" alt="{{altText}}"></div>
```

The full slide markup looks like the existing built-in "Featured" layout example (`src/app/Welcome/shared/assets/layouts/featured.layout.html`):

```
<div data-component="carousel-slide" id="{{id}}" class="featured__slide featured__slide--{{overlayColor}}">    <div data-component="hide-when" slideid="{{id}}" property="playingId">        <div data-component="carousel-slide-gradient" color="{{overlayColor}}" opacity="{{overlayOpacity}}"></div>        <!-- title / subtitle / greeting / time / weather markup here -->        <div data-component="carousel-slide-image" src="{{background}}" alt="{{altText}}"            {{#if (eq kind "video")}}showdefault="false"{{/if}}></div>        <div data-component="carousel-text" title="{{title}}" subtitle="{{subtitle}}" url="{{ctaUrl}}" text="{{ctaText}}"></div>        <div data-component="slide-toolbar" id="{{id}}"></div>    </div>    <div data-component="carousel-slide-video" src="{{embedUrl}}" background="{{background}}"        id="{{id}}" loop="{{loop}}" muted="{{muted}}" alt="{{altText}}"></div></div>
```

Use `showWhen="content.kind==video"` to show a field only on video slides, e.g.:

```
<variable feature="content" scope="slide" name="acc-slideOverlay"    showWhen="content.kind==video" />
```

---

#### [➡️ **Next:** Custom layout: Advanced integration - Data, audience & lifecycle](https://support.accelerator365.com/en/welcome-custom-layout-advanced-integration?hsLang=en)

#### <https://support.accelerator365.com/en/welcome-custom-layout-core-functionality?hsLang=en>

#### [⬅️ Back:](https://support.accelerator365.com/en/welcome-custom-layout-core-functionality?hsLang=en)[Custom layout: Core functionality](https://support.accelerator365.com/en/welcome-custom-layout-core-functionality?hsLang=en)

- [Getting started](https://support.accelerator365.com/en/getting-started?hsLang=en)
- [Apps](https://support.accelerator365.com/en/apps?hsLang=en#main-content)

    - [Accordion](https://support.accelerator365.com/en/apps?hsLang=en#accordion)
    - [Advent Calendar](https://support.accelerator365.com/en/apps?hsLang=en#advent-calendar)
    - [Alerts](https://support.accelerator365.com/en/apps?hsLang=en#alerts)
    - [Anniversaries](https://support.accelerator365.com/en/apps?hsLang=en#anniversaries)
    - [Audience Subscription](https://support.accelerator365.com/en/apps?hsLang=en#audience-subscription)
    - [Back to Top](https://support.accelerator365.com/en/apps?hsLang=en#back-to-top)
    - [Before and After](https://support.accelerator365.com/en/apps?hsLang=en#before-and-after)
    - [Carousel](https://support.accelerator365.com/en/apps?hsLang=en#carousel)
    - [Countdown Calendar](https://support.accelerator365.com/en/apps?hsLang=en#countdown-calendar)
    - [FAQ](https://support.accelerator365.com/en/apps?hsLang=en#faq)
    - [Gauge](https://support.accelerator365.com/en/apps?hsLang=en#gauge)
    - [Glossary](https://support.accelerator365.com/en/apps?hsLang=en#glossary)
    - [Image Map](https://support.accelerator365.com/en/apps?hsLang=en#image-map)
    - [Launchpad](https://support.accelerator365.com/en/apps?hsLang=en#launchpad)
    - [My Calendar](https://support.accelerator365.com/en/apps?hsLang=en#my-calendar)
    - [My Contacts](https://support.accelerator365.com/en/apps?hsLang=en#my-contacts)
    - [My Emails](https://support.accelerator365.com/en/apps?hsLang=en#my-emails)
    - [Noticeboard](https://support.accelerator365.com/en/apps?hsLang=en#noticeboard)
    - [Page Authors](https://support.accelerator365.com/en/apps?hsLang=en#page-authors)
    - [Page Breadcrumbs](https://support.accelerator365.com/en/apps?hsLang=en#page-breadcrumbs)
    - [Page Feedback](https://support.accelerator365.com/en/apps?hsLang=en#page-feedback)
    - [Page Tags](https://support.accelerator365.com/en/apps?hsLang=en#page-tags)
    - [Page Tour](https://support.accelerator365.com/en/apps?hsLang=en#page-tour)
    - [Pages Directory](https://support.accelerator365.com/en/apps?hsLang=en#pages-directory)
    - [People Directory](https://support.accelerator365.com/en/apps?hsLang=en#people-directory)
    - [Poll](https://support.accelerator365.com/en/apps?hsLang=en#poll)
    - [Rate My Day](https://support.accelerator365.com/en/apps?hsLang=en#rate-my-day)
    - [Section Search](https://support.accelerator365.com/en/apps?hsLang=en#section-search)
    - [Site Analytics](https://support.accelerator365.com/en/apps?hsLang=en#site-analytics)
    - [Spotlight](https://support.accelerator365.com/en/apps?hsLang=en#spotlight)
    - [Stock Price](https://support.accelerator365.com/en/apps?hsLang=en#stock-price)
    - [Subscribe Now](https://support.accelerator365.com/en/apps?hsLang=en#subscribe-now)
    - [Table of Contents](https://support.accelerator365.com/en/apps?hsLang=en#table-of-contents)
    - [Tabs](https://support.accelerator365.com/en/apps?hsLang=en#tabs)
    - [User Profile](https://support.accelerator365.com/en/apps?hsLang=en#user-profile)
    - [Welcome](https://support.accelerator365.com/en/apps?hsLang=en#welcome)
- [Solutions](https://support.accelerator365.com/en/solutions?hsLang=en#main-content)

    - [Content Manager Dashboard](https://support.accelerator365.com/en/solutions?hsLang=en#content-manager-dashboard)
    - [Translator for SharePoint](https://support.accelerator365.com/en/solutions?hsLang=en#translator-for-sharepoint)
- [Look Book](https://support.accelerator365.com/en/look-book?hsLang=en)
- [Pricing](https://support.accelerator365.com/en/pricing?hsLang=en)
- [Technical](https://support.accelerator365.com/en/technical?hsLang=en#main-content)

    - [General](https://support.accelerator365.com/en/technical?hsLang=en#general)
    - [Maintenance](https://support.accelerator365.com/en/technical?hsLang=en#maintenance)
    - [Troubleshooting](https://support.accelerator365.com/en/technical?hsLang=en#troubleshooting)

- [About](https://accelerator365.com/pages/about-us)
- [Blogs](https://accelerator365.com/blogs/updates)
- [Reply](https://www.reply.com/en)
- [Partners](https://accelerator365.com/pages/find-a-partner)
- [Contact](https://accelerator365.com/pages/contact)
- [License Agreement](https://accelerator365.com/pages/license-agreement)
- [Privacy Policy](https://www.reply.com/en/privacy-policy)
- [Service Level Agreement](https://accelerator365.com/pages/service-level-agreement)

[![Accelerator 365 logo](https://support.accelerator365.com/hs-fs/hubfs/Accelerator%20Logos/Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png?width=60&height=29&name=Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png "Accelerator 365 logo")](https://accelerator365.com/)

<https://accelerator365.com/> <https://www.youtube.com/channel/UCMVaIadJ7JwrUrusv_y64Fw/featured> <https://www.linkedin.com/company/accelerator365/>

Accelerator 365 by Reply