Slide-in Row enhancement

The Slide-in Row enhancement gives a widget within a page row a slide-in effect with additional styling when the page loads, allowing you to share important information with your members.

The Slide In Enhancement in use on a page.

If your digital workplace already has this enhancement, you can find configuration steps on your Styles page.

Sections in this article:

Considerations

  • Enhancement use: You should use this enhancement only temporarily and sparingly to present critical information to your users.
  • Load More: Try to include only one widget, such as a Blog Articles widget or Wiki Articles widget, that displays a single article within the page row. If a blog channel contains more than one article, the Load More button will appear and cannot be hidden.

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add the enhancement code to the header

Warning 

Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.

Add the following code to the header of your digital workplace:

<!-- Slide-in Row enhancement begins -->
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/slide-in-alert/slidein.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/slide-in-alert/slidein.css" /> 
<!-- Slide-in Row enhancement ends -->

Configure the enhancement

You can apply the Slide-in Row enhancement to any page row.

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Select the </> icon in the top-right corner of a row.
  4. Add the class slidein alert, and select Done. See Applying custom CSS to page rows for more information.
  5. At the bottom of the page, select Publish Page. 

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used. If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and --> after the middle lines and save the changes to the header. 

Turn the enhancement off

To turn the enhancement off, you can remove the code entirely or add <!-- before and --> after the middle two lines, as shown below, and save the changes to the header. 

<!-- Slide-in Row enhancement begins -->
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/slide-in-alert/slidein.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/slide-in-alert/slidein.css" /> 
<!-- Slide-in Row enhancement ends -->

Changes to:

<!-- Slide-in Row enhancement begins -->
<!-- <script src="https://igloo-prod.azureedge.net/cmedia/enhancements/slide-in-alert/slidein.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/slide-in-alert/slidein.css" />  -->
<!-- Slide-in Row enhancement ends -->

Use the enhancement

Members can view the widget with the slide-in effect applied when visiting the page.