Render Component Settings

To render component settings, you can use a component settings URL and component settings rendering options.

Component Settings URL

A component settings URL is rendered using an inline frame and called with parameters to allow specific settings of an actual component dropped onto a page. The settings URL has this format:

{Component Settings URL}?instance=<app-instance>&width=<width>&currCompId=<id of the app associated with the settings panel>&locale=<locale>
Name Type Description

Component Settings URL

URL

Component Settings URL of a component

width

Number

Width of the Settings inline frame in pixels

currCompId

String

Current component ID of the component edited by the Settings panel

locale

String

Current locale of the host site (Site Builder). Format is <language>_<dialect>. Example: En_us.

Local Component Settings Rendering Options

You have three options for rendering the inline frame in the Settings panel for a local component, based on the size and complexity of the inline frame. Each option is specified in the settingsRenderOption property.

Note:

These options are available only to local components. Remote components Settings panels always render in a dialog.
  • inline
    • Use this option only if you have a few small properties for the user to enter.

    • The inline frame will be inserted onto the General tab in place of the usual button to navigate to the Settings panel.

    • Provides the most integrated solution, requiring the least amount of clicks for a user, but it has limited space.

  • panel
    • Use this option when you have a longer list of properties, but they can still be reasonably displayed within the 300 pixels of the standard Settings panel.

    • The inline frame will slide into view and a Back button will appear to return the user to the General tab.

    • Provides an integrated solution where you can interact with the inline frame on the page.

  • dialog
    • The default mode for handling more general settings layouts requiring a complex user interface.

    • Displays the inline frame in a modal dialog on the page.