Tasknotification-Popup anzeigen lassen

K2 bietet zwar viele Möglichkeiten, sich die eigenen offenen Tasks anzeigen zu lassen – ob das nun der Workspace ist, die K2-Mobile App oder eine View/Form mit dem Worklist-Control.

Ich wollte jedoch eine einfache, leicht zu implementierende Möglichkeit, an beliebigen Stellen auf offene Aufgaben hinweisen zu können – am besten mit einem Popup, das mehr oder weniger dezent auf die offenen Aufgaben hinweist.

Mein Lösungsansatz hierzu ist ein kleines Script, welches mit einem Ajax-Aufruf die K2-Workflow-Api aufruft um festzustellen ob offene Aufgaben vorhanden sind. Sollten offene Aufgaben vorhanden sein, soll sich ein kleines Hinweisfenster öffnen, das die Anzahl der Aufgaben anzeigt und auf Klick zu eine beliebige Worklist aufruft (das könnte der Workspace sein, eine eigene Worklist oder was auch immer)

Zur Anzeige der des Hinweises habe ich mich der Lösung notifyjs bedient: https://notifyjs.jpillora.com/

Für den Aufruf des Scriptes muss dieses lediglich an ein Literal DataLabel gebunden werden (nicht vergessen die Option „Prevent XSS“ zu deaktivieren)

Ich habe den Scriptblock in eine Environment-Variable des K2-Frameworks gespeichert. Damit kann der Scriptblock zentral verändert werden und kann auf einer View oder Smartform ganz einfach über eine Expression an ein DataLabel Control gebunden werden.

Anbei das Script:

<script src="/runtime/script/notify/notify.min.js"></script> 
<style>
.notifyjs-k2tasknotification-base {
  width: 300px;
  min-height:100px;
  padding: 10px;
  border-radius: 10px;
  border:solid 1px #384893;
  background-image:url(/runtime/styles/images/icons/k2-icon-k.png);
  background-repeat: no-repeat;
  background-position: 95% 10px; 
  background-color: #4E85D7;
}

.notifyjs-k2tasknotification-base .title {
  width: 100px;
  font-weight:bold;
  color:#fff;
  font-size:1.5em;
  margin-bottom:20px;
  
}

.notifyjs-k2tasknotification-base .mesg
{
  margin-top:3px;
  margin-bottom:5px;
  color:#fff;
  font-size:1.3em;
}

.notifyjs-k2tasknotification-base button {
  font-size: 1.1em;
  margin-top:10px;
  padding: 5px;
  width: 100%;
}
</style>

<script>
$(document).ready(function() {
   
   try 
   {
     $.ajax({
      url: "/k2services/REST.svc/Worklist/Items?piDataField=false&actXmlField=false",
      method: "GET",
      contentType: "application/json; charset=utf-8",
      dataType: "JSON",
      async: true,
      beforeSend: function(XMLHttpRequest) {
       XMLHttpRequest.setRequestHeader("Accept", "application/json");
      },
      crossDomain: false,
      error: onError, //handle Error
      success: function (data)
      {
      	var c = data.length;
      	
      	if(c > 0 )
      	{
        	
        
        $.notify.addStyle('k2tasknotification', {
          html: "<div>" +
              "<div class='title' data-notify-html='title'/>" +
              "<div class='mesg' data-notify-html='text'/>" +
              "<button onclick='_not_gotoWorklist()'>Aufgabenliste aufrufen</button>" +
            "</div>"
        });

        $.notify({
          title:'HINWEIS:',
          text:'Sie haben aktuell ' + c + ' offene Aufgabe(n)',
          button:'Confirm'},
          {
          style:'k2tasknotification',
          autoHide:true,
          autoHideDelay: 10000,
          globalPosition: 'bottom right',
          clickToHide: false});
                
                
      }
    }	
  })
  } catch(err) { alert(err.message); }
});
  
  
  function onError(sender, args)
  {
    return;
  }

  function _not_gotoWorklist()
  {
    window.open('/Runtime/Runtime/Form/GLOBAL.Worklist.Form/?isdialog=false');
  }
</script>

In diesem Fall wird per Mausklick auf eine eigene Worklistform verwiesen.

Kurz zusammen gefasst:

• notifyjs runterladen und auf dem K2-Server ablegen
• ein DataLabel auf einer View oder Smartform platzieren
• die Eigenschaft Literal des DataLabel Controls auswählen
• die Eigenschaft Prevent XSS des DataLabel Controls abwählen
• den Scripblock an das DataLabel binden
• ggf. die Werte im Scrip den eigenen Vorstellungen anpassen
• fertig …

Anbei noch das Icon, welches ich bei der Anzeige des Popups verwende:

---

Bild von 11066063 auf Pixabay