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
A concrete example would be a request for the creation of shared mailboxes, where the requester should pick their own an email address and display name, but we need to make sure, that neither the username or display name already exists.
Of course we can catch this in a runbook, but that's only after the request is created. So it would improve usability quite a bit, to be able to present the information for the user up-front.
@Jeff_Lang
That's good work, thanks a lot!
+1 for the most recent version, would be very keen to get this in our dev environment to experiment with
Sorry for the long wait, I'm pretty swamped lately. Also, I've been working on trying to get this show/hide functionality to work, as even the simple one, where just the condition on the query prompt is taken into account, was causing trouble. Eventually, after a lot of fiddling, it dawned on me, that the whole approach (adding the
ng-showattribute to the div) is completely wrong. This is because the angular only runs through the code once, at the compilation phase, and any other directive added to DOM after that isn't reachable. Angular attributes are meant to be added in directives and (normally) never injection into DOM. After this realization, I succeeded in adding a new compile step to the ROToolbox, which then forces the browser to rerun the angular compilation phase, such that the show/hide functionality is now fully operational, including the multi-conditions and@ShowHideORmade by @Jeff_Lang. This is not really a good solution / design, but it works (yaay!)TL;DR: It works now, the most-updated version of the toolbox is attached.
New functionality / changes:
sessionStorageReady, as consistently fires later thandrawerCreatedin my env. It seems to help some, but unfortunately it's not sufficient, so added asetTimeout()too with a 2 sec timeout (line 108, if you wanna play around with the timeout time) as a backup.@ShowHideOR: Takes the three conditions from above and OR's them instead of AND'ing, such that simply one of the conditions has to be true, before the autocomplete input is shown. Setting a condition on this tag does not do anything.
Hope this is useful to someone. Again, sorry for the long wait.@ConfirmFields: Converts the next two text prompts to two "confirmation" inputs, where the text entered into them must be the same. Works by adding a dynamic regex-validation to the second text prompt, which is set to match the text in the first. Usage: Tag first, followed by two text prompts. On the second text prompt, add any .Net Regular Expression (e.g..*) and a Custom ToolTip, which will be shown on mismatch.sessionStorageReady, as consistently fires later thandrawerCreatedin my env. It seems to help some, but unfortunately it's not sufficient, so added asetTimeout()too with a 2 sec timeout (line 108, if you wanna play around with the timeout time) as a backup.It may not be the best way to do it, but i ended up adding 2 subscribes, and this seems to have solved our issues with it loading correctly. The start of the code shown below.
app.events.subscribe('drawerCreated',transformRONonIE());<br>app.events.subscribe('drawerCreated',transformROIE);<br><br> function transformRONonIE() { <br> transformRO();<br> }<br> function transformROIE() { <br> transformRO();<br> }<br><br> function transformRO() { <br> app.events.unsubscribe('drawerCreated',transformRONonIE);<br> app.events.unsubscribe('drawerCreated',transformROIE);<br> app.lib.mask.apply();<br><br>we are not using a timeout at all, and since modifying it to the above, it has never failed to modify the page in all our testing on multiple PC's/Setups.I haven't tried @Konstantin_Slavin-Bo modification to use the sessionStorageReady instead of the drawerCreated yet though
I've attached the latest copy of the one we are using, and will be putting into production shortly.
the main changes from the one above are.
1. running 2 app.events.subscribe, as it seemed to work correctly in some browsers without a () on the procedure to call and the rest of the browsers tested required the () on the end of the procedure name to call.
2. added a new variable 'ngshowrecomp' to set if the recompile for the ngshow was required based on which of the subscribes mentioned in 1. were actually used by the browser.
3. added a check using the 'ngshowrecomp' and if there were actually any show/hide criteria to decide if the recompile actually ran or not.
after testing this appears to work correctly in all browsers tested here.
Oh, I completely missed those issues! Apparently IE doesn't support fetching the angular injector - good thinking on putting a var to check on in the non-IE transform, a beautifully simple low-tech approach! I'm trying out your two-function approach (with and without parentheses), and it seems to work (I'm still using the 'sessionStorageReady' event though, as it fires later than 'drawerCreated'). I'll try this on an internal RO we have, so the analysts can test it out. Thanks!
Thanks!
Thank you guys!
@custompickeris now@AutoComplete/@MultiSelect), but here's a quick rundown:The toolbox is used by inserting "tags" as a Display Only Text prompt, right above the prompts you want to manipulate.
@AutoComplete / @MultiSelect / @HideShowOR
@AutoCompleteand@MultiSelectcombines a text prompt and a query result into 1 text prompt, which auto-completes as the user types. So to set it up, you need 1 display only prompt, 1 optional text prompt and a query result, i.e:On the form, '
@AutoComplete' will be hidden, 'Start typing...' will be put into the new field as a placeholder and 'Find a user' will be the heading of the new field.{"minLength":3}after the tag is optional, and will set the minimum of characters entered in the new field, before the searching will begin (for performance sake). If it's not set, it will default to 3.Then, configure the Query Result to e.g. Domain Users, and configure the criteria to what you want the user to search for, e.g. Display Name starts with Set Token > 'Start typing...' (the text field right above):
Select which columns to display and add the CI to the WI in Options.
For
@MultiSelect, you do the same thing:Just remember to select "Allow the user to select multiple objects" in Configure > Options:
By default, you can set conditions on each of the three prompts (the tag, the text prompt and the query prompt), and the new auto-complete box will only show, iff all of those three conditions are met. So here below, the 'Find a user' field will only show, iff the conditions on '
@AutoComplete', 'Start Typing...' and 'Find a user' are all met. If just one of them is not met, the field will not show.This can be changed, by adding the
@ShowHideORtag right below the@AutoComplete/@MultiSelecttag, which in the example above will result in, that 'Select some users' will be shown if any of the conditions set on '@MultiSelect', 'Start typing...' or 'Select some users' are met.So the RO itself will look like this without the ROToolbox (disregarding the conditions for the sake of display):
And after:
Next post, I'll go through
@DateRange,@Placeholder,@AddClassand@ConfirmFields@DateRange
The@DateRangetag is to be put above 2 DateTime prompts, and will make the date selected in the first prompt, the minimum date selectable in the second prompt.As usual, set the tag as a Display Only prompt and right after it, add 2 DateTime prompts.
The RO will look like this without the toolbox:
And like this with the toolbox:
@AddClass
The@AddClasstag simply adds a CSS class, of the specified name, to the following prompt, which then makes it possible to add custom CSS styling to those fields.Note, that
{"cssClass": "someNameHere"}is required for this tag.So if you have a text prompt as the one above, you will get a normal text field on the RO, but you will be able to customize it, by adding
.customCssClasstocustom.css. So without styling, the field will look like:But adding this to
custom.css.customCssClass {<br> font-family: "Comic Sans MS", cursive, sans-serif;<br>}Will result in this:
@ConfirmFields
This tag will convert the following to text prompts to confirm fields, where the text entered in one must match the text entered in the other.On the second field, you will need to configure it to use .Net Regular Expressions, and add any regex (e.g.
.*) and a Custom ToolTip, which will be shown on mismatch.On the RO, the fields will look like normal text fields, but will show the Custom ToolTip, if the text does not match:
@Placeholder
This is probably the simplest tag, which allows you to put a placeholder in the following text field. It will either set the heading of the following field as a placeholder or, if{"text": "some placeholder"}is after the tag, that text will be used as a placeholder, leaving the heading intact, i.e:Result:
Note that the heading of the second text field is converted to a placeholder, and therefore removed as a heading.
I hope these posts clears up how to use the toolbox, and that more people can benefit from it.
There is problem when user do not choose any option in the required field "Find a user" with @AutoComplete option. The popup with text ("This field is required") which field he has to check is not show. I change prompt "Start typing..." into required but it is the same situation. Do you have any idea how fix it.
Oh, right. Somehow we all missed that part. As of now, there's no validation message on neither autocomplete fields (@AutoComplete and @MultiSelect). I've looked a bit on the code, and I'm not sure how we should add this.
The _validationMessage span is added to DOM when a required field is not filled out, and I'm not sure where we can listen to any error events, to show our own error message. Maybe a mutation observer on when the span is added/removed, and then showing/removing our own error message? Does anyone have any suggestions or thoughts?
In other terms: We can successfully show an error, when a required field is not filled out, be we can't hide the message again, when the field then gets filled out. I don't know whether this functionality is something we want or would we then rather be without an error message at all? What do you guys think?
I think that is better to add custom error like "This field is required. Choose an option from list and save form" .
Mayby it is possible to hide the message on page reload or focusin or focusout from field?
Yeah, I agree that an error message is necessary. But I think this toolbox should strive to mimic the default behavior as much as possible. I would rather not have some functionality, than replicating it wrongly, as an inconsistent UX does more harm than good. In my own opinion anyways.
That being said, I got it to work correctly! The error message is now displayed (and hidden) in the same manner as on other fields. I've attached an updated version.
For the technically interested; I found an input element, which gets the attribute 'aria-invalid', so a mutation observer is listening for changes on that attribute, and displays / hides the validation message depending on that. Even though the optimal way would be to listen in on a validation property somewhere on one of the elements, I've been unable to find anything like that, so this seems like the next-best thing.
This is the code added, which I've added right after where the HTML code is added to queryResult (line 356 and 549):
AutoComplete:// Monitor input attribute to display custom error msg<br>var obs = new MutationObserver (function(mutations) { <br> var invalidState = queryResults.find('div[data-control-type="checkboxGridByCriteriaOld"]').find('input#' + targetId).attr("aria-invalid");<br><br> if(typeof invalidState != 'undefined' && $('span#ac' + targetId + '_errorMsg').length < 1) {<br> $('input#ac' + targetId).parent().before('<span class="k-widget k-tooltip k-invalid-msg field-validation-error" id="ac' + targetId + '_errorMsg" role="alert"><span class="k-icon k-warning"></span> This is a required field.</span>');<br> } else if(typeof invalidState == 'undefined' && $('span#ac' + targetId + '_errorMsg').length > 0) {<br> $('span#ac' + targetId + '_errorMsg').remove();<br> }<br>});<br><br>obs.observe(document.querySelectorAll('div[data-control-type="checkboxGridByCriteriaOld"] input[id="' + targetId + '"]')[0], {attributes: true, attributeFilter: ['aria-invalid'], childList: false, characterData: false, subtree:false});MultiSelect:// Monitor input attribute to display custom error msg<br>var obs = new MutationObserver (function(mutations) { <br> var invalidState = queryResults.find('div[data-control-type="checkboxGridByCriteriaOld"]').find('input#' + targetId).attr("aria-invalid");<br><br> if(typeof invalidState != 'undefined' && $('span#ms' + targetId + '_errorMsg').length < 1) {<br> $('ul#ms' + targetId + '_taglist').parent().parent().before('<span class="k-widget k-tooltip k-invalid-msg field-validation-error" id="ms' + targetId + '_errorMsg" role="alert"><span class="k-icon k-warning"></span> This is a required field.</span>');<br> } else if(typeof invalidState == 'undefined' && $('span#ms' + targetId + '_errorMsg').length > 0) {<br> $('span#ms' + targetId + '_errorMsg').remove();<br> }<br>});<br><br>obs.observe(document.querySelectorAll('div[data-control-type="checkboxGridByCriteriaOld"] input[id="' + targetId + '"]')[0], {attributes: true, attributeFilter: ['aria-invalid'], childList: false, characterData: false, subtree:false});No, replacing custom_ROToolbox.js is all it takes. Try resetting your browsers cache (CTRL + F5 while on the page); the old file is probably cached in local storage.
1. Moved the Recompile for Angular Elements to a separate procedure, which can be called from anywhere.
2. removed the browser check for the above to perform or not perform the recompile, and added a browser independent check.
3. as the browser is no longer needed to be known for the above, removed the specific calls and variables for checking if the browser was IE or Not.
4 merged in the modifications for the Required fields above by @Konstantin_Slavin-Bo into the version i have been working on.
5. added 2 New @ options
5.A. @ShowHideCriteria placed before any item (Except for a Query) will allow the criteria put on this entry to be added to the following Item using AND ('&&')
5.B. @ShowHideORCriteria placed before any item (Except for a Query) will allow the criteria put on this entry to be added to the following Item using OR ('||')
NOTE: If using the options described in 5.A. and 5.B. and you are using a Boolean checkbox as the criteria, the criteria will be transformed so that it should work correctly always without having to check and uncheck boxes to set initial values The changes to the criteria treat a Boolean that has not yet been set at all as a false instead of treating it as a separate null value.
I have tested these new criteria options referring to Boolean's and Drop down lists, although as always, make sure you test yourselves before using in production
also modified to use the sessionStorageReady subscribe.
added a sort to the @AutoComplete and @MultiSelect, so they show all items on the drop down list in ascending Order, making it easier to find items without typing extra