Create a text carousel using the Announcements table.

[Carlos Petrucio]

GitHub Project 

Carousel Announcements

📜 This widget creates a carousel in the service portal that displays messages created in announcements.

💡 Use announcements to broadcast messages to Service Portal users.
💡 Announcements are active on new instances.
💡 You can activate the Service Portal Announcements plugin.
💡 When creating announcements, you can define the way an announcement displays.

You must know how to create a new widget.

https://docs.servicenow.com/bundle/rome-servicenow-platform/page/build/service-portal/task/create-new-widget.html

You must know what Announcements is and how it works.

https://docs.servicenow.com/bundle/rome-servicenow-platform/page/build/service-portal/concept/announcements.html

You should know how to create a new message in Announcements.

https://docs.servicenow.com/bundle/rome-servicenow-platform/page/build/service-portal/task/create-announcement.html

🛠️ Widget Carousel was built with

Applications and Frameworks that I used to create the project.

• ServiceNow - ServiceNow with instance in Quebec version.
• BootStrap - Framework for developing interface and front-end components with version v5.1.3.
• Angular - JavaScript FrameWork with version 1.5.3.

🔧 Installation

GitHub Project 

🥳 Creating the first "Announcement"

GitHub Project 

⚠️ How to add the widget to the portal

GitHub Project 

⚠️ Important

GitHub Project 

✍️ Created by

Carlos Petrucio

☕ You have a project and you need help, let's have some coffee 🥳

    

⬆ Back to the Top

[Jon Timmermann]

Hi Carlos,

This is great! Couple questions, is there a way to remove the blank slide on the widget? When the service portal loads the widget loads blank, before switching to the first slide after 5 seconds, and after it runs through all announcements it goes back to this blank slide.

Also, is there an area in the code to only display a custom announcement type?

[Carlos Petrucio]

Hi Jon, I hope you're well,

Yes, I left a blank item active just to facilitate testing during installation.

In the github of the project you can find in the folder "Instance files" the file "HTML Template.html".

You must change from line 3 to line 8 where the items are defined.

You can create this logic of displaying only one type of advertisement based on the annoucement type or create new types in the annoucement table.

You should use the server script for this, creating a specific filter based on the type, for example, currently the script is:

You can change it by adding a query of the type you need.

Regards,

Carlos Petrucio

[MArcin_bla]

Hi Carlos,

I have a problem with this widget, after removing the blank slide and having more than 1 announcement, it's not showing more than 1 slide.

But after adding the 2nd and 3rd slide in a script, after loading the page, it's showing all 3 announcements one under another as the first slide. But after clicking the next slide, it works ok.

[Carlos Petrucio]

Hello Marcin_bla , I hope you are well...
If you still haven't solved your problem, please share your html code so I can help.

[MArcin_bla]

Hello Carlos,

Below is the html body from the widget.

All other things are same like before, not changes.

  <div ng-if="::(c.totalAnnouncements > 0)" id="carousel-example-generic" class="carousel slide auto" data-ride="carousel" ng-init="c.onload()">
    <div  class="carousel-inner" role="listbox">
    
      <div class="item active" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
         <h4 ng-if="::a.summary" ng-bind="::a.summary" class="texto-alinhar text-center"></h4>
      </div>

       
      <div class="item" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
         <h4 ng-if="::a.summary" ng-bind="::a.summary" class="texto-alinhar text-center"></h4>
      </div>
        
      <div class="item" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
         <h4 ng-if="::a.summary" ng-bind="::a.summary" class="texto-alinhar text-center"></h4>
      </div>
      
      <div class="item" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
         <h4 ng-if="::a.summary" ng-bind="::a.summary" class="texto-alinhar text-center"></h4>
      </div>
        <!-- to add further slides, copy below -->
      <!-- element to copy:

		<div class="item" ng-repeat="a in c.announcements" ng-init="::(cssId = 'announcement-' + a.id + '-' + c.wid)">
         <h4 ng-if="::a.summary" ng-bind="::a.summary" class="texto-alinhar text-center"></h4>
      	</div>

		-->
    </div>
    <!-- Start Controls -->
    <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left black seta-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right black seta-rigth" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a><!-- End Controls -->
</div>