Home Community Uploads
image

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.

Pulsating Save button in drawer taskbar

Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
One complaint I hear from end users is that the location of the save button is not intuitive and is very easy to miss.

To solve this I made a small custom solution where the save button, on all  pages where present, is highlighted in a subtle way by pulsating.
 

I've attached the files needed in a zip archive. To install just drop the files in CustomSpace (merge custom.js if you have other stuff there already!)

Comments

  • Brad_McKennaBrad_McKenna Customer Advanced IT Monkey ✭✭✭
    Very nice, as always.
  • Brett_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    Very nice @Martin_Blomgren Thank you so much for sharing your code and idea.
    It's a great way to draw the eye to what is required.

    Maybe you should raise this as a feature request to be included in the base product. (I know I'd vote for it)
  • Leigh_KildayLeigh_Kilday Member Ninja IT Monkey ✭✭✭✭
    Very nice @Martin_Blomgren Thank you so much for sharing your code and idea.
    It's a great way to draw the eye to what is required.

    Maybe you should raise this as a feature request to be included in the base product. (I know I'd vote for it)

    +1. Another great idea!
  • Adam_DzyackyAdam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭
    edited January 2017
    Full-time carpenter now. :)
  • David_DarlingDavid_Darling Customer IT Monkey ✭

    Not having any luck getting this working -- we are also on v7.1.


    We've even tried implementing it with no custom.css or anything else in custom.js... still no luck.


    We love this idea so hoping we can get it working -- anyone else having any difficulty?

  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @Adam_Dzyacky
    As an IT professional in a small organization you have to wear many hats :)

    @David_Darling
    Could it be a caching problem, have you tried open a new in-private/incognito window? Are there any error messages in the console if you open up developer tools (F12)? Which browsers have you tested with?
  • David_DarlingDavid_Darling Customer IT Monkey ✭

    Looks like both Firefox and IE reporting a syntax error on this line:


    sheet.insertRule(selector + "{" + keyFrame.join('') + "}", sheet.cssRules.length);

  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    edited January 2017
    @David_Darling
    You are correct there is a problem in all browsers but Chrome. This was a quick hack and I should probably have tested it in all browsers before being so quick to upload (probably why I've only done backend earlier :)) .

    However it's easily fixed by escaping the @ sign in the keyframes! Escaped the % sign just to be sure as it's commonly used for encoding strings.
    addKeyframes("\@keyframes pulsate", {<br>&nbsp;&nbsp;&nbsp;&nbsp;"0\%": { "background-color": pulseColor, "color": "#fff" },<br>&nbsp;&nbsp;&nbsp;&nbsp;"50\%": { "background-color": "transparent", "color": "#33909a" },<br>&nbsp;&nbsp;&nbsp;&nbsp;"100\%": { "background-color": pulseColor, "color": "#fff" }<br>});


    Or download the fixed version attached, tested with IE11, Chrome 55, Firefix 45 and Edge (text is flickering, seems as others having this problem with animations as well).
  • Daran_StokesDaran_Stokes Customer IT Monkey ✭

    Good Work Martin.

    Love it!

  • Rob_RadabaughRob_Radabaugh Customer IT Monkey ✭
    Anyone have any luck implementing this in Portal 8.1? Had it working in 7.x but no longer working since upgrade
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Never touched it and it just continues to work.  Running 8.1.1
  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭
    edited June 2018
    Anyone having this working in Edge? It works fine in IE and Chrome... (I'm using version 0.2)
    Current Portal Version: 8.6.2.2016
    Management Pack Version: 7.7.2016.185 

    Edited: It works buts flickers instead of fading in and out as in Chrome and IE
  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭
    I ended up deleting the text color changing so only the background changes. 

    &nbsp;&nbsp;&nbsp; addKeyframes("\@keyframes pulsate", {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "0\%": { "background-color": pulseColor},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "50\%": { "background-color": "transparent"},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "100\%": { "background-color": pulseColor}<br>&nbsp;&nbsp;&nbsp; });

  • Ben_GillionBen_Gillion Customer IT Monkey ✭

    Hi all, during some testing of some changes we were making to the portal layout, it was pointed out to me that the save button was not immediately obvious, so I stumbled across this script. 

    Thank you, Martin.

    I thought it would be good to also make the 'Next' button in Advanced request Offerings pulse too and only pulse the save button when the next button is deactivated, so I've updated the script (attached).

    It is quite possible (probable) that there is a more elegant way to do this. If anyone has any suggestions, I'm all ears.

    Hopefully someone will find this useful.

    Thanks,

    Ben


  • Ben_GillionBen_Gillion Customer IT Monkey ✭

    I've created a new discussion for the modifications to the original code here: https://community.cireson.com/discussion/5848/pulsating-save-next-aro-button-in-drawer-taskbar

Sign In or Register to comment.