We are happy to present a new feature for the ShortPoint Lists Design Elements - horizontal alignment.
Starting from ShortPoint SPFx 6.9.35x version, it has become possible to horizontally align the Lists elements, so there will be a set number of the items in a row. Just like this:
Let's have a closer look at this feature.
TABLE OF CONTENTS
- Your ShortPoint version is 6.9.35.x or higher (click here to check and/or download the latest available version);
- You have a SharePoint list, that you would like to connect to ShortPoint.
Note: There are two ways of creating lists: static and dynamic. We suggest using the dynamic way. Please, check this article, for more details on how to connect the SharePoint lists with ShortPoint elements: ShortPoint Connect: Basic Tutorial.
Step 1: Adding a ShortPoint List
All the ShortPoint Lists Design Elements can be easily added to your pages using ShortPoint Page Builder.
Note: If adding the ShortPoint web part for the first time, Info Design Element will be added automatically. Click the cross icon to remove it. Then, click the big blue plus icon to open the Page Builder.
There are following ShortPoint Lists Design Elements available:
- Date Lists. With this element, you can show the events or announcements in your page with a special focus on the date. Check our Date Lists Design Element article or visit our ShortPoint demos page for more information and demo examples.
- File Lists. Do you need to show the documents related to the specific topic: department-related, policy and procedures? File Lists is an ideal option for you. Visit our ShortPoint demos page for demo examples.
- Icon Lists. With this element, you can show the KPI and OKR metrics, business results, achievements, expenses, or other results, in an illustrative way (e.g., add a money icon to the company revenue results or an airplane icon for the travel expenses). Visit our ShortPoint demos page for demo examples.
- Image Lists. You can show the list of items adding some photos to it using this list element (e.g., the list of your employees from different departments with their photos, or show the conference and meeting rooms of your company). Visit our ShortPoint demos page for demo examples.
- Simple Lists. This list element would be perfect for your company news, updates or announcements. Visit our ShortPoint demos page for demo examples.
For the purpose of this article, we are using Image Lists as an example to show you the step-by-step solution on how to horizontally align the lists. The end results will be presented for all the available Lists Elements.
Step 2: Connecting a SharePoint list with a ShortPoint List
Switch to the Connect tab and choose the needed connection type. Then, fill in the necessary fields. After the list is connected, switch to the Items tab and map the fields. For more details on how to connect the SharePoint lists with ShortPoint elements: ShortPoint Connect: Basic Tutorial.
In this example we are connecting Image Lists to a SharePoint list of the employees, so it will show the employees' name, position, employment type and their photo.
Step 3: Setting a horizontal view
Switch to the Settings tab.
Click the turn-on/turn-off button to enable the Horizontal View.
The additional filed Maximum Items Per Row will open. Use this field to set the maximum number of items you would like to see in a row.
Note: the default maximum number is 2 in a row.
You may click the Preview button and check your result.
Continue editing or click Update and save the page.
That's it. Below are the examples of different ShortPoint Lists, with the horizontal view.
- ShortPoint Connect: Basic Tutorial
- How to Add Sublist in List Elements
- How to Disable the Hover Behavior of Image List Item Titles
- How to Make a List Display Multiple Subtitles
- How to Display the Multiple Hyperlinks in ShortPoint List
- Modify the look of Image List Items with CSS (Border, Shadow and Rounded Corners)
- ShortPoint Date Lists Design Element