Som
Partner

Adding Tabbed Sections in Template

Hi Team,

I am looking for an easy way to add Tabbed Sections in our templates and would request assistance on the same. This week I am working on creating a “Category” section on an Article page.

Presently it is hard coded in the template. But we want it to work in the same way as it does for “Taxonomy” Tab in the Surety Demo.

I want to add the below tabs in our templates:

  1. Taxonomy Tab
  2. Categories Tab: 
  3. Metadata & Header Content Tab

I have done the following steps:

  1. Under Templates created the “Category Item Template” for the Category pages
  2. Create Category Picker Template 
  3. Create Category Item Template 
  4. Updated the inut.aspx file for Article page with a sample code for the Tabbed section 
  5. I am not sure if I should create a CategoryHelper.cs

But with all these done, I am not sure if I am heading in the right direction. I feel I am missing a lot of things here or my work is incomplete.

Please could you help me to get the above mentioned tabs added to our site. Any advise or documentation guide could of great help.

0 Kudos
1 Reply
MarcusEdwards
Crownpeak (Retired)

There are a couple of things going on here that should be tackled separately.

 

Creating a Category selector

You have the right idea. You will need:

  • Category Item template: this is the template that will be used to create category items
  • Category Item Picker (component): most likely a code-only component that will use Asset.GetFilterList to discover all Category Item content assets in a particular location, and then render an Input.ShowSelectList control.

Once you have the Category Item Picker component, add a new section to the Article template definition that uses a “null” layout and your picker component. The latter will have the category picker appear on a new tab that matches the section name.

 

Adding tabs to your input forms

There are two ways to do this depending on whether you are using Component Library or plain templates.

If you are using Component Library, then each tab in the input form corresponds to a “section” that you create when setting up a Template Definition. A section is a combination of a layout and the components to place in that layout – see Surety Press Release Template definition (id 8366).

If you are using plain templates, then you need a combination of:

 

NOTE: It is best to ask generic questions ("How do I create tabs in my input form using Component Library") on the Community site. If you have a problem that requires you to list specific asset ids, that would be better handled by contacting Support or an Account Manager.

0 Kudos