How can we help you today?

How to Map the Items for the Inline Design Elements inside the Connected Text Design Element

ShortPoint Connect feature allows you to present info contained in your SharePoint list/library dynamically in your ShortPoint Design Element, so you can control the content from a single source. And if there are any changes to the data in the future, you don't need to involve a ShortPoint designer to change the content of the Design Element: it can be done by the content manager right from the back-end list.


Note: Check our ShortPoint Connect: Basic Tutorial to know more about ShortPoint Connect and Items Mapping.


In this solution article, we will show you how you can map the items for the inline Design Elements inside the dynamically connected Text Design Element.


Here is an example of a dynamically connected Text Design Element, that has item mapping for the Abbreviation inline Design Element inside it:


Mapping settings
View mode
mapping settingsview mode



Note: ShortPoint has 9 inline Design Elements in total. These are: Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip.

TABLE OF CONTENTS


Before we begin

  • You have the ShortPoint SPFx Visual Builder version 8.0.x.xx or later.
  • You use Office 365 (SharePoint Online) or SharePoint 2019 environment.
  • You are a ShortPoint user with an active license.


To use the solution described below you should have at least one dynamically connected Text Design Element on the page.


Step 1. Add the item mapping options


Press the chain icon on the right and select the mapping options from the drop-down:


Mapping drop-down options


In our example, we are going to use the abbreviation title as an Abbreviation inline Design Element, and the abbreviation description as an Abbreviation content. 


Cut or copy & paste the Description mapping to the clipboard, and proceed to the next step.


Copy & paste the mapping option


Step 2. Add an inline Design Element and configure its mapping


Add an inline Design Element from the text editor options of the Text Design Element. 


In our example, we are converting the abbreviation title to an Abbreviation inline Design Element and the copied description will be used as an Abbreviation content.


After you added the inline Design Element and configured its settings, click Apply to save the changes:


Configure the Inline Design Element with the mapping option


Note: It is possible to insert the inline Design Element in both Visual Builder and Wireframe Builder. To know more about it, as well as get yourself more familiar with the inline Design Elements feature, check our solution article Introducing Inline Design Elements Feature for Visual Builder and Wireframe Builder.



Note: Check our ShortPoint Connect: Basic Tutorial to know more about ShortPoint Connect and Items Mapping.


After the mapping is done for the inline Design Elements, you can preview your result:


Preview button


Then, click Update and save your page or continue designing it.


Update button


Result


That's it. Here is how the result will look like:


Animation of the mapped Inline Elements in action


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 3 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more