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:
Log in to the CMS > Go to Settings > Expand Document Types > Components
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:
Step 1
Login to CMS.
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. :-)