How can we help you today?

Adding, Copying/Pasting Experience in Visual Builder and Wireframe Builder

In this article we will show you the new adding and copy/pasting experience in Visual Builder and Wireframe Builder.


TABLE OF CONTENTS


This article is for you

  • You have to the ShortPoint SPFx Visual Builder version 8.0.x.xx or later.
  • You use Office 365 (SharePoint Online) or SharePoint 2019 environment.

General


Design Elements cannot be placed outside the Section and Row


In the Wireframe Builder and Visual Builder, the Design Elements cannot be added or pasted outside the ShortPoint Section and Row.


First Section on the page


By default, the Info Design Element will be added to the first Section on the page, when you just added the ShortPoint web part. 

To add a new ShortPoint Design Element, you will need to delete it.


  • In Wireframe Builder:

This is how the first Section will look like:


First Section default contents in Wireframe Builder


You may open the Text settings by clicking the cog wheel icon to check the hint message there: 


Cog icon to open the Text Design Element settings


You will see the default hint message in the text area:


Default hint message in the Text Design Element: Content tab


To remove the Info Design Element, click the recycle bin icon: 


Recycle bin icon to remove the Design Element


  • In Visual Builder:

Enter the EasyPass Active mode of the Info Design Element and click the recycle bin icon to remove it:


EasyPass Active mode and removing the default Info Design Element


Single Section on the page


Users cannot delete the Section from the page, if it is the only one existing. Remove button will not be available:


  • In Wireframe Builder:

No Remove button for a single Section on the page: Wireframe Builder


  • In Visual Builder:

No Remove button for a single Section on the page: Visual Builder


Adding new Design Elements


Visual Builder


Use the Insert button to add a new Design Elements inside the Column:


Insert button inside the Column


After you clicked it, choose the Design Element you would like to insert:


Insert an Element window



Wireframe Builder


Use the Insert button to open the Page Builder modal and add new Design Elements inside the Column:


Insert button inside the Column


Copying/duplicating existing Design Elements


Visual Builder


There are two ways of copying/duplicating the Design Elements in the Visual Builder.


  • Option 1: Context menu


Right-click on the Design Element to open the Context menu and choose the options from the drop-down:


Context menu and its drop-down options


  • Option 2: EasyPass Active mode and Other Actions


Activate the EasyPass Active mode. Click the three dots icon (1) to access the Other Actions and choose the options from the drop-down (2):


EasyPass Active mode and Other actions drop-down options:


Wireframe Builder


To duplicate the existing Design Element, either right click on it to open the Context menu or click the three dots icon to open the Other Actions and choose Duplicate option from the drop-down:


Duplicate option from Other Actions in Wireframe Builder mode


To copy the Design Element either right click on it to open the Context menu or click the three dots icon to open the Other Actions, and then choose Copy option from the drop-down: 


Copy option from the drop-down of Other actions in Wireframe Builder


Once the Design Element is copied, you may paste it using the Other Actions, by choosing the paste option: 


Paste options from the Other Actions drop-down in Wireframe Builder


There are the following paste options:

  • Paste Before. Use this option if you would like to insert the copied Design Element before the current Design Element.

  • Paste After. Use this option if you would like to insert the copied Design Element after the current Design Element.

  • Paste Inside. Use this option if you would like to insert the copied Design Element  inside the current Design Element. This option is only available for content-holder Design Elements.
    Note: The content-holder Design Elements are Column, Accordions, Alert, Animate, Background, Frame, Info, List, Panel, Tabs, Templates, TOC Content, Toggles, Well.

  • Paste Left. Use this option if you would like to insert the copied Design Element on the left to the current Design Element. This option is only available for inline Design Elements.
    Note: The inline Design Elements are Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip.

  • Paste Right. Use this option if you would like to insert the copied Design Element on the right to the current Design Element. This option is only available for inline Design Elements.
    Note: The inline Design Elements are Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip.


The pasted code will be processed, and all plain HTML will be added as a Text Design Element.


Mapping items - connected Design Elements


If you are using dynamically connected Design Element and would like to add the item mapping, put the cursor where you want to add it and click the chain icon to choose the mapping value from the drop-down:


Mapping options drop-down


Important:
To dynamically connect ShortPoint Design Elements with SharePoint lists, libraries, Outlook etc., please switch to Wireframe Builder mode. It is currently not possible to set up a connection in Visual Builder.


This is how the connected Design Element will look like in Wireframe Builder after you update it:


Connected Design Element: Wireframe Builder, edit mode


Copy & Paste from ShortPoint Live Demos


You can use Copy & Paste feature in Visual Builder and Wireframe Builder.


Step 1: Copy Page from the ShortPoint Demos Website


Visit ShortPoint Demos Website.


Choose the page sample you like and click the Copy button at the top of the Demo Page:


Clicking Copy page in ShortPoint Demos template


Or you can copy any part of the page:


Copying Section from ShortPoint Demos template


Step 2: Paste in the SharePoint Page 

Visual Builder


Enter the EasyPass Active mode of the default Section, click the three dots icon to expand the Other Actions and choose Paste Page option from the drop-down:


Pasting a page in Visual Builder: EasyPass Active Mode and Other actions paste options


Note:
If you copied a Section, and not the whole page, you will need to choose Paste Section option:

Paste Section option


After you pasted the page, you can delete the default Section using the remove button in the EasyPass Active mode:


Removing the default Section from the page


Wireframe Builder


Click the three dots icon and choose Paste Page option from the Other Actions drop-down for the default Section:


Pasting a page in Wireframe Builder: Other actions Paste Page option


Note:
If you copied a Section, and not the whole page, you will need to choose Paste Before Section or Paste After Section option:

Paste Before or After Section options


After you pasted the page, you can delete the default Section using the remove button:


Removing the default Section from the page


That's it. Happy Visual and Wireframe Builder experience!


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 16 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