How to Set Visibility in ShortPoint Code Editor

The free ShortPoint Code Editor Web Part lets you control which devices display or hide the elements you have added on your Modern SharePoint page. This article will show you how to use this feature.

TABLE OF CONTENTS

• Prerequisites
• Quick Walkthrough
• Step-by-step Tutorial
  • Step 1: Add custom elements to your page
  • Step 2: Enable Visibility
  • Step 3: Hide the custom element for specific devices
  • Step 4: Hit Republish

Prerequisites

• ShortPoint Code Editor Web Part must be installed on your SharePoint site. For installation instructions, read our article on How to Install ShortPoint Code Editor in SharePoint.
• You have the proper SharePoint permissions to edit the target Modern SharePoint page.

Quick Walkthrough

1. Add your custom code to the ShortPoint Code Editor Web Part.
2. Enable the Visibility toggle.
3. Select which devices (desktop, tablet, or mobile) should display or hide the content.
4. Republish your page to save the changes.

Step-by-step Tutorial

Follow these steps to control element visibility in the ShortPoint Code Editor Web Part:

Step 1: Add custom elements to your page

First, add the ShortPoint Code Editor Web Part to your page and insert the code snippet for your desired custom elements. For detailed instructions, refer to our article on How to Add Custom Code Using the ShortPoint Code Editor Web Part.

Step 2: Enable Visibility

Navigate to the Code Editor's settings section and enable the Visibility option. This will display the three device toggles.

Step 3: Hide the custom element for specific devices

You can hide the custom elements on desktop computers, tablets, or mobile devices. Simply toggle the switch for any device where you want to restrict visibility.

Step 4: Hit Republish

Click Republish to apply your changes.

That's it! You can now flexibly control how your custom elements display across different devices using the ShortPoint Code Editor Web Part.

Related articles:

• Getting Started With ShortPoint Code Editor Web Part
• ShortPoint Code Editor Web Part: List of Resources
• How to Add Custom Code Using the ShortPoint Code Editor Web Part