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.



Prerequisites

  • 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.

  • Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts. 



Then, click the big blue plus icon to open the 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.

  • Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.



Then, switch to the Lists tab and select the prefferable element.



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.


Examples


That's it. Below are the examples of different ShortPoint Lists, with the horizontal view.


Date Lists:



File Lists:



Icon Lists:



Image Lists:



Simple Lists: