I Have multi select pick list which work fine however it now contains around 70 options to select from with around 12 categories - I have searched around the internet to find a solution that could make the list a little more user friendly.
It would be perfect if I was able to have the pick list with the 12 categories and on select of them they cascade in to their sub options. However the tricky part is this has to be done from within the same field.
Has anyone had a similar request or know of anyway to make this possible?
Thank You
here is the code for the multi select pick list I have currently:
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
<script src="sc_json2.js" type="text/javascript"></script>
<meta charset="utf-8"></head>
<body style="margin: 0px; border: 0px currentColor; font-family: Segoe UI; font-size: 11px; background-color: rgb(246, 248, 250);" onload="onload()">
<div id="MultiSelectField"></div>
<script type="text/javascript">
var FORM_TYPE_CREATE = 1;
var FORM_TYPE_UPDATE = 2;
var FORM_TYPE_READ_ONLY = 3;
var FORM_TYPE_DISABLED = 4;
var FORM_TYPE_QUICK_CREATE = 5;
var FORM_TYPE_BULK_EDIT = 6;
var var_sc_optionset;
var var_sc_optionsetvalue;
var options;
var checkedValues;
var isDirty = false;
var html = "";
function onload() {
var formType = parent.Xrm.Page.ui.getFormType();
if (formType == FORM_TYPE_BULK_EDIT) {
displayMessage();
}
else {
init();
}
}
function init() {
getParameters();
getOptionSetValues();
getCheckedValues();
convertToMultiSelect();
}
function displayMessage() {
MultiSelectField.innerHTML = "This field cannot be displayed or edited in this form mode.";
}
function getParameters() {
var querystring = unescape(window.location.search.replace('?', '').replace('data=', ''));
var params = querystring.split(',');
for (var i = 0; i < params.length; i++) {
if (i == 0) {
var_sc_optionset = params[i];
}
else if (i == 1) {
var_sc_optionsetvalue = params[i];
}
}
}
//populate option-set values and integers
function getOptionSetValues() {
options = parent.Xrm.Page.getAttribute(var_sc_optionset).getOptions();
}
function getCheckedValues() {
var dirtyCheckedOptions = parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).getValue();
if (dirtyCheckedOptions != null) {
checkedValues = dirtyCheckedOptions.split(';');
}
else {
checkedValues = '';
}
}
//Method to convert an optionset to multi select Option Set
function convertToMultiSelect() {
for (var i = 0; i < options.length - 1; i++) {
var pOption = options[i];
if (!isChecked(pOption.text))
html += "<input type='checkbox' class='multiselect_cb' onclick='makeDirty()' style='border:none; width:25px; align:left;' title='" + pOption.text + "'/>";
else
html += "<input type='checkbox' class='multiselect_cb' checked='checked' onclick='makeDirty()' style='border:none; width:25px; align:left;' title='" + pOption.text + "'/>";
html += "<label>" + pOption.text + "</label>";
if (i != options.length - 2) {
html += "<br/>"; //it's a 'br' flag
}
}
MultiSelectField.innerHTML = html;
}
function makeDirty() {
isDirty = true;
}
function isChecked(ptext) {
for (var i = 0; i < checkedValues.length; i++) {
if (checkedValues[i] == ptext)
return true;
}
return false;
}
function saveMultiSelect() {
if (isDirty) {
var divElement = document.getElementById("MultiSelectField");
var result = '';
for (var i = 0; i < divElement.childNodes.length; i++) {
if (divElement.childNodes[i].type == "checkbox" && divElement.childNodes[i].checked) {
result += divElement.childNodes[i].title + ";";
}
}
//clear out the previous results from the field
parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue("");
//populate var_sc_optionsetvalue with the checked values
parent.Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue(result);
isDirty = false;
}
}
</script>
</body></html>
Related
I am trying to compare the elements inside my unordered list to the value in the input textbox. If the value in the input text box matches a word in the unordered list I want to do something with that word in the unordered list.
Here is my JavaScript code:
function CheckWordMatch() {
var wordList = document.getElementById("wordSearchTable");
var wordListLi = wordList.getElementsByTagName("li");
var inputBoxText = document.getElementById("pickedLetters");
for (var i = 0; i < wordListLi.length; i++) {
if (inputBoxText.value === wordListLi[i].value) {
wordArray.style.textDecoration = "line-through";
console.log("IT WORKS");
}
}
}
#wordSearchTable is the ID of the unordered list.
#pickedLetters is the ID of the input text box.
Here is the entire javascript code and html code:
var allCells;
var found = false;
window.onload = init;
function init() {
document.querySelectorAll("aside h1")[0].innerHTML = wordSearchTitle;
document.getElementById("wordTable").innerHTML = drawWordSearch(letterGrid, wordGrid);
document.getElementById("wordList").innerHTML = showList(wordArray);
allCells = document.querySelectorAll("table#wordSearchTable td");
for (var i = 0; i < allCells.length; i++) {
allCells[i].addEventListener("mousedown", highlightLetters)
allCells[i].style.cursor = "pointer";
allCells[i].addEventListener("mouseup", removeMouseDown)
}
document.getElementById("pickedLetters").addEventListener('keyup', CheckWordMatch);
//document.getElementById("wordTable").addEventListener("mouseup", CheckWordMatch);
console.log("Hello");
}
/*============================================================*/
function drawWordSearch(letters, words) {
var rowSize = letters.length;
var colSize = letters[0].length;
var htmlCode = "<table id='wordSearchTable'>";
htmlCode += "<caption>Word Search</caption>";
for (var i = 0; i < rowSize; i++) {
htmlCode += "<tr>";
for (var j = 0; j < colSize; j++) {
if (words[i][j] == " ") {
htmlCode += "<td>";
} else {
htmlCode += "<td class='wordCell'>";
}
htmlCode += letters[i][j];
htmlCode += "</td>";
}
htmlCode += "</tr>";
}
htmlCode += "</table>";
return htmlCode;
}
function showList(list) {
var htmlCode = "<ul id='wordSearchList'>";
for (var i = 0; i < list.length; i++) {
htmlCode += "<li>" + list[i] + "</li>";
}
htmlCode += "</ul>";
return htmlCode;
}
function removeMouseDown(e) {
for (var i = 0; i < allCells.length; i++) {
allCells[i].removeEventListener("mouseenter", highlightLetters2)
}
CheckWordMatch();
}
function highlightLetters2(e) {
var inputBoxValue = document.getElementById("pickedLetters");
e.target.style.backgroundColor = "pink";
inputBoxValue.value = inputBoxValue.value + e.target.textContent;
for (var i = 0; i < allCells.length; i++) {
allCells[i].addEventListener("mouseup", removeMouseDown)
}
}
function highlightLetters(e) {
var inputBoxValue = document.getElementById("pickedLetters");
e.target.style.backgroundColor = "pink";
inputBoxValue.value = e.target.textContent;
for (var i = 0; i < allCells.length; i++) {
allCells[i].addEventListener("mouseenter", highlightLetters2)
}
}
function CheckWordMatch(event) {
var inputBoxText = event.target.value;
var wordList = document.getElementById("wordSearchTable");
var wordListLi = wordList.getElementsByTagName("li");
var inputBoxText = document.getElementById("pickedLetters");
for (var i = 0; i < wordListLi.length; i++) {
if (inputBoxText.value === wordListLi[i].textContent) {
wordArray.style.textDecoration = "line-through";
console.log("IT WORKS");
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Word Search</title>
<meta charset="utf-8" />
<link href="p2-layout.css" rel="stylesheet" />
<script src="p2-makeTable.js" async></script>
<script src="p2-wordSearch.js" async></script>
</head>
<body>
<section id="main">
<header><br></header>
<article>
<figure id="wordTable"></figure>
<input type="button" value="Show Solution" id="showSolution" />
</article>
<aside>
<h1 id="wordSearchTitle"></h1>
<input type="text" id="pickedLetters" readonly />
<figure id="wordList"></figure>
</aside>
</section>
</body>
</html>
First you'll need to attach an event listener to the input element #pickedLetters. I used keyup in this example but feel free to pick what suits your use-case best.
document.getElementById("pickedLetters").addEventListener('keyup', CheckWordMatch);
I also fixed some of your sample code. See below with comments:
function CheckWordMatch(event) {
// get the value of the target which is the value of the input element.
var inputBoxText = event.target.value;
var wordList = document.getElementById("wordSearchTable");
var wordListLi = wordList.getElementsByTagName("li");
for (var i = 0; i < wordListLi.length; i++) {
// since you want to compare the value of the input
// element with the value (or text) of the li element,
//you should use textContent or innerText.
if (inputBoxText === wordListLi[i].textContent) {
wordListLi[i].style.textDecoration = "line-through";
console.log("IT WORKS");
}
}
}
// attach an event listener to the input element to trigger your function.
document.getElementById("pickedLetters").addEventListener('keyup', CheckWordMatch);
I am coding an adventure game and have a primitive sortInventory() function. It cycles through the player.inventory array and displays each item in its own <div>. I want to surround the entire completed 'inventory' with a <div class="inv"> - here are the functions:
function sortInventory() {
var rowCount = 0;
var firstRowDone = false;
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
dock.innerHTML += "<br>"
}
if(rowCount == 5 && firstRowDone) {
dock.innerHTML += "<br>"
rowCount = 0;
}
dock.innerHTML += "<div class='inv-item'><img class='inv-img' src='" + player.inventory[i].img + "'></img></div>";
}
}
function showInventory() {
dock.innerHTML = "<div class='inv'>";
sortInventory();
dock.innerHTML += "</div>"
}
This currently outputs:
<div class="inv"></div>
<div class="inv-item">..</div>
<div class="inv-item">..</div>
<!-- and so on -->
But I would like it to output:
<div class="inv">
<div class="inv-item">..</div>
<div class="inv-item">..</div>
<!-- and so on -->
</div>
How could I get it to achieve this and why does it close the tag early? Thanks in advance.
Instead of trying to write it in pieces, store it in a variable and write it all at once.
function sortInventory() {
var rowCount = 0;
var invList = '';
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
dock.innerHTML += "<br>"
}
if(rowCount == 5 && firstRowDone) {
dock.innerHTML += "<br>"
rowCount = 0;
}
invList += "<div class='inv-item'><img class='inv-img' src='" + player.inventory[i].img + "'></img></div>";
}
return invList;
}
function showInventory() {
dock.innerHTML = "<div class='inv'>" + sortInventory() + "</div>";
}
This is happening because an open tag cannot live within the DOM without a close tag, with few exceptions like <br /> which is still valid as <br >, so most browsers will try to compensate for this and write the close tag for you.
In short, writing incrementally into the innerHTML tag is always a bad idea and will lead to unexpected results as most all browsers will try to correct it.
Using innerHTML can be cumbersome, not to mention (at times) dangerous. Instead, I would use the document.createElement and Node.appendChild methods.
function sortInventory() {
var rowCount = 0;
var inv = document.createElement('div');
inv.classList.add('inv');
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
inv.appendChild(document.createElement('br'));
}
if(rowCount == 5 && firstRowDone) {
inv.appendChild(document.createElement('br'));
rowCount = 0;
}
var invItem = document.createElement('div');
invItem.classList.add('inv-item');
var invImg = document.createElement('img');
invImg.classList.add('inv-img');
invImg.setAttribute('src', player.inventory[i].img);
invItem.appendChild(invImg);
inv.appendChild(invItem);
}
dock.appendChild(inv);
}
function showInventory() {
sortInventory();
}
I think it closes the tag prematurely because the value received by .innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string. With constructed nodes, it means (in this case) if there is any unclosed tag, it will close it first (so it is a constructed node).
So in order to solve this, first build the string, and finally use the innerHTML in order to set the built value.
Following your logic, it would be something like this:
var newHtml = "";
function sortInventory() {
var rowCount = 0;
for(var i = 0; i < player.inventory.length; i++) {
rowCount++;
if(rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
newHtml += "<br>"
}
if(rowCount == 5 && firstRowDone) {
newHtml += "<br>"
rowCount = 0;
}
newHtml += "<div class='inv-item'><img class='inv-img' src='" + player.inventory[i].img + "'></img></div>";
}
}
function showInventory() {
newHtml = "<div class='inv'>";
sortInventory();
newHtml += "</div>"
dock.innerHTML = newHtml;
}
In order to create a wrapper element with the class .inv around the elements with .inv-item classes, construct the HTML content at a string in the sortInventory function, then return as the content to use, when setting the dock element's innerHTML:
var boxIcon = 'https://image.flaticon.com/icons/svg/122/122186.svg';
var player = {
inventory: [
{img: boxIcon},
{img: boxIcon},
{img: boxIcon}
]
};
var dock = document.getElementById('dock');
function sortInventory(inv) {
var rowCount = 0;
var content = ''
for (var i = 0; i < player.inventory.length; i++) {
rowCount++;
if (rowCount == 6 && firstRowDone == false) {
firstRowDone = true;
rowCount = 0;
content += "<br>"
}
if (rowCount == 5 && firstRowDone) {
content += "<br>"
rowCount = 0;
}
content += "<div class='inv-item'><img class='inv-img' width='32px' src='" + player.inventory[i].img + "'></img></div>";
}
return content;
}
function showInventory() {
dock.innerHTML = "<div class='inv'>" + sortInventory() + "</div>";
}
showInventory();
.inv {
background: #CCC;
}
<div id="dock"></div>
Credits to Flaticon
You could first create the item with the class "inv" and then get it by class name with document.getElementByClassName("inv") and then add with a forloop document.getElementByClassName("inv").innerHtml += <div class="inv-item">..<div>
Construct the HTML string completely then assign to innerHTML of the div, instead of assigning innerHTML 3 times.
Change sortInventory function to return string, append all the string and assign it as innerHTML at once.
The code below is for listing blogger posts within a Label Name, if the post has the specific Label Name it will be shown in this list. I would like to be able to change the appearance of how everything is displayed by changing where the post image would look, and where the title would look, change background color, add borders, shadows change the font etc ...(I know how to change the appearance with css, but I do not know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.
var startIndex = 1;
var maxResults = 5;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "https://levon-ltr.blogspot.com//feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div>
<ul id="postList12"></ul>
</div>
This creates stuff you can style with CSS. For example:
#postList12 li {
border: 1px solid blue;
}
Use the inspector in your browser to see what it makes. If you want to change the order of elements or add new ones you’ll have to edit the script to do that.
I have this working code below to input a number/tme in textbox. This code below is functioning well but I want to set my textbox value into 00:00 and edit my function code like the second jsfiddle however my edited code is not going well as my idea. In my second jsfiddle I want to input a time of 05:30 but the code is replacing any number that input by a user from the textbox 0
function MaskedTextboxDPSDeparture() {
var myMask = "__:__";
var myCorrectionOut2 = document.getElementById("Departure");
var myText = "";
var myNumbers = [];
var myOutPut = ""
var theLastPos = 1;
myText = myCorrectionOut2.value;
//get numbers
for (var i = 0; i < myText.length; i++) {
if (!isNaN(myText.charAt(i)) && myText.charAt(i) != " ") {
myNumbers.push(myText.charAt(i));
}
}
//write over mask
for (var j = 0; j < myMask.length; j++) {
if (myMask.charAt(j) == "_") { //replace "_" by a number
if (myNumbers.length == 0)
myOutPut = myOutPut + myMask.charAt(j);
else {
myOutPut = myOutPut + myNumbers.shift();
theLastPos = j + 1; //set current position
}
} else {
myOutPut = myOutPut + myMask.charAt(j);
}
}
document.getElementById("Departure").value = myOutPut;
document.getElementById("Departure").setSelectionRange(theLastPos, theLastPos);
}
document.getElementById("Departure").onkeyup = MaskedTextboxDPSDeparture;
HTML
< input id="Departure" type="text" style="width: 35px; text-align: center" value="__:__" />
JSFIDDLE
JSFIDDLE 2
Any suggestion will accepted. Thanks.
Actually I'm trying to count the number of User Stories and its associated QA Task (TaskType) for each projects based upon Release and Iteration filter. I'm able to achieve it using SDK 1.32., but Release and Iteration dropdown are not working properly in IE browser.
also please let me know whether it's advisable to upgrade current SDK version to 2.0 or is there any workaround to resolve it.
Thanks in advance
Script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="Name" content="Project Board" />
<script type="text/javascript" src="/apps/1.32/sdk.js">
</script>
<script type="text/javascript">
function ReleaseDependencies() {
var rallyDataSource;
var cardBoard;
var releaseDropdown;
var table;
var header;
var task_count = 0;
var data = new Array();
var taskData = new Array();
var iterDropdown;
function buildHeaders() {
var tableConfig = {
sortingEnabled: false,
columnKeys: [
'module', 'totstories', 'totcompleted', 'totinprogress',
'totqa', 'totblocked'
],
columnHeaders: [
'MODULE', 'STORIES', 'COMPLETED', 'IN-PROGRESS', 'QA TASKS', 'BLOCKED'
],
columnWidths: ['16%', '16%', '16%', '16%', '16%', '16%']
};
table = new rally.sdk.ui.Table(tableConfig);
}
function destroyTables() {
if (table) {
table.destroy();
}
}
function onReleaseSelected(releases, eventArgs) {
if (iterDropdown) {
iterDropdown.destroy();
destroyTables();
}
var queryConfig = {
label: "Select Iteration "
};
iterDropdown = new rally.sdk.ui.IterationDropdown(queryConfig, rallyDataSource);
iterDropdown.display(document.getElementById("releaseDiv2"), onIterationSelected);
releaseDropdown.addEventListener("onChange", display);
}
function onIterationSelected(releases, eventArgs) {
if (table) {
table.destroy();
}
var queryConfig = {};
findProjects();
iterDropdown.addEventListener("onLoad", findProjects);
iterDropdown.addEventListener("onChange", findProjects);
}
this.display = function() {
destroyTables();
rallyDataSource = new rally.sdk.data.RallyDataSource('1283334',
'2013244650',
'false',
'true');
rally.sdk.ui.AppHeader.showPageTools(true);
releaseDropdown = new rally.sdk.ui.ReleaseDropdown({}, rallyDataSource);
releaseDropdown.display(document.getElementById("releaseDiv"), onReleaseSelected);
};
function findProjects() {
buildHeaders();
var targetReleaseName = releaseDropdown.getSelectedName();
var relCond = '(Release.Name = "_REL_TARGET_")'.replace('_REL_TARGET_', targetReleaseName);
var targetIterationName = iterDropdown.getSelectedName();
var iterCond = '(Iteration.Name = "_ITER_TARGET_")'.replace('_ITER_TARGET_', targetIterationName);
var storyCriteria = '(' + relCond + ' AND ' + iterCond + ')';
rallyDataSource.find({
key: "stories",
type: "hierarchicalrequirement",
query: storyCriteria,
fetch: 'FormattedID,Name,Project,Parent,ScheduleState,Tasks,TaskType'
}, onProjectsRetrieved);
}
function onProjectsRetrieved(results) {
var rowCount = 0;
var proCount = 0;
var proName;
var stateCount = 0;
var progCount = 0;
var n;
var fields;
var fieldLength = 0;
var queryConfigs;
var task_count = 0;
var blocked = 0;
for (var j = 0; j < results.stories.length; j++) {
var abc = results.stories[j].Project.Name;
data.push(abc);
data.sort();
}
data = unique(data);
for (var i = 0; i < data.length; i++) {
table.setCell(rowCount, 'module', data[i]);
var pr = data[i];
rally.forEach(results.stories, function(proj) {
story = proj;
if (proj.Project.Name == pr) {
proCount++;
n = n + proj.Name + "~";
fields = n.split('~');
fieldLength = fields.length - 1;
proName = proj.Project.Name
if (proj.ScheduleState == "Completed") {
stateCount++;
} else if (proj.ScheduleState == "In-Progress") {
progCount++;
}
if (proj.blocked == true) {
blocked++;
}
for (var q = 0; q < story.Tasks.length; q++) {
if (story.Tasks.length > 0) { //if(pr == story.Tasks[q].Project.Name)
if (story.Tasks[q].TaskType == "QA") {
task_count++;
break;
}
}
}
}
});
table.setCell(rowCount, 'totstories', fieldLength);
table.setCell(rowCount, 'totcompleted', stateCount);
table.setCell(rowCount, 'totinprogress', progCount);
table.setCell(rowCount, 'totqa', task_count);
table.setCell(rowCount, 'totblocked', blocked);
rowCount++;
proCount = 0;
stateCount = 0;
progCount = 0;
fieldLength = 0;
task_count = 0;
n = null;
if (blocked > 0) {
blocked = 0;
}
}
table.display(document.getElementById('projects'));
}
var unique = function(origArr) {
var newArr = [],
origLen = origArr.length,
found,
x, y;
for (x = 0; x < origLen; x++) {
found = undefined;
for (y = 0; y < newArr.length; y++) {
if (origArr[x] === newArr[y]) {
found = true;
break;
}
}
if (!found) newArr.push(origArr[x]);
}
return newArr;
}
} //rally.addOnLoad(onLoad);
</script>
<style type="text/css">
#header {
margin-bottom: -22px;
}
</style>
<script type="text/javascript">
function onLoad() {
var releaseDependencies = new ReleaseDependencies();
releaseDependencies.display();
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div id="releaseDiv">
</div>
<div id="releaseDiv2">
</div>
<br/>
<br/>
<div id="projects">
</div>
</body>
</html>
App SDK 1 is based on dojo 1.6, which officially supported IE 6, 7 and 8. App SDK 1 has been deprecated for some time in favor of App SDK 2.0. If you can upgrade that would be the ideal solution. Otherwise, if you can give some more insight into what exactly is not working correctly and what specific IE version you're having trouble with maybe a workaround can be found.