Transforming the Grid Picker

12467

Comments

  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    I have not contributed much to the toolbox recently, but it is great to see what everyone has been doing with it.

    Inspired by a problem raised by @Alex_Marsh, I added two new tags @ToUpperCase and @ToLowerCase

    These are intended to be used with a text prompt and force the input to upper or lower case as the case may be.


  • Jeff_LangJeff_Lang Customer Advanced IT Monkey ✭✭✭
    Found an Issue with the Extra @ShowHideCriteria, which produced more checks that it was trying to merge (but still worked anyway) and also a possible issue where it could have affected the Multiple Criteria on the @AutoComplete and @MultiSelect.

    here's a fixed up file, which also adds 2 more Options to enable better control over criteria.

    @ShowHideORCriteria has been renamed back to @ShowHideCriteriaOR so that it can no longer interfere with the @AutoComplete or @MultiSelect criteria merging.

    Added are an extra @ShowHideCriteria2 and @ShowHideCriteriaOR2, these work the same way as the normal @ShowHideCriteria and @ShowHideCriteriaOR but run as a 2nd pass. The 2 standard ones are processed first, then is there are ones wiht the '2' on the end they will then be processed after, thus allowing for a finer control of how any brackets are placed around the merged criteria.


    As an example, we have some text which needs to display on an offering depending on what has been selected in 2 different dropdowns, using the above we have managed to do this 2 different ways.

    1 - using just @ShowHideCriteria and @ShowHideCriteriaOR

    this merged the criteria as (expanded to read easier hopefully)
    (
    (
    (
    compareString(prompt1.value,'==','d2b5e816-2d24-8e7d-a61f-2cceaeac2664') && compareString(prompt2.value,'==','2f8f0747-b6cb-7996-fd4a-84d09743f218')
    ) ||
    compareString(prompt1.value,'==','81c417fb-ce85-5de0-849f-b5cc9e791bb9')
    )
    && compareString(prompt2.value,'!=','725a4cad-088c-4f55-a845-000db8872e01')
    )

    although this worked (and still does) it does not allow much room to have more complex criteria.

    2 - using a 2 pass method including @ShowHideCriteria and @ShowHideCriteriaOR2 (which will process all the "AND" options first then the "OR" options after, this can be mixed and matched to what is required though).

    the merged code below can easily be expande3d with this 2 pass method to be made to match almost any requirement.
    (
    (
    (
    compareString(prompt1.value,'==','d2b5e816-2d24-8e7d-a61f-2cceaeac2664') && compareString(prompt2.value,'==','2f8f0747-b6cb-7996-fd4a-84d09743f218')
    ) || (
    compareString(prompt1.value,'==','81c417fb-ce85-5de0-849f-b5cc9e791bb9') && compareString(prompt2.value,'==','02625c30-08c6-4181-b2ed-222fa473280e')
    )
    ) || (
    compareString(prompt1.value,'==','81c417fb-ce85-5de0-849f-b5cc9e791bb9') && compareString(prompt2.value,'==','2f8f0747-b6cb-7996-fd4a-84d09743f218')
    )
    )

    I have also tested this adding extra criteria for @AutoComplete and @MultiSelect as well and it does work, but needs to be placed before the @AutoComplete or @MultiSelect to work correctly.

  • Jeff_LangJeff_Lang Customer Advanced IT Monkey ✭✭✭
    forgot to upload the new version :)
    here it is

  • Steve_WrightSteve_Wright Cireson Support Advanced IT Monkey ✭✭✭
    Hi everyone,
    I'm a latecomer to this thread and very excited to see the depth and variety of the contributions. I would love to hear back from people on the ways they have used these tags in the toolbox. Are you able to share examples/questions that you use to highlight these features?
    I would like to showcase the ROToolbox as a great example of how extensible the Cireson product is and how creative our customers are!

    Please post in the discussion or email me directly: [email protected]

    Thanks,
  • Conner_WoodConner_Wood Customer Advanced IT Monkey ✭✭✭
    I admit this is quite innovative, and very creative to use "@variable" in request offerings prompts to get custom controls to be generated.  Though it's too bad there's still no way to put some fields next to each other in the same row, especially for checkboxes, but what is accomplished with this is very impressive.
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    Hi @Conner_Wood ;

    This is why I published the code to the community, so that people can think of things they need on their forms and add new controls to the toolbox to achieve this.

    I have added a new tag @Layout {"template":""}

    This takes the following elements on the form and inserts them into the template defined in the tag. The location of each element is defined by a specific class on the template. Each class must be named tbxCtrl- followed by a number.

    So for example, let's say you want to put four form elements evenly spaced on one row. Your template will look like this:
    <div class='col-md-3 col-xs-12 tbxCtrl-1'></div>
    <div class='col-md-3 col-xs-12
    tbxCtrl-2'></div>
    <div class='col-md-3 col-xs-12 tbxCtrl-3'></div>
    <div class='col-md-3 col-xs-12 tbxCtrl-4'></div>
    You can control how much space is occupied by each element, by changing the bootstrap classes. To make the first element half the width of the form, the template would look like this:
    <div class='col-md-6 col-xs-12 tbxCtrl-1'></div>
    <div class='col-md-2 col-xs-4
    tbxCtrl-2'></div>
    <div class='col-md-2 col-xs-4 tbxCtrl-3'></div>
    <div class='col-md-2 col-xs-4 tbxCtrl-4'></div>
    You are free to add extra HTML markup to this template to change the way the elements are displayed.

    Once you have defined your template, remove the line feeds and replace the < and > symbols, with &lt; and &gt; and add this to your Request Offering as a Display Only prompt.
    @Layout {"template":"&lt;div class='col-md-6 col-xs-12 tbxCtrl-1'&gt;&lt;/div&gt;&lt;div class='col-md-2 col-xs-4 tbxCtrl-2' style='margin-top:30px;'&gt;&lt;/div&gt;&lt;div class='col-md-2 col-xs-4 tbxCtrl-3' style='margin-top:30px;'&gt;&lt;/div&gt;&lt;div class='col-md-2 col-xs-4 tbxCtrl-4' style='margin-top:30px;'&gt;&lt;/div&gt;"}
    [I added some style elements above to improve the alignment of the check boxes in the form.]

    The rendered form will look like this:



  • Conner_WoodConner_Wood Customer Advanced IT Monkey ✭✭✭
    Well that just made my day!
  • Candice_YeudallCandice_Yeudall Customer Advanced IT Monkey ✭✭✭
    Sweet That is VERY Nice!!!
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Wow!  @john_doyle is on a roll!  In all seriousness, this (inclusive of the autocomplete, etc.) is one of several major frustrations we have had for a while, and John has been posting relatively simple solutions to this and others all week.  We are definitely noticing, and definitely appreciate it.

    Obviously, we'd like to see some of these become no-code solutions someday and some of the others that require editing files that are not in the CustomSpace folder really need to be handled by Cireson, but getting something out there to build off of is a HUGE first step!
  • Marek_LefekMarek_Lefek Customer Advanced IT Monkey ✭✭✭
    That's great @john_doyle .

    Maybe there is a possiblity to add @tooptip tag, that will show (i) button, that after hoover will show tooltip. There are feature request in the community (link to feature request 1link to feature request 2)


    Icon can be done as below.
    <span class="icon-class nav-icon-color"><span data-bind="attr: { class: iconClass }, invisible: hasImage" class="fa fa-info-circle" style=""></span></span>Alternative iclon: fa-question-circle
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    Hi @Marek_Lefek ;
    Thanks for the suggestion. I will add this to the list of things to do.
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    It's time for another tool for the box. This one modifies the date time picker controls.

    @DatePicker

    Usage:
    Add a Display Only text prompt to your Request Offering before any Date prompt with this tag. Specify the options as a JSON string following the tag.

    Options:
    • DateOnly : [true | false (default)]
      The date time picker is replaced with a date picker. The control displays the date only. If the UTC option is false or not specified, the form will send back the date with no time.
    • UTC : [true | false (default)]
      The selected date and time is sent back to the server in UTC. This is ideal in situations where you want to schedule something based on the value, or where you wish to store the value in a datetime field on the database.
    • Interval : [integer]
      This value specifies the interval between values in the popup list in minutes. The default value is 15 minutes.
    • Start : ["month" | "year" | "decade" | "century"]
      Specifies the start view of the calendar. For example, when requesting a birth date, it would make sense to open the control with the century as the first view.
    Example:
    @DatePicker {"UTC":true, "Interval":30}
    Returns a date/time in the format yyyy-MM-hhThh:mm:ss.sssZ
    If a user in a time zone UTC+3 picks Dec 3, 2017 18:00, the form will send the selected date as 2017-12-03T15:00:00.000Z

    @DatePicker {"DateOnly":true}
    A date picker will be displayed and the date is returned with no time component.

    If no options are specified, the control works in the same way as the out-of-the-box control. The date and time selected by the user is interpreted as local to the server. This is not suitable if users in different time zones to the server are submitting requests. If you wish to schedule jobs based on the selected time, I recommend that you always set the UTC option to true.

    Note: I had some timing issues with the code while testing, with the portal rendering both the original and new controls. Hopefully that has been rectified.
  • Ryan_Kennedy1Ryan_Kennedy1 Customer IT Monkey ✭
    Awesome - good work. This seems to work well. Is there a way that it can work together with the @DateRange tag as well? So both boxes only show the date, and the earliest date of the second date is restricted to what was chosen in the first date?
  • Ryan_Kennedy1Ryan_Kennedy1 Customer IT Monkey ✭

    I have also found a couple little bugs with the @MultiSelect tool.
    If the @MultiSelect field is not set to Always Show and is only shown with criteria of other fields, when it meets that criteria and appears, the placeholder text is not visible. You have to click into the field and back out of it again for it to appear.

    Also, if you start typing in a @MultiSelect field and click out of it without selecting anything, whatever you have typed is cleared out. This does not happen with the @AutoComplete tool.

    This has all been tried out on v7.4 and 8.2 of the portal

    Just thought I'd let you know if you are keen to try and fix it up. Awesome tool though, good work to everyone who has been working on it :)

  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    Hi @Ryan_Kennedy ;

    I had to make a few changes to make that work.
    1. I changed the order the tags were being parsed. The original date time pickers should be replaced before the date range bindings are made.
    2. The date range tag no longer moves the elements. That should be handled by the Layout tag.
    3. Code was added to handle both Date Time and Date pickers.


  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    To be clear, the RO should have the tags defined in the order:
    @Layout
    @DateRange
    @DatePicker
    Start Date
    @DatePicker
    End Date

  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    @Ryan_Kennedy
    I do need to revisit the MultiSelect and AutoComplete controls. They were the first ones I built and I was very much trial and error in the beginning. Watch this space!
  • Ryan_Kennedy1Ryan_Kennedy1 Customer IT Monkey ✭

    Thanks again John.

    I seem to have found another glitch with it though. I have the layout as mentioned above :

    @Layout
    @DateRange
    @DatePicker
    Start Date
    @DatePicker
    End Date

    But have criteria on End Date that it is only shown if Employment Type is not equal to "On Going"

    It seems to be random with how this works ... If you pick anything other than On Going it generally works first try, but not always. But if you select On Going then change it to another option, the title for End Date appears but not the date picker itself.


  • Ryan_Kennedy1Ryan_Kennedy1 Customer IT Monkey ✭
    Good work @john_doyle , that seems to have fixed it up :)
  • Brian_WinterBrian_Winter Customer Adept IT Monkey ✭✭
    Hi guys,
    So far this toolbox has been a tremendous help.  I had a huge multi-select query that was just ugly in the original form, but now looks elegant with help from the Toolbox.  However, we noticed that the multiselect is showing rows in random order.  How can I sort the rows to make the list ordered instead of hodge-podge (that's coder techno-babble)?

    Thanks again to this dev team!!
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    @Brian_Winter
    @Jeff_Lang fixed the sorting in this release: https://community.cireson.com/discussion/comment/11189/#Comment_11189. The fix is included in @john_doyle's release, which seems to be the newest one here: https://community.cireson.com/discussion/comment/11981/#Comment_11981

    -----------------------------------------------
    @john_doyle:
    [...]
    By the way, updating the versions by attaching to this thread needs to stop. So I will be moving the code onto GitHub. That way, it will be easier to grab the latest version of the toolbox and also track the changes and features.
    Ah, I see you took my suggesting back from May ;) https://community.cireson.com/discussion/comment/8223/#Comment_8223
    [...]
    I don't know if a shared repo would be of interest, to allow the community to contribute even more?
    [...]

    -----------------------------------------------
    @Steve_Wright:
    Apart from of course using the AutoComplete/MultiSelect*, Placeholder and DataRange tags, the way they were designed to be used, which is a great improvement to our ROs and really simplifies and improves UX, I recently used the AddClass tag to add a class called "blocker" to a required text prompt, which is set to be shown with ARO, if a specific item is selected from a dropdown. In custom.css I hide the text prompt with display: none;. This way, when an user selects the specific item, they will not be able to save the RO.

    Concretely, we use this in our hardware repair request, where we do not want users to create a SR, when they select "Tablet". Instead, it shows a help-text, explaining them what to do, and the hidden text prompt is blocking them from saving the RO.

    We don't use any of @Jeff_Lang's cool ShowHide tags yet, but I have a RO in the pipeline, which will greatly benefit from this functionality. I have long wished, that ARO would support multiple conditions, but with these tags, we can construct the ROs this way.

    * Regarding AutoComplete and MultiSelect @john_doyle, I just got to thinking, couldn't we merge them into a single AutoComplete tag and just check whether to make a multiselect or not by checking the ismultiselect attribute, as you do anyways in createMultiSelect? The problem would be backwards compatibility, but we could just leave the MultiSelect tag for now, but still simplify the use.
  • Brian_WinterBrian_Winter Customer Adept IT Monkey ✭✭
    @Konstantin_Slavin-Bo @Jeff_Lang , oddly enough, the first multi-select sorted fine, but the second one wouldn't sort:


    I tweaked the sort attribute, forcing DisplayName:


    and:


    Not liking this solution, but don't know kendo well enough for a proper fix.
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Advanced IT Monkey ✭✭✭
    [...]
    I tweaked the sort attribute, forcing DisplayName:
    [...]
    Not liking this solution, but don't know kendo well enough for a proper fix.
    Actually, forcing DisplayName should not be a problem, as the column is actually named that in preprocessData:
    "DisplayName": append,
    "BaseId": user.BaseId

    I haven't tested any of this, but I think it should fine to do it this way.
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    @Konstantin_Slavin-Bo @Brian_Winter   It looks fine to me also, and I agree we need to rebuild the MultiSelect/AutoComplete control. I will add the Sort fields as well as templates to the properties which are exposed in the control settings in the tag.
  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    Another tool has been added to the RO Toolbox:

    @QueryList

       This tag replaces the data source of a Simple List prompt with a Dashboard query. This allows you to build a list from any data source which could be used as a source for the dashboards.
       The following properties are available:
    • QueryId: (Required) This is the guid of the query saved on the Dashboard Query Settings page in the portal. The simplest way to find this value is to query the DataSource table in the ServiceManagement database.
    • Sort: The name of the field used to sort the data. The data will be sorted in ascending order based on the value in this field.
    • Default: The name of the field which contains a default flag. If one of the rows has a 1 in this field, that row will be used as the default. If this is not set, the code will look for a field called Default in the source.
    • Item: The field containing the content displayed to the user. If not specified the first field in the source data will be used.
    • Value: The field containing the value which will be submitted to the server.
    • ItemTemplate: A template which is applied to the elements in the dropdown list. Note: if you need to include # symbols in the template which are not limiters for the data substitutions then they must be escaped with a double backslash \\. Angle brackets should be passed as &lt; and &gt;
    • ValueTemplate: A template which is applied to the selected item. This is simply for display on the form. It is not saved as the input value.
    Example:
    @QueryList {"QueryId":"e2c1868f-c39d-36d6-6b4b-13e81197691f","Sort":"Ordinal","Default":"Default","ItemTemplate":"&lt;div&gt;#: data.Colour #&lt;/div&gt;&lt;div&gt;&lt;em&gt;#: 
    data.Description #&lt;/em&gt;&lt;/div&gt;","ValueTemplate":"#: data.Colour # - #: data.Description #" }



  • Jeff_LangJeff_Lang Customer Advanced IT Monkey ✭✭✭
    Even more changes/additions, definitely needing the GIT Repository now I think.

    I've included all the changes above, and the following.

    • changed the app.events.unsubscribe to unsubscribe the correct item, this appears to have been left as drawerCreated after the change to subscribing to sessionStorageReady
    • added back the modifications for the 2 pass adding of Criteria, this seems to have been missed in the last ones put up by @john_doyle
    • Forced the previous sorting to sort via "DisplayName" as mentioned by @Brian_Winter
    • Added new "@SingleLineEntry" option, placed before any text entry control, this will stop the control accepting Enter/CR into the field, resulting in a single line entry. (good to force on things like names or other items that should not have multiple lines)
    • added new "AddInformation" entry, which results in either an icon or data added to the right of the next field (detailed below)

    The @AddInformation control can accept 1 of 2 attributes,
    if you wish to show an icon, and when the mouse if hovering over the icon the information entered is added to the page
    to do this you need to pass the data to add to the page via an arg called "icon" eg
    @AddInformation {"icon":"&lt;p&gt;Text or formatting here&lt;br&gt;even multiple lines&lt;/p&gt"}
    if you do not wish the icon, but want the information added to the page always, then pass it as a arg called "info" eg
    @AddInformation {"info":"&lt;p&gt;Text or formatting here&lt;br&gt;even multiple lines&lt;/p&gt"

    here is an example showing both ways of doing this, the first as an icon, the 2nd as info


    here is the icon version with the mouse hovering over the icon


    The icon can be modified via CSS, eg the css that sets it as above (is in the included css file)
    i.AROHoverIcon {
    font-size: 36px;
    color: blue
    }

  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    Hi @Jeff_Lang ;  Thanks, I have added your code to the repository on GitHub

  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    BTW, this is the query I used to test the @QueryList tag:
    SELECT 'Red' [Colour], 1 [Default], 10 [Ordinal], 'A beautiful shade of crimson' [Description]
    UNION
    SELECT 'Green' [Colour], 0 [Default], 20 [Ordinal], 'A cool shade of emerald' [Description]
    UNION
    SELECT 'Blue' [Colour], 0 [Default], 30 [Ordinal], 'A sparkling shade of sapphire' [Description]

    This is what it looks like when rendered:


  • john_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭
    @Jeff_Lang and @Konstantin_Slavin-Bo ;
    Do you have accounts on GitHub? If so, send me a message with your username or email address and I'll add you as collaborators. This invitation is open to anyone else who wishes to contribute to the project.
Sign In or Register to comment.