How to create your own custom components

Components are added to a page via the Block List Property Editor which is part of the core Umbraco CMS. Before adding your own custom components to your uSkinned Site Builder it is important to get familiar with the Block List property editor. 

Creating your own component can be split into 3 separate parts; Document Types, Partial Views and Data Types. Below we outline the process to follow when creating your own components so that they work correctly with the uSkinned Site Builder. 

Document Types

Each uSkinned Component is made up of a Content Document Type and a Settings Document Type. It is recommended that you follow this structure when creating your own custom components to maintain consistency for your website editors.

The fields that you add to your own custom component are entirely up to you and will be completely dependent on the purpose of your component.

We have created several Composition Document Types that can be reused with our components. These can be found within the Umbraco CMS located at Settings (Section) > Document Types (Folder) > Compositions (Folder)

At a minimum, the following compositions should be added to your Component Settings Document Type:

• Item Name (Settings) alias USN_CMP_ItemName: This composition provides a name field that is used for labelling your Block Components when listed within the Block List property editor.
• Component Minimum (Settings) alias USN_CMP_MinSettings: This composition provides an 'Anchor name' and 'Additional styles' field.
• Common Block (Settings) alias USN_CMP_CommonBlockSettings: This composition provides 'Custom classes' and 'Hide from website' field.

Partial Views

The partial view file which controls the HTML output of your component should be placed in ~/Views/Partials/{YOURCODEBASE}/Blocks/

The name you give to this file should match the alias name you give to your Content Document Type. You can add your own prefix to the Document Type alias. The file name of your view will be matched to the text after the last underscore ( _ ) in your alias name.

Data Types

To allow your component to be added to a page by a content editor, you need to add the component to the relevant Block List Property Editor. All Block List Property Editors available with the uSkinned Site Builder can be found within the Umbraco CMS located at Settings (Section) > Data Types (Folder) > USN Data Types (Folder) > Block List (Folder).

There are several Block List Property Editors which controls the different places that components can be added to your site. These are:

• USN Block Components
• USN Block Components (Reusable Excluded)
• USN Block Split Components

When you add a new block the following settings are recommended:

• Label: {{ !$settings.itemName || $settings.itemName == '' ? 'COMPONENT NAME HERE' : $settings.itemName}} {{$settings.hideFromWebsite == true ? '[HIDDEN]' : ''}}
• Overlay editor size: Medium
• Content model: Your Content Document Type
• Settings model: Your Settings Document Type
• Background color: #1B264F

That's you ready to go!

Your new custom component will now be ready to be added to any page of your website.

 #h5yr