IT Monkey will place code here as examples of what Cireson's consulting team has to offer as well as examples for public consumption to benefit the Microsoft System Center community as a whole.
DISCLAIMER
All files and projects located here come as is and without any warranty or support. We will attempt to improve the projects as time goes on based on customer and community demand. Comments and improvements are welcome as well as customization requests. Your use of these Cireson Uploads is subject to our Terms of Use.
Cireson's support team has no information on these projects outside of what you have available and will not provide support for these enhancements, extensions, and scripts.
Dont forget to checkout solutions uploaded by our customers, partners and community members here.
Comments
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.
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)
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.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.
here it is
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: steve.wright@cireson.com
Thanks,
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:
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 < and > and add this to your Request Offering as a Display Only prompt.
<br>[I added some style elements above to improve the alignment of the check boxes in the form.]The rendered form will look like this:
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!
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 1, link to feature request 2)
Icon can be done as below.
<div><span class="icon-class nav-icon-color"><span data-bind="attr: { class: iconClass }, invisible: hasImage" class="fa fa-info-circle" style=""></span></span></div><div>Alternative iclon: fa-question-circle</div>Thanks for the suggestion. I will add this to the list of things to do.
@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:
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.
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.
This value specifies the interval between values in the popup list in minutes. The default value is 15 minutes.
- Start : ["month" | "year" | "decade" | "century"]
Example: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.
@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.
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
I had to make a few changes to make that work.
@Layout
@DateRange
@DatePicker
Start Date
@DatePicker
End Date
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!
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.
I found what was causing the glitch. Attaching a new version.
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.
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!!
@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:
Ah, I see you took my suggesting back from May
-----------------------------------------------
@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
ismultiselectattribute, as you do anyways increateMultiSelect? The problem would be backwards compatibility, but we could just leave the MultiSelect tag for now, but still simplify the use.I tweaked the sort attribute, forcing DisplayName:
and:
Not liking this solution, but don't know kendo well enough for a proper fix.
preprocessData:I haven't tested any of this, but I think it should fine to do it this way.
@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:
- 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:I've included all the changes above, and the following.
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":"<p>Text or formatting here<br>even multiple lines</p>"}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":"<p>Text or formatting here<br>even multiple lines</p>"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 {<br> font-size: 36px;<br> color: blue<br>}<br>This is what it looks like when rendered:
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.