Add Custom Properties to Person Cards : ShortPoint Support

As is, the Person Cards Design Element is already packed with everything you need to showcase your team effectively. It comes ready with a rich set of fields, including Name, Position, Department, Email, Phone, and much more.

Default fields shown inside the Person Cards configuration panel

But what if you need to add a custom field that only applies to your organization? No worries! The Person Cards Design Element can do that too. This article will show you how.

Blank Custom Property Text and Link input fields within the design element settings

TABLE OF CONTENTS

Prerequisites
Interactive Tutorial
Step-by-step Tutorial

Prerequisites

You must have the latest version of ShortPoint SPFx installed.
You must be a ShortPoint Designer with an active license.
You must already have Person Cards on your SharePoint page.

Interactive Tutorial

Start the interactive tutorial to start adding custom properties to Person Cards:

Step-by-step Tutorial

Follow the detailed guide below to add custom properties:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit.
Close the Toolbox:

Clicking the X icon to close the SharePoint Toolbox before editing web parts

Edit the ShortPoint web part:

Selecting the edit web part icon to modify the ShortPoint element settings

Step 2: Edit the Person Cards Design Element

NOTEBefore proceeding, make sure the Person Cards Design Element is already on your page. We also recommended using the Detailed Person Cards Style to ensure that your custom property will be shown correctly:

Selecting the Detailed style dropdown menu inside the ShortPoint Page Builder interface

Click the EasyPass tag of the Person Cards:

Selecting the Person Cards EasyPass tag on the active design element

Select the cogwheel icon:

Clicking the element cogwheel icon to open Advanced settings for Person Cards

Step 3: Add Custom Property

Go to the Advanced tab.
Expand Custom Properties:

Expanding the Custom Properties dropdown section within the element's Advanced settings tab

Write the Title you want to assign to the custom property:

Entering a custom Mobile Phone title into the Custom Property 1 Title text box

Choose the Icon you want to assign to the custom property:

Selecting a phone icon from the Custom Property 1 Icon dropdown field

NOTEYou can add up to 3 custom properties in the Person Cards.

Step 4: Add Content to Custom Property

Depending on the Person Cards Design Element you’re using, choose the path that suits you:

For Non-connected Person Cards:

Go to the Items tab.
Click the cogwheel icon of the first item:

Clicking the settings cogwheel icon of an individual item

Add content to the custom property you created:

Entering a phone number value directly into the Custom Property 1 Text box

Click the back icon:

Clicking the back arrow navigation button inside the item editing panel

Repeat the steps for the other items.

For Connected Person Cards:

Go to the Items tab.
Click Configure:

Clicking the green Configure button for a connected Element

Map the property you want shown in the custom property.

Mapping the dynamic PhoneNumber data property to the Custom Property 1 Text field

Step 5: Save

Once done, click the green checkmark.
Save your changes:

Clicking the Save button on the element toolbar to commit layout changes

And publish your page:

Clicking the Republish button on the SharePoint action bar to make changes live

Well done! You can now add custom properties to the Person Cards Design Element.

How to Add Custom Properties to the Person Cards Design Element

Prerequisites

Interactive Tutorial