Ansammlung nützlicher Funktionen welche oftmals im Einsatz sind. Die Funktionen sind größtenteils so gehalten, dass sie bei anderen Kunden ohne viel Aufwand verwendet werden können.
Achtung: jQuery wird dringend benötigt!!
TODO
<!--
select Users By Group
-->
<select name="BELIEBIG" id="BELIEBIG" group="TIM Gruppe" class="BELIEBIG"> </select>
<!--
populateSelectFromCSV
-->
<select id="BELIEBIG" csvFile= "/loom-portal/custom/test/Ressources/test.csv" csvCols="SpalteA;SpalteB" name="BELIEBIG" class="form-control"></select>
<!--
checkValidInput
-->
<input type="text" name="BELIEBIG" id="BELIEBIG" regex="^d*$" message="Hier steht die Meldung die ausgegeben wird sollte die Regex false sein"/>
var head = document.getElementsByTagName("head")[0];
var customUrl = "/loom-portal/custom/BELIEBIGERORDNER/";
scriptTag = document.createElement('script');
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", customUrl + "smartformHelper.js");
head.appendChild(scriptTag);
(function($, scope){
var helper = gadget.functions.initFormularFunctions.bind(scope)();
/*
Beispiele Funktionsaufrufe:
*/
//setValue
helper.setValue("ID","WERT");
//getValue
var value = helper.getValue("ID");
//ajaxCall
helper.ajaxCall(Type, URL, dataType, contentType, callback);
//stringContains
var bool = helper.stringContains("SUCHWERT", "SUCHMENGE");
var bool2 = helper.stringContains("SUCHWERT", ["ARRAY","AUS","STRINGS","DAS","DURCHSUCHT","WERDEN","SOLL"]);
//selectUsersByGroup
helper.selectUsersByGroup( $("select") );
//forceRedraw
helper.forceRedraw( $("select") );
//getUserName
var firstname_lastname = helper.getUserName( gadget.getEntity("currentUser") );
//getUserNameReverse
var lastname_firstname = helper.getUserNameReverse( gadget.getEntity("currentUser") );
//getUserDepartment
var department = helper.getUserDepartment( gadget.getEntity("currentUser") );
//getDateString
var ddMMyyyy = helper.getDateString( new Date() );
//getTime
var hhmm = helper.getTime( new Date() );
//populateSelectFromArray
helper.populateSelectFromArray("ID", ["Wert1","Wert2"], ["Wert1"]);
//populateSelectFromCSV
helper.populateSelectFromCSV();
//checkValidInput
var bool = helper.checkValidInput($("input"));
//alert
helper.alert("TITLE","MESSAGE",function(){
//tu was
})
//confirm
helper.confirm("TITLE", "TEXT", "BUTTON OK TEXT", "BUTTON ABBRECHEN TEXT", function(decision){
if(decision) // tu was
})
})( this.form.ownerDocument.defaultView != null) ? this.form.ownerDocument.defaultView.jQuery : this.form.ownerDocument.parentWindow.jQuery , this);
Dabei zu beachten sind Folgende Punkte:
smartformHelper.js
/* Method Index
setValue: Sets value, merges local and inserts value in smartformfield if there is one (Params: id, value)
----------------------------------------------------------
getValue: Returns blank if undefined (Params: id)
----------------------------------------------------------
ajaxCall: Führt Ajaxcall aus und gibt Response an eine Callback weiter (Params: Type, URL, dataType, contentType, callback)
----------------------------------------------------------
stringContains: Prüft ob Zeichenkette vars in Wert var vorhanden ist. vars kann ein String oder ein Array aus mehreren Strings sein
(Params: variable1, variable(s)2)
----------------------------------------------------------
selectUsersByGroup: Fill dropdowns with all users or users from group. Exepts Classname of the dropdowns
HTML: <select name="INSERT A NAME" id="INSERT AN ID" class="INSERT A CLASSNAME" group="INSERT A TIM GROUP"></select>
Params: classname
----------------------------------------------------------
getUserName: Returns Firstname, Lastname from user got. If undefined returns username. (Param: User)
----------------------------------------------------------
getUserDepartment: Returns department of userGot (Param: user)
----------------------------------------------------------
getDateString: returns date as string in format dd.MM.yyyy (Params: Date)
----------------------------------------------------------
getTime: returns time as string in format hh:mm (Params: Date)
----------------------------------------------------------
populateSelectFromArray: fills an Selectfield with the given arrays
Params: id of the select
array: array filled plain text or objects. If objects, all attributes are taken
attributeList: if only certain attributes of objects should be taken
----------------------------------------------------------
populateSelectFromCSV: fills an Selectfield with the CSV File from URL
<select id="testSelect" csvFile= "/loom-portal/custom/test/Ressources/test.csv" csvCols="SpalteA;SpalteB" name="testSelect" class="form-control"></select>
########papaparse.min.js mandatory##########
Params: -
----------------------------------------------------------
checkValidInput: checks if regex from field param matches. alerts message and clears field if not. Sets value on change
example:
<input type="text" name="name" id="id" regex="^d*$" message="only digits"/>
checkValidInput( $(".fields") )
Params: filds
*/
gadget.functions.initFormularFunctions = function(){
var $ = (this.form.ownerDocument.defaultView!=null) ? this.form.ownerDocument.defaultView.jQuery : this.form.ownerDocument.parentWindow.jQuery;
var scope = this;
var helper = {
/*
Sets value, merges local and inserts value in smartformfield if there is one
Params: id, value
*/
setValue: function(idGot, value){
if(typeof value == "undefined" || value == null) return false;
value = value.toString();
var identifier = idGot.replace(/[/g,"[").replace(/\]/g,"\\]").replace(/\?/g,"\\?");
var field = $("#"+identifier);
if($(field).find("option:selected").attr("default")){
scope.entity.setValue(idGot,"");
}else{
scope.entity.setValue(idGot,value);
}
scope.entity.mergeLocal(true);
if(field.length>0){
switch($(field).prop("tagName")){
case "INPUT":
if($(field).attr("type")=="radio")
$("input[name="+identifier+"][value="+value+"]").prop("checked",true);
if($(field).attr("type")=="checkbox"){
if(value == "true")
$(field).prop("checked",true);
else
$(field).prop("checked",false);
}
else
$(field).val(value);
break;
case "SPAN":
$(field).prop("innerHTML",value);
break;
case "TEXTAREA":
$(field).val(value);
break;
case "SELECT":
$(field).val(value);
default:
break;
}
}
},
/*
Returns blank if undefined
Params: id
*/
getValue: function(idGot){
return ( typeof scope.entity.getValue(idGot) == "undefined") ? "" : scope.entity.getValue(idGot);
},
/*
Führt Ajaxcall aus und gibt Response an eine Callback weiter
Params: Type, URL, dataType, contentType, callback
*/
ajaxCall: function(type, url, dataType, contentType, callback){
$.ajax({
type: type,
url: url,
dataType: dataType,
contentType: contentType
}).done(function(response){
if(typeof callback == "function") {
callback.bind(this)(response)
} else{
return response;
}
}.bind(this)).fail(function(){
if(typeof callback == "function") {
callback.bind(this)(null)
} else{
return null;
}
}.bind(this));
},
/*
Prüft ob Zeichenkette vars in Wert var vorhanden ist. vars kann ein String oder ein Array aus mehreren Strings sein
Params: variable1, variable(s)2
*/
stringContains: function(va, vars){
var c=false;
switch(typeof vars){
case "object":
$(vars).each(function(i, v){
if(va.indexOf(v)>-1){
c=true;
return false;
}
});
break;
case "string":
if(va.indexOf(vars)>-1){
c=true;
}
break;
default:
c = false;
}
return c;
},
/*
Fill dropdowns with all users or users from group. Exepts Classname of the dropdowns
HTML: <select name="INSERT A NAME" id="INSERT AN ID" class="INSERT A CLASSNAME" group="INSERT A TIM GROUP"></select>
Params: classname
FOR PERFORMANCE REASONS ADD QUERIES TO SUPER/ADMIN
Name: getUsersByGroup
Query:
SELECT i.ID_, i.NAME_, i.NAMEFIRST, i.NAMELAST, i.EMAIL, c.DEPARTMENT, c.COMPANYID, c.COMPANYNAME
from
loom_identity i,
loom_identity m,
loom_identity g,
loom_systemconfiguration c
where i.CLASS = 'USER'
and i.ARCHIV_ '0'
and i.USERPROFILE_ID_ = c.ID_
and i.CLIENT_ID_ = ${SYS.CURRENT_CLIENT}
and g.CLASS = 'GROUP'
and m.CLASS = 'MEMBERSHIP'
and m.PARENT_ID_ = g.ID_
and m.USER_ID_ = i.ID_
and g.NAME_ = ?
Name: getAllUsers
Query:
SELECT i.ID_, i.NAME_, CASE WHEN i.NAMEFIRST IS NULL THEN '' ELSE i.NAMEFIRST END NAMEFIRST, CASE WHEN i.NAMELAST IS NULL THEN '' ELSE i.NAMELAST END NAMELAST, i.EMAIL, c.DEPARTMENT, c.COMPANYID, c.COMPANYNAME
FROM
loom_identity i,
loom_systemconfiguration c
where i.CLASS = 'USER'
and i.CLIENT_ID_ = ${SYS.CURRENT_CLIENT}
and i.USERPROFILE_ID_ = c.ID_
and i.ARCHIV_ = '0'
ORDER BY NAMELAST,NAMEFIRST desc
*/
selectUsersByGroup: function(classGot){
// Init all selects
$('.'+classGot).each(function(i, select){
$(select).attr("loaded","false");
$(select).empty();
var val = helper.getValue( $(select).attr("id") + "RealName" );
if(val) {
$(this).append($("<option>").prop({"innerHTML": val + " ("+helper.getValue( $(select).attr("id") + "Expression" ).replace("user(","").replace(")","") +")", "selected":true}));
}
else{
var $option = $("<option>").attr({"value":"Bitte auswählen...","Expression":"", "Email":"", "RealName":"","default":"default"}).prop({"innerHTML":"Bitte auswählen..."});
if(typeof getSingleTranslation == "function"){
if(typeof getSingleTranslation == "function"){
$option.text( getSingleTranslation(null, "select" ,"Bitte auswählen...") );
}
}
$(this).append( $option );
}
});
/*
On focus check if loaded and insert users from group
Fills Select with all users if parameter group = "Wild Card"
*/
var allSelectUsers = null;
$('.'+classGot).hover(function(){
//var val = $(this).children(":first").prop("innerHTML");
if($(this).attr("loaded") == "false"){
var selectedGroup = $.trim($(this).attr("group"));
if(!helper.stringContains(selectedGroup,"Wild Card") || !helper.stringContains(selectedGroup, "ALLUSERS")){
var fillDropDown = function(selectedGroup){
webService.DbConnectionManager.getResultSetAsWsEntity("getUsersByGroup", selectedGroup, function(usersGot){
$(this).attr("loaded","true");
$(this).empty();
var $option = $("<option>").attr({"value":"Bitte auswählen...","Expression":"", "Email":"", "RealName":"","default":"default", "QNumber":""}).prop({"innerHTML":"Bitte auswählen..."});
if(typeof getSingleTranslation == "function"){
var translation = getSingleTranslation(null, "select" ,"Bitte auswählen...");
if(typeof translation != "undefined")
$option.prop("innerHTML", translation);
}
$(this).append($option);
for(var u=0;u<usersGot.length;u++){
var user = usersGot[u];
var selected = false;
if(typeof helper.getValue($(this).attr("id")) != "undefined"){
if(helper.getValue($(this).attr("id")) == user.ID_)
selected = true;
}
$(this).append($("<option>").attr({"value":user.ID_,"Expression":"user("+user.NAME_ + ")", "Email":user.EMAIL, "RealName":user.NAMELAST + " " + user.NAMEFIRST, "QNumber": user.NAME_}).prop({"innerHTML":user.NAMELAST + ", " + user.NAMEFIRST + "(" + user.NAME_ + ")", "selected":selected}));
}
helper.forceRedraw(this);
}.bind(this));
}
fillDropDown.bind(this)(selectedGroup);
}
else{
var fillAllUsersDropdown = function(usersGot){
$(this).attr("loaded","true");
$(this).empty();
var $option = $("<option>").attr({"value":"Bitte auswählen...","Expression":"", "Email":"", "RealName":"","default":"default", "QNumber":""}).prop({"innerHTML":"Bitte auswählen..."});
if(typeof getSingleTranslation == "function"){
var translation = getSingleTranslation(null, "select" ,"Bitte auswählen...");
if(typeof translation != "undefined")
$option.prop("innerHTML", translation);
}
$(this).append( $option );
for(var u=0;u<usersGot.length;u++){
var user = usersGot[u];
var selected = false;
if(typeof helper.getValue($(this).attr("id")) != "undefined"){
if(helper.getValue($(this).attr("id")) == user.ID_)
selected = true;
}
$(this).append($("<option>").attr({"value":user.ID_,"Expression":"user("+user.NAME_ + ")", "Email":user.EMAIL, "RealName":user.NAMELAST + " " + user.NAMEFIRST, "QNumber": user.NAME_}).prop({"innerHTML":user.NAMELAST + ", " + user.NAMEFIRST + "(" + user.NAME_ + ")", "selected":selected}));
}
helper.forceRedraw(this);
}
webService.DbConnectionManager.getResultSetAsWsEntity("getAllUsers", "", function(usersGot){
usersGot.sort(function(a, b) {
var nameA = null;
var nameB = null;
if (!a.LASTNAME)
nameA = "ZZZ";
else
nameA = a.LASTNAME.toUpperCase();
if(!b.LASTNAME)
nameB = "ZZZ";
else
nameB = b.LASTNAME.toUpperCase();
if (nameA <nameB)
return -1;
if (nameA> nameB)
return 1;
return 0;
});
fillAllUsersDropdown.bind(this)(usersGot);
}.bind(this));
}
}
});
/* On change create Variables for Expression, Email and RealName */
$('.'+classGot).change(function(){
var option = $(this).children()[$(this).prop("selectedIndex")];
helper.setValue($(this).attr("id"),$(this).val());
helper.setValue($(this).attr("id")+"Expression",$(option).attr("Expression"));
helper.setValue($(this).attr("id")+"Email",$(option).attr("Email"));
helper.setValue($(this).attr("id")+"RealName",$(option).attr("RealName"));
helper.setValue($(this).attr("id")+"Group",$(this).attr("group"));
helper.setValue($(this).attr("id")+"GroupExpression", "group(" + $(this).attr("group") + ")");
helper.setValue($(this).attr("id")+"QNumber", $(option).attr("qnumber"));
});
},
forceRedraw: function(element){
if (!element) { return; }
var n = document.createTextNode(' ');
var disp = element.style.display; // don't worry about previous display style
element.appendChild(n);
//element.style.display = 'none';
setTimeout(function(){
element.style.display = disp;
if(n.parentNode != null)
n.parentNode.removeChild(n);
},20); // you can play with this timeout to make it as short as possible
},
/*
Returns Firstname, Lastname from user got. If undefined returns username.
Param: User
*/
getUserName: function(userGot){
var name = "";
name += ( typeof userGot.namefirst != "undefined" ) ? userGot.namefirst + ", " : "";
name += ( typeof userGot.namelast != "undefined" ) ? userGot.namelast : "";
if(name == "")
name = userGot.name;
return name;
},
getUserNameReverse: function(userGot){
var name = "";
name += ( typeof userGot.namelast != "undefined" ) ? userGot.namelast + ", " : "";
name += ( typeof userGot.namefirst != "undefined" ) ? userGot.namefirst : "";
if(name == "")
name = userGot.name;
return name;
},
/*
Returns department of userGot
Param: user
*/
getUserDepartment: function(userGot){
if(typeof userGot.userProfile[0].department != "undefined")
return userGot.userProfile[0].department;
else
return "";
},
/* Deletes all CBA and Bootstrap CSS from DOM*/
removeCBAStyles: function(){
var $cssFiles = $('.customCss,link[rel=stylesheet]');
var $parent = $cssFiles.parent();;
$cssFiles.each(function(i, css){
var href = $(css).attr("href").toLowerCase();
if(href.indexOf("cba")>-1 || href.indexOf("bootstrap")>-1){
$parent.remove(css);
}
});
},
/*
returns date as string in format dd.MM.yyyy
Params: Date
*/
getDateString: function(dateGot){
var day = dateGot.getDate().toString();
day = (day.length == 1) ? "0"+day : day;
var month = (parseInt( dateGot.getMonth() ) + 1).toString();
month = (month.length == 1) ? "0"+month : month;
return day + "." + month + "." + dateGot.getFullYear();
},
/*
returns time as string in format hh:mm
Params: Date
*/
getTime: function(dateGot){
var h = dateGot.getHours().toString();
h = (h.length == 1) ? "0"+h : h;
var m = dateGot.getMinutes().toString();
m = (m.length == 1) ? "0"+m : m;
return h+":"+m;
},
/*
fills an Selectfield with the given arrays
Params: id of the select
array: array filled plain text or objects. If objects, all attributes are taken
attributeList: if only certain attributes of objects should be taken
*/
populateSelectFromArray: function(idGot, array, attributeList){
$('#' + idGot).find('option').remove();
$('#' + idGot).append($("<option />").val("-").text("-"));
var attributeListBool = (typeof attributeList == "undefined");
$.each(array, function(i,e){
switch(typeof e) {
case 'object':
//if it is an object, add all values
var keys = Object.keys(e);
var currentString = "";
var count = 0;
$.each(keys, function(x, key){
if(count == 0){
if(!attributeListBool && $.inArray(key, attributeList) != -1){
currentString += e[key];
count++;
} else if(attributeListBool){
currentString += e[key];
count++;
}
} else {
if(!attributeListBool && $.inArray(key, attributeList) != -1){
currentString += " - " + e[key];
count++;
} else if(attributeListBool){
currentString += " - " + e[key];
count++;
}
}
});
if(currentString)
$('#' + idGot).append($("<option />").val(currentString).text(currentString));
break;
default:
//if values are plain text
$('#' + idGot).append($("<option />").val(e).text(e));
}
})
if(typeof(scope.entity.getValue(idGot)) != 'undefined' && scope.entity.getValue(idGot)){
$("#" + idGot).val(scope.entity.getValue(idGot));
} else {
scope.entity.setValue(idGot, "-");
scope.entity.mergeLocal(true);
}
},
/*
fills an Selectfield with the CSV File from URL
<select id="testSelect" csvFile= "/loom-portal/custom/test/Ressources/test.csv" csvCols="SpalteA;SpalteB" name="testSelect" class="form-control"></select>
###PAPAparse.min.js benötigt
Params: -
*/
populateSelectFromCSV: function(){
csvConfig = {
skipEmptyLines: true,
header: true
}
$('[csvFile]').each(function(){
var currentField = this;
$.get($(currentField).attr("csvFile")).then(function(csv){
var verwendung = Papa.parse(csv,csvConfig);
var attributeList = (typeof $(currentField).attr("csvCols") != "undefined" ? $(currentField).attr("csvCols").split(";") : undefined);
helper.populateSelectFromArray(currentField.id,verwendung.data,attributeList);
})
});
},
/*
checks if regex matches on change
params fields
example: <input type="text" name="name" id="id" regex="^\d*$" message="only digits"/>
*/
checkValidInput: function(fields){
$(fields).unbind("change");
$(fields).change(function(){
var regex = new RegExp( $(this).attr("regex") );
var message = $(this).attr("message");
if(!regex.test($(this).val())){
alert(message);
helper.setValue($(this).attr("id"), "");
}
else
helper.setValue($(this).attr("id"), $(this).val());
});
},
alert: function(titleGot, textGot, callback){
$("<div>").dialog({
dragable:false,
modal: true,
resizeable: false,
show: {effect: "fadeIn"},
title: titleGot,
maxwidth: 600,
open: function(){
$(this).html(textGot);
$(".ui-dialog-titlebar-close").css("display","none");
},
buttons: {
Ok: function(){
$(this).dialog("close");
$(this).dialog("destroy");
if(typeof callback == "function")
eval(callback());
}
},
create:function () {
$(this).closest(".ui-dialog").find(".ui-dialog-buttonset button").addClass("btn btn-primary");
}
});
},
confirm: function(titleGot, textGot, btnOKText, btnCancelText, callback){
//bootbox.alert(textGot);
$("<div>").dialog({
dragable:false,
modal: true,
resizeable: false,
show: {effect: "fadeIn"},
title: titleGot,
open: function(){
$(this).html(textGot);
$(".ui-dialog-titlebar-close").css("display","none");
},
buttons: {
Ok: function(){
$(this).dialog("close");
$(this).dialog("destroy");
if(typeof callback == "function")
eval(callback(true));
},
Abbrechen: function(){
$(this).dialog("close");
$(this).dialog("destroy");
if(typeof callback == "function")
eval(callback(false));
}
},
create:function () {
$(this).closest(".ui-dialog").find(".ui-dialog-buttonset button").first().addClass("btn btn-primary");
$(this).closest(".ui-dialog").find(".ui-dialog-buttonset button").first().next().addClass("btn btn-danger");
if(btnOKText)
$(this).closest(".ui-dialog").find(".ui-dialog-buttonset button").first().html(btnOKText);
if(btnCancelText)
$(this).closest(".ui-dialog").find(".ui-dialog-buttonset button").first().next().html(btnCancelText);
}
});
}
}
return helper;
}