1. Components

Use the Component wizard to create a custom component

With SitecoreAI, you can quickly create a copy of a component by using the clone script. This can be convenient, for example, if you want many Promo components that are all styled differently. If you want to create a custom component that is not similar to an existing rendering, you can also use the Component wizard.

To create a custom rendering using the Component wizard:

  1. In the Content Editor, navigate to sitecore/Layout/Renderings/Feature/ and create a folder for your custom components. This ensures that your rendering is not overwritten during SXA updates.

  2. Right-click the folder that you just created, click Insert, and click Component.

  3. In the wizard, fill in the following fields:

    TabFieldDescription
    GENERALComponent nameEnter the name for the new rendering.
    Add to moduleSelect the module the new rendering belongs to.
    Rendering CSS classEnter the CSS class for the rendering.
    Path to rendering viewBy default, the view name is resolved as the component definition item name. To provide a custom path, enter the location of the view here.
    DATASOURCEDatasourceDetermine the data source origin by selecting one of the following options
    current page - data source item reads data from the current page.Ask user for data source - lets the content editor choose the data source.Automatically create data source under page - stores the data source as a page relative data source item under a given page.
    Rendering templateSelect the template.
    Base rendering parameters templateSelect the base template. By default, the Standard Rendering Parameters template is selected.
    Base data source templateSelect the data source template to specify the types of data sources users can create.
    Publishing grouping templateHelps with publishing complex data source structures that have children, for example, Carousel, Tabs, Link List, and Gallery. Can only be used if Publishing Service is enabled.
    Additional compatible templatesEnables you to select multiple templates for the data source. For example, for the Promo rendering, you could use the Promo templates but also other data sources, such as Text and Image.
    BEHAVIORSSelect Page as a data sourceLets you use a page as a data source. Select this option if you want the component to take content from the current page.
    Background imageEnables you to add a background image for the component. It will add a base template to your data source template that contains a field that lets editors pick an image used as background.
    Select data source behaviorDetermines whether users can set data source behavior.
    Component variantsDetermines whether the rendering can have variants.
    Dynamic placeholdersEnables a dynamic placeholder for a rendering.
If you have suggestions for improving this article, let us know!