How to Add Sublist Levels into ShortPoint Lists

By default, you don’t have the option to add sub-levels to a ShortPoint List (Image List, Icon List, Simple List, File List, etc.):

This article will demonstrate how to add sub-levels to ShortPoint Lists using Custom CSS and Class names:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the CSS Code
  • Step 3: Edit the ShortPoint List
  • Step 4: Paste the code
  • Step 5: Add Class Names
  • Step 6: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have a static ShortPoint List (Image List, Icon List, Simple List, File List, etc.) on your page.

Interactive Tutorial

Start the interactive tutorial to learn how to add sub-levels to a ShortPoint List:

Below is the Custom CSS used in the tutorial:

.sublist--level-1 {
  margin-left: 30px;
  width: calc(100% - 30px);
}

.sublist--level-2 {
  margin-left: 60px;
  width: calc(100% - 60px);
}

.sublist--level-3 {
  margin-left: 90px;
  width: calc(100% - 90px);
}

NOTEThis solution is only applicable for static ShortPoint List Design Elements. This is because you don’t have the option to add a Class name to individual items in a connected ShortPoint List.

Step-by-step Tutorial

Follow the steps below to learn how to add sub-levels to a ShortPoint List:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

• Select the Edit properties icon:

Step 2: Copy the CSS Code

• Copy the code below:

.sublist--level-1 {
  margin-left: 30px;
  width: calc(100% - 30px);
}

.sublist--level-2 {
  margin-left: 60px;
  width: calc(100% - 60px);
}

.sublist--level-3 {
  margin-left: 90px;
  width: calc(100% - 90px);
}

NOTEBefore proceeding, make sure you have a static ShortPoint List (Image List, Icon List, Simple List, File List, etc.) on your page. Ensure that it is static and not connected, as this solution only works for static List Design Elements.

• Click the EasyPass tag of the List Design Element:

• Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code in the Custom CSS field:

Step 5: Add Class Names

• Below are the class names you can add to each item on your List. Copy the class name you want to use:
  • sublist--level-1 - allows you to move an item 30 pixels to the right.
  • sublist--level-2 - allows you to move an item 60 pixels to the right.
  • sublist--level-3 - allows you to move an item 90 pixels to the right.

• Click the back icon:

• Select the cogwheel icon of the item you want to modify:

• Go to the Custom CSS tab:

• Paste the Class name you copied into the Class field. As you can see, depending on the class name you copied, the selected item will move to the right, creating a sub-level:

• Click the back icon:

• Repeat the same steps for the other items you want to customize:

Step 6: Save

• Once satisfied, click the green check mark.
• Click the eye icon to see your page in real-time:

• Save your changes:

Congratulations! You have successfully added sub-levels to your ShortPoint List:

Related articles:

• How to Create an Anchor Link that Opens to a Specific Accordion Item
• How to Add a Search Box to Your SharePoint Page Using the Code Design Element
• How to Use the Text Alignment Feature for the Textshow Design Element