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.

Download: Improve UI on Request Offering Grid Picker

Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭
edited September 2016 in Community Uploads

All,

We use the Grid picker within RO's all the time, and many of these pickers enable the end-user to make multiple selections. Personally I'm not a big fan of the OOB grid picker for Request Offerings, as the picker provides no feedback to the end-user when they make a selection, and this creates much confusion... hence the following feature request.
https://community.cireson.com/discussion/1101/improve-user-interface-for-ro-query-results-object-picker#latest
I encourage you to add your vote :).

In the meantime, I have written the custom.js / custom.css customisation attached to help people out who are in a similar dilemma. This code is mixed in with Joivan Hedrick's code to "alphabetise" the grid data, as both of these two customisations complement each other. Note: this code has only been tested in Cireson v6.x of the portal browsing with IE11.

As you can see from the pic below, as you change your selection in the grid picker, it dynamically updates the selection list just below the picker. Works for both multi-picker and single-picker query result grids.

 

Note: I did have problems retrieving all of the selected items via grid.select(), as it only ever returned one result. So to get around this I had to create a separate array for tracking selected items. I'm sure this code could be improved, and I welcome any tips from others :)

Hope this helps a few people out.

Cheers,

Adrian

Comments

  • Joe_BurrowsJoe_Burrows Cireson Devops Super IT Monkey ✭✭✭✭✭
    Look good Adrian, Great work :)
  • Tony_CollettTony_Collett Cireson Support Super IT Monkey ✭✭✭✭✭
    That's great! So glad that we're gradually improving the Query Results field, as it's such a powerful tool.
  • Conner_WoodConner_Wood Customer Ninja IT Monkey ✭✭✭✭
    I will have to test this in Chrome and IE11, this is undoubtedly an intuitive graphical improvement I require.
  • Will_HendersonWill_Henderson Customer IT Monkey ✭
    Sensational! the query picker is not intuitive for our users and anything to make it more user friendly is welcomed!
  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    Hope it helps you guys! Let me know if you have any issues with it.

    Adrian

  • IT MonkeyIT Monkey O.G.
    Thanks for Sharing this! Moving to the new "Community Uploads" Category for better viability and to help anyone else learn :)
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Fantastic bit of code. Dramatically enhances the CI selection experience. Great stuff!
  • Marc-Andre_LafleurMarc-Andre_Lafleur Customer Adept IT Monkey ✭✭
    edited February 2017
    Thank you, this is amazing!

    I had a problem where on IE only, your code would not run if I clicked on a Request Offering from the portal home page but only when I refreshed the RO page. It would work normally on Edge and Chrome.

    I changed the first line from
    $(window).load(function () {
    to
    $(document).ready(function() {
    and it now works on every browser no matter how the page is loaded.


  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    Thanks for the tip. Glad it helps  :)

    Adrian

  • Nick_FlintNick_Flint Customer Advanced IT Monkey ✭✭✭
    This is great! I have tested it in IE 11, Google Chrome 56 and Safari on iOS. The Selected box is displayed in IE and Chrome but not Safari. 
  • Nick_FlintNick_Flint Customer Advanced IT Monkey ✭✭✭
    Any chance of adding an "X" to each of the selected boxes to remove that user from the selection?
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Is there a way of excluding the selection box from 'Display Only' query items?
  • AUG__PRIEN_BauunternAUG__PRIEN_Bauuntern Customer IT Monkey ✭
    Great Work Adrian. But in my environment he shows me the grid picker among themselves. Can you help me?



  • Amarjit_DhillonAmarjit_Dhillon Customer Adept IT Monkey ✭✭
    edited August 2017
    Nice one, this is great!

    I did change the below and the script now runs every time:

    $(window).load(function () {
    to
    $(document).ready(function() {
  • Alan_FosterAlan_Foster Customer Adept IT Monkey ✭✭
    Adrian_Paech. I am using your script and it is awesome.  In my ARO I added the query results to multiple map in the Description field (list of software selected), it displays with no spaces and comma separated on one line.  Would there be a way to make the gridselectsummary from you script display in the description field.

  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Has anyone noticed that this doesn't allow forms to render on iOS?
  • Nick_FlintNick_Flint Customer Advanced IT Monkey ✭✭✭
    I've noticed that our request offerings aren't available on iOS but haven't spent any time to track it down yet. 
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    I believe this to be the cause, render fine when this is disabled
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    edited March 2018
    I've managed to workaround it by excluding safari from the script with the following
    var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    Hopefully a longer term solution can be found to this issue.

    It also only seems to be an issue with newer versions of the portal. It seems to not exist pre v8 based on our customer feedback.
  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    Anyone else have trouble with this since upgrading to 8.9.X?
    stopped working for me.
  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    I am running this on v8.9.3.2016 production and lab v9.0beta in lab. Control is working properly in both environments.
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Like Brian, 8.9.4.2016 / 9.0beta, no issues in either, and none in earlier versions.  Perhaps something is conflicting in your environment (i.e. other custom code)?
  • Magnus_Lundgren1Magnus_Lundgren1 Customer Adept IT Monkey ✭✭
    I did what @Amarjit_Dhillon suggested in above post and now it loads!
  • Peter_MiklianPeter_Miklian Customer Advanced IT Monkey ✭✭✭
    Check out new feature in portal v9.1.0 - Request Offering Query Picker which may replace this community solution: https://support.cireson.com/KnowledgeBase/View/2453#/
Sign In or Register to comment.