Linking off of notifications

[Paul]

Hello,

I'm doing some research on behalf of my team and have been looking for documentation that discusses linking functionality from notification pop-ups. This may be an easy thing to do but I am not a programmer (sorry!).  Can anyone confirm that it is possible to embed links in the notifications? 

For example: Worker A completes work that automatically is assigned to Worker B.  When Worker A completes their work the system auto-generates a notification to Worker B letting them know work has been assigned to them.  Worker B can either hit the X to dismiss or click the body of the notification to link them to the application page that requires their attention. 

Any help on this is much appreciated!

Cheers

[Stoyan]

Hi, Paul,
Thank you for your question.

It is indeed possible to embed links in the Notification Widget. You can view this Dojo that showcases the functionality. Please note that for the Notification link page to load successfully in the Dojo you have to toggle Full screen from the button in the top-right.

The above example is achieved by utilizing Kendo Templates and Kendo UI's integrated icons. The following guide recreates the above:

1. define the DOM element that initializes the Notification and the button that triggers it.

       <span id="notification"></span>
       <button class="k-button" style="margin-bottom:5px;" onclick="showInfo()">Click me for notification</button>

2. initialize the Notification and configure its properties

   var notification = notificationElement.kendoNotification({
           width:"150px",
           autoHideAfter:0,
           hideOnClick:false,
   ...

3. configure the templates property of the Notification
   • set the type 'info' of the Notification template
   • set the custom content of the Notification's template
   • a span with the i icon
   • the anchor tag that redirects to another URL
   • the variable containing custom text
   • the x icon that hides the Notification

     templates: [{
               type: "info",
               template: "<div class='info'><span class='k-icon k-i-info' ></span> 
      <a  href='https://google.com'>#= myMessage #</a>
     <span id='close' class='k-icon k-i-close'></span></div>"
             }]
     });

4. define the function that shows the Notification on button click

   function showInfo (){
           nData.info({
             myMessage:"I redirect to Google"
   });   

5. handle the click event of the x icon that hides the Widget

   $(document).on("click", "#close", function(){					
             nData.hide();
   });

6. (optional)style the anchor tag

Hopefully the above fits your requirement.  

Regards,
Stoyan
Progress Telerik