How to create your own custom component

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