How to create your own custom component

Please note, we have yet to fully document this for version 2.x. However, the below information will help point you in the correct direction.

We would recommend starting out by looking at the 'Code block' component. This is our most basic component in terms of code. You should follow the structure and naming convention we use here to maintain consistency with the rest of the codebase.

Locate the Code Block Partial View:

~/Views/Partials/uSkinned/Blocks/Code.cshtml

Locate the Code Block Document Type:

The equivalent of the component switch is now in:

~/usn_default/usnblockcontainers/usn_componentsection.cshtml

Make sure your partial view for your block is named with the same alias name you used for your document type. Further guidance on setting up blocks can be found here:

https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/Block-List-Editor/

Step 1

Step 2

Go to Settings.

Step 3

Expand Document Types > Components.

Step 4

Add the new document type for your component and name it. End the alias name for the new Document type with '_AN' e.g. 'MY_PC_Component_AN'. This will ensure anchor links are created automatically when using link pickers.

Step 5

Add the content and settings options required for your new component.

Step 6

Go to the 'Templates' section of your Document Type and set the default template of your component to 'USN Parent Redirect'. This will ensure if the direct link of your component node in the content tree is accessed, the browser will redirect to the parent page of the component.

Step 7

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNPageComponents.

Step 8

Create the new file for your component and name it.

Step 9

Add the relevant code for your new page component.

Step 10

Still in 'Settings', expand Partial Views > Expand the folder of the theme you are working on e.g. USN_Fabric > Expand USNPageComponents > Open USN_ComponentSwitch.cshtml

Step 11

case My_Pc_Component_AN.ModelTypeAlias:
@Html.Partial(viewPath + "/USNPageComponents/MY_PC_Component_AN", Model, new ViewDataDictionary { { "viewPath", viewPath }, { "pageLayout", pageLayout } })
break;

This will make sure your new component can be rendered to any page or post.

Step 12

Still in Settings > Expand Document Types > Expand Components > Open Page Components Folder.

Step 13

In the top-right, click 'Permissions'.

Step 14

Click 'Add child' and select your new component. Now save.

Step 15

Go to the Content section.

Step 16

Try adding your new component to the components folder under any page or post. :-)

How to create your own custom component

Get started today