Introducing the Roundness Feature: What It Is and How to Use It

NOTE:The Roundness feature is still in development and will be released soon.

Starting ShortPoint SPFx version 8.4.2.0 and above, you will have the Roundness feature available for the following Design Elements: Row, Section, Column, Image, Panel, Button, Inline Button, Tabs, Background, Slideshow, Well, and Image List.

This guide will walk you through everything you need to know about the Roundness feature to get started.

Quick How To Use Walkthrough

1. Edit the ShortPoint web part.
2. Click the Easy pass tag of the Design Element you want to use.
3. Select the cogwheel icon to see the Settings window.
4. Go to the Design tab.
5. Adjust the Roundness value by [1] using the blue slider, [2] writing the exact value in the white box, or [3] using the up and down arrows.
6. Click the green check mark once satisfied with the roundness.
7. Click the eye icon to see your page in real-time.
8. Click Save to apply all your changes.

TABLE OF CONTENTS

• Quick How To Use Walkthrough
• Prerequisites
• What is the Roundness Feature?
• How to Use the Roundness Feature
  • Step 1: Edit the ShortPoint tag
  • Step 2: Edit the Design Element
  • Step 3: Adjust Roundness
  • Step 4: Save
• Removing the Roundness

Prerequisites

• You must have ShortPoint SPFx version 8.4.2.0 and above.
• You must be a ShortPoint Designer with an active license.
• You must already have any of the following Design Elements on your SharePoint page: Row, Section, Column, Image, Panel, Button, Inline Button, Tabs, Background, Slideshow, Well, and Image List.

What is the Roundness Feature?

The Roundness feature allows you to round the corners of ShortPoint Design Elements in pixels, giving ShortPoint Designers a new way to style them on their page. This feature is only available for Row, Section, Column, Image, Panel, Button, Inline Button, Tabs, Background, Slideshow, Well, and Image List Design Elements.

How to Use the Roundness Feature

Start the interactive tutorial, or go through the steps below to learn how to use the roundness feature:

Step 1: Edit the ShortPoint tag

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

• Click the close icon to leave the Toolbox:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 2: Edit the Design Element

NOTE:Before proceeding, you must already have any of the following Design Elements on your SharePoint page: Row, Section, Column, Image, Panel, Button, Inline Button, Tabs, Background, Slideshow, Well, or Image List. You can only use the Roundness feature for these Design Elements.

• Click the Easy pass tag of the Design Element you want to use. For this guide, we’ll use the Slideshow Design Element as an example:

• Select the cogwheel icon:

Step 3: Adjust Roundness

• Go to the Design tab.
• You can adjust the roundness of the Design Element in 3 ways:
  • Drag the blue slider to your desired value:

• Manually write your desired value in the white box:

• Click the up or down arrows:

Step 4: Save

• Once you’re satisfied with the roundness, click the green check mark.
• Then, click the eye icon to see your page in real-time:

• Click Save to apply your changes:

That’s it! You can now adjust the roundness of Design Elements.

Removing the Roundness

In case you want to remove the roundness of a Design Element, there are 3 ways you can do so:

• Drag the blue slider to zero:

• Delete the value inside the white box:

• Use the up or down arrows to set the value to zero:

Once you’ve set the value to zero, click the green check mark to apply your changes:

That’s it! You’ve successfully removed the roundness of the Design Element.

Related articles:

• Adding, Duplicating, Moving and Deleting Items in ShortPoint Design Elements
• Animation Feature for ShortPoint Row and Column Design Elements
• Managing Paddings and Margins for ShortPoint Design Elements