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


This article is for you if:

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

TABLE OF CONTENTS


General

Design Elements cannot be placed outside the Section


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


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

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:



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




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



  • In Visual Builder:

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



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:


  • In Visual Builder:


Adding new Design Elements


Visual Builder


Use the plus button to insert new Design Elements inside the Column:



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




Wireframe Builder


Use the plus button to open the Page Builder modal and insert new Design Elements inside the Column:



Copying/duplicating existing Design Elements


Visual Builder


  • Option 1: Right click


Right click on the Design Element and choose the options from the drop down:



  • Option 2: EasyPass Active mode


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



Wireframe Builder


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



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



Once the Design Element is copied, you may paste it using right click or the three dots icon to open the options, and then choose the paste option: 



There are 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


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



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:



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



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:



Or you can copy any part of the page:



Step 2: Paste in SharePoint Page 

Visual Builder


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



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


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



Wireframe Builder


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



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


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



Related articles: