Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.

DISCLAIMER

All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Active Work Items badges on menu items

Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
As a new customer to Cireson one feature I missed is the ability to get a quick overview of the amount of work that is currently ongoing.

I solved this by using the API to get Work Items per "category" and added as badges to the corresponding menu item:



There is an timer which update the badges every 60 seconds through API calls.

As the API only allows to get an array with the filtered workitems the next thing would be to actually create notifications like the Tier Watcher app from the Essentials stream. The logic would be something like "if an items last modified is newer than now - 60 seconds" which would indicate that there is a change since last check.

I've attached the needed files in a zip archive.
«1

Comments

  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    Hi @Martin_Blomgren, any chance you'd be willing to share the code for your service catalog page design? Love the layout! And many thanks for the work item badges, this is excellent!!
  • Tom_HendricksTom_Hendricks Customer Advanced IT Monkey ✭✭✭
    Just adding to what @Jonathan_Boles said, the badges are great!  It was simple to implement and to extend (e.g., if your work views are in a submenu, show an aggregate badge at the top level).  I wish I would have thought of this one! :)
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    edited November 2016
    Slick work @Martin_Blomgren !
  • Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
    @Jonathan_Boles, the design is currently a work in progress by me as we are currently not using Service Manager in production. The code consists of less/css, custom js and a custom Incident form at the moment but are far from ready.

    Not even sure if we are going to use one of the three supplied options for the service catalog later on as none seems to fit us. Just started playing with Cireson a week ago but hopefully it should be possible to build something from Cireson API that suits our needs but due to our deadline for deployment this will have to wait until after we started using the product.

    I believe in sharing (and stealing with pride!) so if you'd like I can upload the wip code for you to use as a boilerplate if you don't want to wait for a more finished design. Please note that there are still a lot of misaligned elements and stuff like that, which the screenshot doesn't show :smile:
  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    Hey @Martin_Blomgren, sure I'd love to see what you've got so far and tinker with it if you don't mind - we've been discussing some eventual design changes in our environment and this would give a little kickstart :)
  • Leigh_KildayLeigh_Kilday Member Ninja IT Monkey ✭✭✭✭
    @Martin_Blomgren are you a part-time carpenter? As you appear to be nailing this.

    Comment of the month?

    @Martin_Blomgren this is amazing. These are features I didn't know I needed.

    Cireson, please make this OOTB!
  • David_WellsDavid_Wells Customer IT Monkey ✭
    @shaun_ericson , I think I know who your next hire should be ;)
  • Adam_DzyackyAdam_Dzyacky Customer Contributor Monkey ✭✭✭✭✭
    edited December 2016
    As an example from @Martin_Blomgren's code -

      //My Work
      $.getJSON('/api/V3/WorkItem/GetGridWorkItemsByUser',
      {
      "userId": session.user.Id,
      "isScoped": false,
      "showActivities": true,
      "showInactiveItems": false
      },


    After a quick read through I'm wondering (i.e. someone validate me please) if this could be made a bit more dynamic instead of passing a hardcoded bool into those queries, it could instead look something like -


    function getShowActivitiesValue(url){

    //get the value of the checkbox at that URL
    //if the value is true/false, return that result from this function as the sole output

    return result
    }


      //My Work
      var url = "/views/cca5abda-6803-4833-accd-d59a43e2d2cf"
      $.getJSON('/api/V3/WorkItem/GetGridWorkItemsByUser',
      {
      "userId": session.user.Id,
      "isScoped": false,
      "showActivities": getShowActivitiesValue(url),
      "showInactiveItems": getShowInactiveItemsValue(url) 
      },

    In this way, the user sees a count that is reflective of the option they've actually chosen on those respective pages. This also would simply fall into place/simply compliment @seth_coussens original example of checking the box by default as seen here.

    I'm a bit rusty on my java, so I'm still putting together the whole "retrieve a value from a checkbox from another page" bit currently. But wouldn't be the least bit saddened if someone beat me to it. Ugh, I've clearly been spoiled by PowerShell...
  • Mark_WahlertMark_Wahlert Customer Advanced IT Monkey ✭✭✭
    @Martin_Blomgren  Please share the portal layout and CSS theme and you have my Monkey of the Month votes...all of them. ;)
  • james_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    edited December 2016
    This is an awesome thread, great stuff. Add each of these as feature request and if the community agrees we will get them added, OOTB!
  • Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
    @Jonathan_Boles , @Mark_Wahlert , I have attached the css/js but please remember that this is a work in progress and there are misaligned elements.

    For the moment the design for the work items forms is a total rip off from @Morten_Meisler's blogpost at http://blog.coretech.dk/mme/customization-tips-to-the-cireson-portal/ (great inspiration!) with some extra tweaks on the massive textarea for description and a first try at including end-user & analyst comments inline.

    The Service Catalog is as shown on the screenshots where is use js to always expand the navigation and count service offerings on each category.

  • james_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    @Martin_Blomgren well done again. Just FYI we have abstracted the use of local storage via Store JS for cross browser compatibility reasons and you can make use of it in the global js space via the store object.

    store.get(....
  • Geoff_RossGeoff_Ross Cireson Consultant Super IT Monkey ✭✭✭✭✭
    Guys, these examples are off the scale of awesome. Very nice.
    Anything you are willing to share in the Community Uploads section would be fantastic.
  • Chris_JordanChris_Jordan Customer IT Monkey ✭
    Hey guys,

    Is there any way to add the count to custom promoted views?

    Running in trouble with calling the API



    Cheersm
  • Steve_ClarkeSteve_Clarke Customer Adept IT Monkey ✭✭
    Love the badges @Martin_Blomgren. Well done :)
  • Tom_HendricksTom_Hendricks Customer Advanced IT Monkey ✭✭✭
    @Martin_Blomgren, I have implemented the badges (awesome work!) and early feedback from UAT is very positive.  I also extended it to work on the Watch List in 7.2, which was very easy to do, following your pattern.

    @Adrian_Paech 's implementation of the VIP notice is humbling to me, since I merely populated the ExtraProps below the user's name.  This is great--keep pushing us all (and thanks to @James_Kleinschnitz for suggesting that Cireson is part of "all") to keep improving on the user experience!

    Also, the Related Articles notification not only looks great, but also frees up some valuable screen real estate, and could also make it more feasible to include more hits in the results.

    Now for the challenge/healthy skepticism:  how do these look on mobile devices?  Do the notifications simply hide on small screens (thinking phones more than tablets here), or is there an alternate format for them there?
  • Raffael_JenzerRaffael_Jenzer Customer IT Monkey ✭
    @Martin_Blomgren
    Your latest screen shows the "Mouseover" feature etc... it is not integrated in your zip-File (earlier in this thread). Do you are able to upload your actual custom-Files (including this Feature)?


  • Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
    @Tom_Hendricks
    The design on mobile devices would be the easy part where you could use a dropdown menu with badges (mockup):

    BUT as this is web based it actually requires the user to have the device both unlocked and the browser open for the client side javascript to be running xhr request to check for new workitems. This is not in any way optimal and the best would be to actually utilize Cireson API and write a platform dedicated app using a web view and push notifications, not something I'm currently investigating though.

    @Raffael_Jenzer
    The custom workitem preview (mouseover) feature is still missing some small parts depending on which workitem type you are hovering on. Due to holidays, recently a father of 2 and limited time as I've focused on a custom angular based service catalog homepage with shop functionality (to better match our internal processes) all other custom work is paused.

    Of course when it is finished I will start a new thread and upload it. As will be done with the notifications and the custom service catalog/shop app!
  • Raffael_JenzerRaffael_Jenzer Customer IT Monkey ✭
    @Martin_Blomgren
    Thanks for your answer! I'm looking forward to get your upload. :-) And about "father of 2"... i'm in the same boat as a father of 3 (8 and 10 years and 2,5 months...). 
  • TENA_ROCA_DiegoTENA_ROCA_Diego Customer IT Monkey ✭
    @Jonathan_Boles, just have to clean up some in the code first. Currently working on the webbased  "Tier Watcher" notifications I mentioned in the OP and during development I suck at comments and well structured modular code :smile:

    A small teaser on the notifications which during badge count check every 60 seconds also check if there are any "My Work" items with a last modified time newer than then last time it checked:


    Just love how customizable Cireson is and would really like to see more API endpoints!


    Love the implementation of badges and popups.
    Any progress on this? I would also love to see the badges only count new items, any chance to implement that?

    Thanks very much!
  • Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
    @TENA_ROCA_Diego

    With the available API endoints doing this Tier Watcher notifications is quite performance degrading, it works but I need to both rewrite the code given my recent experience with Cireson customizations and try to optimize performance. Some of my customizations are analyst or end user driven and developed during work hours and others are my own ideas done during my spare time which for the moment is quite limited and in this case it's the latter. This is something I really believe would improve the situation for analysts working in the portal so I will continue work as soon as possible.

    It's possible to modify the badges to only count new/untouched items but will not pursue this for the moment as I'm pleased with the way it works now. Maybe in the future I can make it as an option but I encourage you to upvote my feature request and add this feature as an option to it!
  • Raffael_JenzerRaffael_Jenzer Customer IT Monkey ✭
    Hi @Martin_Blomgren, it would be really nice to get the "mouseover" feature. :-) We've implemented your customizations and our users are excited. Thanks so far! Can you paste the code for the mouseover feature? Thanks in advance,
    Raffael

  • TENA_ROCA_DiegoTENA_ROCA_Diego Customer IT Monkey ✭
    @Martin_Blomgren  thanks for explanation, makes sense. Already voted for the feature request. Crossing fingers! :)
  • Martin_BlomgrenMartin_Blomgren Customer Advanced IT Monkey ✭✭✭
    @Raffael_Jenzer
    Need to make some small changes to the mouseover work item preview code before I upload. As this is spare time stuff depending on my kids mood it could be tomorrow or take another week :smile: . Anyhow you guys are great at testing and finding all obscure things that we hardly use so there's no need for us to even have an test/staging process :wink:
«1
Sign In or Register to comment.