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
Did you switch to use ajaxComplete() instead of ajaxStop()? And made sure, that the .unbind below is also changed to ajaxComplete()?
What browser are you using?
It could of course have both functionalities by defining that if the tag includes a string, the title should remain, i.e. @placeholder("this should be the placeholder") or simply @placeholder to use the title as placeholder.
function makePlaceholder()<br>{<br> var that = $(this);<br> that.hide();<br> <br> // Get question div<br> var question = that.next();<br> var placeholder = question.find('label.control-label').text();<br> // Hide title on question<br> question.find('label.control-label').hide();<br> <br> // The text is loosing the space before Required, so we need to insert it<br> placeholder = placeholder.replace('(', ' (');<br><br> var textPrompt = question.find('textarea');<br> // Add placeholder attribute to textarea<br> textPrompt.attr('placeholder', placeholder); <br>}If of course needs to be called in the ajaxComplete event as so:
$("p:contains('@placeholder')").parent().parent().each(makePlaceholder);As with the other controls. it looks for a prompt containing "@placeholder", and then takes the next prompts Title and inserts it as placeholder in the text prompt.
Example with and without placeholder:
I would like to implement the functionality as I described in my last post, allowing one to input @placeholder(something), such that that text would become the placeholder, but I'm not sure, how I would distinguish between a tag with and without text (do you have an idea @john_doyle?).
Ideally, this tag could even be in the title for the specific prompt itself (so not another prompt), but I'm still considering how that could/should be done.
I have been working a little more on the code myself and adding a mechanism for adding properties to the tags, so for example, I want to be able to let the admin define the minLength on the autocomplete control. I do this by adding a JSON object to the tag, like this:
@AutoComplete {"minLength": "3"}
(Note that I decided to change the tag names going forward. Hopefully this will not cause too much distress, but it is easy to change them back in the js file anyway)
Anyway, the code still searches for the tag like this:
if ( !($( "div.custom-item-picker" ).length) ) {
$("p:contains('@AutoComplete')").parent().parent().each(function() {createAutoComplete("@AutoComplete",$(this))});
the createAutoComplete function now takes two arguments:
function createAutoComplete(tag,tagElement)
{
var userDefined = parseOptions(tag,tagElement);
// Hide the out of the box controls
tagElement.hide();
the parseOptions function is like this:
function parseOptions(controlName,control) {
var properties = "{}";
var regExp = /({[^}]+})/;
var matches = regExp.exec(control.text());
if (matches[1]) properties = matches[1];
return JSON.parse(properties);
}
I can then reference the properties set in the JSON string as userDefined.minLength (for example). I do need to do some more work on the tools before posting a new version.
I changed the names of the original tags, so if you have implemented the previous version, you will need to either change the tags on your forms or edit the function which searches for the tags.
Very nice, the toolbox is starting to take form! Thank you for crediting me, although if you continue to do it, could you please use my full name: Konstantin Slavin-Borovskij? The Cireson username is capped at 20 chars. Thanks!
I've edited the
makePlaceholderfunction a bit, as you added the replace linebreak with nothing (line 105); I inserted a space in the replace string, and removed the line replacing "(" with " (", i.e.placeholder = question.find('label.control-label').text().replace(/\n/g, ' ');Also, I've implemented the @ConfirmField I mentioned with a small function:
function confirmFields(tagElement) {<br> tagElement.hide();<br><br> var referencePrompt = tagElement.next().find('textarea');<br> var controlPrompt = tagElement.next().next().find('textarea');<br><br> referencePrompt.blur(function() {<br> var validationValue = referencePrompt.val();<br> controlPrompt.attr("data-validate-value", validationValue);<br> });<br>}It reuses the regex field on the second prompt, to make sure that the two fields match. So the 2nd prompt / "confirm prompt" needs to be to configured to use .Net Regular Expressions with any Regular Expression (e.g..*) and a Custom ToolTip, which will be shown on mismatch.I don't use the
tagargument, but I kepttagElementto try and maintain some consistency, so the function call looks like:$("p:contains('@ConfirmField')").parent().parent().each(function () {<br> confirmFields($(this));<br>});The @ConfirmFIelds tag should be placed right above the first prompt.
btw, I get the same issue whether I'm using IE or Chrome
$(document).ajaxStop(function() {
$(this).unbind('ajaxStop');
This may lead to a long delay before the toolbox kicks in.
Can you try replacing those two lines with this:
$(window).load( function() {
I ended up using (window).load() instead; it can result in a short glimpse of the original fields, but now they are consistently changing to the new one, which is fine for us. It's still a lot better than the crappy OotB fields!
Can you test this? Replace the window.load()...etc. with this:
app.events.subscribe('drawerCreated',transformRO);
function transformRO() {
app.events.unsubscribe('drawerCreated',transformRO);
app.lib.mask.apply();
$("p:contains('@Placeholder')").parent().parent().each(function() {
makePlaceholder("@Placeholder", $(this))
});
if (!($("div.custom-item-picker").length)) {
$("p:contains('@AutoComplete')").parent().parent().each(function() {
createAutoComplete("@AutoComplete", $(this))
});
}
if (!($("div.custom-item-multipicker").length)) {
$("p:contains('@MultiSelect')").parent().parent().each(function() {
createMultiSelect("@MultiSelect", $(this))
});
}
if (!($("div.custom-item-daterange").length)) {
$("p:contains('@DateRange')").parent().parent().each(function() {
createDateRange("@DateRange", $(this))
});
}
$("p:contains('@AddClass')").parent().parent().each(function() {
addCssClass("@AddClass", $(this))
});
app.lib.mask.remove();
}
when setting up conditions to only show the grid views on certain conditions, eg a checkbox ticked, this doesn't translate over to the replacement field.
i have got around this by adding the following at the bottom of the variables at line 207
ar ngshow = targetEle.parent().parent().parent().parent().parent().attr("ng-show");then down around line 251 i have replacedv
if ( ngshow != "undefined") {queryResults.after("<div class='row custom-item-picker ng-hide' ng-show='" + ngshow + "' onhide style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");
} else {
queryResults.after("<div class='row custom-item-picker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");
}
</code> queryResults.after("<div class='row custom-item-picker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");<br></pre>with the following<br><br><pre class="CodeBlock"><code>
with these changed the custom field gets the same show/hide conditions as the grid, allowing the fields to be hidden or shown as the ones they replace are set to
ar ngshow = targetEle.parent().parent().parent().parent().parent().attr("ng-show");</code><code>vand around line 308 replacingqueryResults.after("<div class='row custom-item-multipicker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");<br>withif ( ngshow != "undefined") {
queryResults.after("<div class='row custom-item-multipicker ng-hide' ng-show='" + ngshow + "' onhide style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");
} else {
queryResults.after("<div class='row custom-item-multipicker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");
}
will have it keep the show/hide criteria for it's actual grid view as well
I found that when loading the page initially on IE the page loaded with the transformations, but if F5 was pressed to reload it they would not happen and the grid pickers would show.
i put in the change you had above @john_doyle for the "app.events.subscribe('drawerCreated',transformRO);"
and after replacing the ajax.complete, i found the page did load a LOT faster in IE, and also the grids have not shown up since on over 20 page refresh's, it has only shown the transformed fields as it should.
Ah, that is excellent! And that event is always fires after the RO is loaded? Either way it passes my stress tests, and it seems to work really well. I encountered a strange thing though: The function call in the event subscriptions needs to include the parentheses and in the unsubscription they needs to be excluded, i.e.:
app.events.subscribe('drawerCreated', transformRO<b>()</b>);<br><br>function transformRO() {<br> app.events.unsubscribe('drawerCreated', transformRO);If the parentheses are omitted in the subscribe function, the function is never called. If the parentheses are included in the unsubscribe function, the code just silently fails at that line and never continues. Weird, but it works like that for me.@Jeff_Lang
That's a real good catch, it hadn't crossed my mind at all! Your code works great, you just need to compare values with undefined by comparing to
typeofthe val, i.e:Thanks for sharing!
Hi All,
Any chance that a final version of the code can be uploaded with all of these posted amendments?
Cheers,
Adrian
instead of the
ar ngshow = targetEle.parent().parent().parent().parent().parent().attr("ng-show");</code><code>vas stated above for both, i now havevar ngshow1 = targetEle.parent().parent().parent().parent().parent().attr("ng-show");<br> var ngshow2 = targetEle.parent().parent().parent().parent().parent().prev().attr("ng-show");<br> var ngshow3 = targetEle.parent().parent().parent().parent().parent().prev().prev().attr("ng-show");<br><br>for both the @AutoComplete Section and @MultiSelect sectionand the @autocomplete section i have changed
</code> if ( ngshow != "undefined") {<br> queryResults.after("<div class='row custom-item-picker ng-hide' ng-show='" + ngshow + "' onhide style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");<br> } else {<br> queryResults.after("<div class='row custom-item-picker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");<br> }<br><br></pre>to<br><pre class="CodeBlock"><code> var ngshowprehtml = "<div class='row custom-item-picker' style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> var ngshowsufhtml = "</div></div>";<br> if ( typeof ngshow1 != 'undefined' ) {<br> ngshowprehtml = ngshowprehtml + "<div class='row custom-item-picker ng-hide' ng-show='" + ngshow1 + "' onhide style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> ngshowsufhtml = ngshowsufhtml + "</div></div>";<br> }<br> if ( typeof ngshow2 != 'undefined' ) {<br> ngshowprehtml = ngshowprehtml + "<div class='row custom-item-picker ng-hide' ng-show='" + ngshow2 + "' onhide style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> ngshowsufhtml = ngshowsufhtml + "</div></div>";<br> }<br> if ( typeof ngshow3 != 'undefined' ) {<br> ngshowprehtml = ngshowprehtml + "<div class='row custom-item-picker ng-hide' ng-show='" + ngshow3 + "' onhide style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> ngshowsufhtml = ngshowsufhtml + "</div></div>";<br> }<br> queryResults.after( ngshowprehtml + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' />" + ngshowsufhtml);<br><br>and in the @MultiSelect section i have changed</code> if ( ngshow != "undefined") {<br> queryResults.after("<div class='row custom-item-multipicker ng-hide' ng-show='" + ngshow + "' onhide style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");<br> } else {<br> queryResults.after("<div class='row custom-item-multipicker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");<br> }</pre>to<br><pre class="CodeBlock"><code> var ngshowprehtml = "<div class='row custom-item-picker' style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> var ngshowsufhtml = "</div></div>";<br> if ( typeof ngshow1 != 'undefined' ) {<br> ngshowprehtml = ngshowprehtml + "<div class='row custom-item-picker ng-hide' ng-show='" + ngshow1 + "' onhide style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> ngshowsufhtml = ngshowsufhtml + "</div></div>";<br> }<br> if ( typeof ngshow2 != 'undefined' ) {<br> ngshowprehtml = ngshowprehtml + "<div class='row custom-item-picker ng-hide' ng-show='" + ngshow2 + "' onhide style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> ngshowsufhtml = ngshowsufhtml + "</div></div>";<br> }<br> if ( typeof ngshow3 != 'undefined' ) {<br> ngshowprehtml = ngshowprehtml + "<div class='row custom-item-picker ng-hide' ng-show='" + ngshow3 + "' onhide style='margin-bottom:15px;'><div class='col-md-12 col-xs-12'>";<br> ngshowsufhtml = ngshowsufhtml + "</div></div>";<br> }<br> queryResults.after( ngshowprehtml + controlLabel + "<select id='ms" + targetId + "' style='width: 50%;' />" + ngshowsufhtml);<br><br>with these changes, all 3 items, as in the @AutoComplete/@MultiSelect Display Only Prompts, AND the Optional Text field, AND the Query results prompts, can all have different Show/Hide Criteria.This allows up to 3 show/hide criteria to be used to show/hide the transformed control.
so I've coded for an extra option that should be placed after the @AutoComplete or @MultiSelect in the ARO, which will allow using the same 3 criteria as above, but either as a "AND" between them or an "OR" between them. By default it will use "AND" for the Criteria, but this can be changed to an "OR" by adding a display only field called "@ShowHideOR" just after the @AutoComplete or @MultiSelect.
for this to work the following needs to be added/changed.
Add 2 extra Procedures.
// add additional attribute "ngshowhide" to input for query results prompt<br>// when set this changes the default action for combining multiple<br>// Show/Hide Criteria from "AND" to "OR"<br>function makeShowHideOR(tag, tagElement) {<br> tagElement.hide();<br> var userInput = tagElement.next();<br> var queryResults = userInput.next();<br> var targetEle = queryResults.find('div[data-control="checkboxGridByCriteriaOld"]');<br> $(targetEle).attr("ngshowhide", "or");<br> tagElement.remove();<br>}<br><br>// combine Show/Hide criteria for @AutoComplete and @MultiSelect Controls<br>function createngshow(ngshow, ngshowcriteria, ngshowhide) {<br> if (ngshow =="") { return ngshowcriteria }<br> ngshow = ngshow + ngshowhide + ngshowcriteria;<br> return ngshow;<br>}<br>in the transformRO procedure add the following ABOVE the @autocomplete check$("p:contains('@ShowHideOR')").parent().parent().each(function() {<br> makeShowHideOR("@ShowHideOR", $(this))<br> });<br>Replace the ngshow1,2,3 variables in both the @AutoComplete and @MultiSelect with// set vars for preset Show/Hide Criteria<br> var ngshowhide = targetEle.attr("ngshowhide");<br> var ngshow1 = targetEle.parent().parent().parent().parent().parent().attr("ng-show");<br> var ngshow2 = targetEle.parent().parent().parent().parent().parent().prev().attr("ng-show");<br> var ngshow3 = targetEle.parent().parent().parent().parent().parent().prev().prev().attr("ng-show");<br>In the @AutoComplete procedure, replace everything between// Add the HTML template for the AutoComplete control.
and
// Process the data returned from the server and may the display columns into one string.
with
// set either "AND" or "OR" for multiple Show/Hide Criteria<br> if (ngshowhide == "or") {<br> ngshowhide = "||";<br> } else {<br> ngshowhide = "&&";<br> }<br> // combine preset Show/Hide Criteria<br> var ngshow = "";<br> if (typeof ngshow1 != 'undefined') { ngshow = createngshow(ngshow, ngshow1, ngshowhide) }<br> if (typeof ngshow2 != 'undefined') { ngshow = createngshow(ngshow, ngshow2, ngshowhide) }<br> if (typeof ngshow3 != 'undefined') { ngshow = createngshow(ngshow, ngshow3, ngshowhide) }<br> // Add the HTML template for the AutoComplete control, along with Combined Show/Hide Criteria if set<br> if (ngshow.indexOf("&&") != -1 || ngshow.indexOf("||") != -1) {<br> ngshow = "(" + ngshow + ")";<br> queryResults.after("<div class='row custom-item-picker ng-hide' ng-show='" + ngshow + "' onhide style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");<br> } else {<br> queryResults.after("<div class='row custom-item-picker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<input id='ac" + targetId + "' style='width: 100%;' /></div></div>");<br> }<br><br> // Process the data returned from the server and may the display columns into one string.<br>In the @MultiSelect procedure, replace everything between// Add the HTML template for the AutoComplete control.
and
// Process the data returned from the server and may the display columns into one string.
with
// set either "AND" or "OR" for multiple Show/Hide Criteria<br> if (ngshowhide == "or") {<br> ngshowhide = "||";<br> } else {<br> ngshowhide = "&&";<br> }<br> // combine preset Show/Hide Criteria<br> var ngshow = "";<br> if (typeof ngshow1 != 'undefined') { ngshow = createngshow(ngshow, ngshow1, ngshowhide) }<br> if (typeof ngshow2 != 'undefined') { ngshow = createngshow(ngshow, ngshow2, ngshowhide) }<br> if (typeof ngshow3 != 'undefined') { ngshow = createngshow(ngshow, ngshow3, ngshowhide) }<br> // Add the HTML template for the @MultiSelect control, along with Combined Show/Hide Criteria if set<br> if (ngshow.indexOf("&&") != -1 || ngshow.indexOf("||") != -1) {<br> ngshow = "(" + ngshow + ")";<br> queryResults.after("<div class='row custom-item-multipicker ng-hide' ng-show='" + ngshow + "' onhide style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");<br> } else {<br> queryResults.after("<div class='row custom-item-multipicker' style='margin-bottom:15px;'><div class='col-md-6 col-xs-12'>" + controlLabel + "<select id='ms" + targetId + "' style='width: 100%;' /></div></div>");<br> }<br> <br> // Process the data returned from the server and map the display columns into one string.<br>Now we have the option for up to 3 sets of criteria, using a "AND" as default, and if setting the @ShowHideOR then it will use "OR" instead.