i have a javascript code that i would like to add a simple style to the buttons. Even if i have to add css please let me know where to add it and using which line. Thanks.
I have a javascript code that I would like to add a simple style to the buttons. Even if I have to add CSS please let me know where to add it and using which line. Thanks.
define(["jquery","qlik"], function($, qlik) {
return {
initialProperties: {
version: 1.0,
var_to_use: "vButtonValue",
num_of_buttons: "1",
buttonname1: " YTD ",
buttonname2: " MTD ",
buttonname3: " TODAY ",
buttonname4: " Clear ",
buttonname5: "Button 5",
buttonvalue1: "1",
buttonvalue2: "2",
buttonvalue3: "3",
buttonvalue4: "4",
buttonvalue5: "5"
},
//property panel
definition: {
type: "items",
component: "accordion",
items: {
settings: {
uses: "settings",
items : {
usevariable : {
ref : "var_to_use",
expression:"optional",
label : "Variable to use",
type : "string",
defaultValue : "vButtonValue"
},
usevariable2 : {
ref : "num_of_buttons",
expression:"",
label : "Number of buttons",
type : "integer",
component: "dropdown",
defaultValue : "1",
max:5,
options:
[ {
value: "1",
label: "1"
}, {
value: "2",
label: "2"
}, {
value: "3",
label: "3"
}, {
value: "4",
label: "4"
}, {
value: "5",
label: "5"
}],
},
usevariable4 : {
label : "Button Values",
ref : "button_value_block",
settings: {
uses: "settings",
items : {
buttonvalue1p : {
ref : "buttonvalue1",
expression:"optional",
label : "Button value 1",
type : "string",
defaultValue : "1"
},
buttonvalue2p : {
ref : "buttonvalue2",
expression:"optional",
label : "Button value 2",
type : "string",
defaultValue : "2"
},
buttonvalue3p : {
ref : "buttonvalue3",
expression:"optional",
label : "Button value 3",
type : "string",
defaultValue : "3"
},
buttonvalue4p : {
ref : "buttonvalue4",
expression:"optional",
label : "Button value 4",
type : "string",
defaultValue : "4"
},
buttonvalue5p : {
ref : "buttonvalue5",
expression:"optional",
label : "Button value 5",
type : "string",
defaultValue : "5"
}
}
}
},
usevariable3 : {
label : "Button Names",
ref : "button_names_block",
settings: {
uses: "settings",
items : {
buttonname1p : {
ref : "buttonname1",
expression:"optional",
label : "Button name 1",
type : "string",
defaultValue : "Button 1"
},
buttonname2p : {
ref : "buttonname2",
expression:"optional",
label : "Button name 2",
type : "string",
defaultValue : "Button 2"
},
buttonname3p : {
ref : "buttonname3",
expression:"optional",
label : "Button name 3",
type : "string",
defaultValue : "Button 3"
},
buttonname4p : {
ref : "buttonname4",
expression:"optional",
label : "Button name 4",
type : "string",
defaultValue : "Button 4"
},
buttonname5p : {
ref : "buttonname5",
expression:"optional",
label : "Button name 5",
type : "string",
defaultValue : "Button 5"
}
}
},
}
}
}
}
},
snapshot: {
canTakeSnapshot: false
},
paint: function ($element,layout) {
var numbuttons=layout.num_of_buttons;
var numbuttonsmax=parseFloat(numbuttons)+1;
if (numbuttonsmax > 6) {
numbuttonsmax = 6;
};
var html='<div width="100%">';
var i = 0;
var idbutnom='hola';
for (i = 1; i < numbuttonsmax; i++) {
switch(i) {
case 1:
idbutnom=layout.buttonname1;
break;
case 2:
idbutnom=layout.buttonname2;
break;
case 3:
idbutnom=layout.buttonname3;
break;
case 4:
idbutnom=layout.buttonname4;
break;
case 5:
idbutnom=layout.buttonname5;
break;
};
html=html+"<button class='qirby-button' width='auto' id='button" + i + "'>" + idbutnom + "</button>"
};
html=html+"</div>";
$element.html(html);
$element.find("#button1").on("qv-activate", function() {
var app = qlik.currApp();
var textobus=layout.var_to_use;
app.variable.setContent(textobus, layout.buttonvalue1);
});
$element.find("#button2").on("qv-activate", function() {
var app = qlik.currApp();
var textobus=layout.var_to_use;
app.variable.setContent(textobus, layout.buttonvalue2);
});
$element.find("#button3").on("qv-activate", function() {
var app = qlik.currApp();
var textobus=layout.var_to_use;
app.variable.setContent(textobus, layout.buttonvalue3);
});
$element.find("#button4").on("qv-activate", function() {
var app = qlik.currApp();
var textobus=layout.var_to_use;
app.variable.setContent(textobus, layout.buttonvalue4);
});
$element.find("#button5").on("qv-activate", function() {
var app = qlik.currApp();
var textobus=layout.var_to_use;
app.variable.setContent(textobus, layout.buttonvalue5);
});
}
}
});
Related
I am trying to remove some property of a JSON response.
I would like to remove this part of the response (first part) :
{
"en" : 10,
"left" : false,
"right" : false,
"result" :
And remove too the last character of the response (last part) :
"}"
I have tried different ways to do this but none of them work as I would like them to.
var object_delete = ['en','left','right','result'];
for(i in object_delete){
var data = JSON.parse(JSON.stringify(data).replace(object_delete[i], ""));
}
I expect the output :
[ {
"type1" : "string data",
"type2" : "string data",
"type3" : {
"name" : "string data"
},
"red" : {
"path" : "string data",
"path2" : null,
"path3" : null,
"path4" : null
}
} ]
But the actual output is :
{
"en" : 2,
"left" : false,
"right" : false,
"result" : [ {
"type1" : "string data",
"type2" : "string data",
"type3" : {
"name" : "string data"
},
"red" : {
"path" : "string data",
"path2" : null,
"path3" : null,
"path4" : null
}
} ]
}
Anyone have any idea how this can be done?
You could try something like this:
const entry = {
"entries" : 10,
"left" : false,
"right" : false,
"result" : [
{
"type1" : "string data",
"type2" : "string data",
"type3" : "string data",
"type4" : "string data",
"type5" : "string data",
"type6" : {
"name" : "string data"
},
"red" : {
"path" : "string data",
"path2" : null,
"path3" : null,
"path4" : null
}
}
]
};
const output = [...entry["result"]];
console.log(JSON.stringify(output));
// [{"type1":"string data","type2":"string data","type3":"string data","type4":"string data","type5":"string data","type6":{"name":"string data"},"red":{"path":"string data","path2":null,"path3":null,"path4":null}}]
I have 2 collections and I am new to Mongo MapReduce concept.
My collection Value looks like this
{
"_id" : ObjectId("5bc4f20e1a80d2045029ccb7"),
"name" : "Title 1",
"value" : "value 1 for title 1"
}
{
"_id" : ObjectId("5bc4f20e1a80d2045029ccb8"),
"name" : "Title 1",
"value" : "Value 2 for title1. "
}
{
"_id" : ObjectId("5bc4f20e1a80d2045029ccb9"),
"name" : "Title 2",
"value" : " Definitely a motivational text!"
}
{
"_id" : ObjectId("5bc4f20e1a80d2045029ccba"),
"name" : "Title 2",
"value" : "It's tough but I'm carrying on. "
}
Other collection Details look like:
{
"_id" : ObjectId("5bc4f2361a80d2045029d05b"),
"name" : "Title 1",
"totalValues" : 6.0000000000000000,
"link": "Link1",
"description" : "Some More Text to Make title 1 look better"
}
{
"_id" : ObjectId("5bc4f2361a80d2045029d2eb"),
"name" : "Title 2",
"totalValues" : 2,
"link": "Link2",
"description" : "Some More Text to Make title 2 look better"
} ...
I want the output result as
{
“name” : “XXXXXXXX”,
“comments” : [ {“value”: “XXXXXXX”}, {“value”: “YYYYYYYY”}],
“totalValues” : 2,
“link”: “XXXXXXXXXX”,
“description”: “XXXXXXXXXXXXXXXXXX”
}
with the following output document. Please help.
I have tried following code:
var mapDetails = function(){
var output = {name: this.name,totalValues :this.totalValues, description : this.description, link :this.link}
emit(this.name, output);
};
var mapGpas = function() {
emit(this.name,{name:this.name, value:this.value, totalValues:0, description: 0, link: 0});
};
var r = function(key, values) {
var outs = { name: 1,value: 1, description: 0,totalValues:0, link: 0};
values.forEach(function(v){
outs.name = v.name;
if (v.value == 0) {
outs.description = v.description;
outs.totalValues = v.totalValues;
outs.link = v.link;
}
});
return outs;
};
res = db.Value.mapReduce(mapGpas, r, {out: {reduce: 'joined'}})
res = db.Details.mapReduce(mapDetails, r, {out: {reduce: 'joined'}})
db.joined.find().pretty()
Declaration of id
var id = 3;
I want to update this object
var obj = {"comments" : {
"commentedBy" : "test",
"date" : "",
"comment" : "Hello world",
"subComments" : {
"commentedBy" : "jaril 2",
"date" : "",
"comment" : "Hello world inside dark",
"subComments" : {
"commentedBy" : "jaril 3",
"date" : "",
"comment" : "wow working great",
"subComments" : {
"commentedBy" : "jaril 4",
"date" : "",
"comment" : "wow working great",
"commentId" : 4
},
"commentId" : 3
},
"commentId" : 2
},
"commentId" : 1
},
"dueDate" : "",
"createdDate" : "",
"lastUpdated" : "",
"checkList" : [],
"position" : 2,
"status" : "active"
}
}
Function is this
function deleteCommentId(comments){
if (comments.commentId == id)){
delete comments;
return comments;
}
if (comments.subComments) {
deleteCommentId(comments.subComments);
}
return comments;
}
Function Object is this
if(id == 1){
result[0].comments = {};
} else {
deleteCommentId(obj.comments);
}
console.log("final object==>", obj);
I want output like this
{"comments" : {
"commentedBy" : "test",
"date" : "",
"comment" : "Hello world",
"subComments" : {
"commentedBy" : "jaril 2",
"date" : "",
"comment" : "Hello world inside dark",
"commentId" : 2
},
"commentId" : 1
},
"dueDate" : "",
"createdDate" : "",
"lastUpdated" : "",
"checkList" : [],
"position" : 2,
"status" : "active"
}
}
Any help would be appreciated
Note: I want to remove nested subcomments object using id if I pass
id=3 then it should remove subcomment of 2, How can I remove subcomments of 2 if id = 3
The function below should do it.
(I removed the irrelevant parts or your object to make things a bit easier to read.)
var obj = {
"comments": {
"subComments": {
"subComments": {
"subComments": {
"commentId": 4
},
"commentId": 3
},
"commentId": 2
},
"commentId": 1
}
};
function deleteCommentId(comments, id) {
if (comments.subComments) {
if (comments.subComments.commentId === id) {
delete comments.subComments;
} else {
deleteCommentId(comments.subComments, id);
}
}
}
deleteCommentId(obj.comments, 3);
console.log(obj);
var id = 3;
var obj = {"comments":{"commentedBy":"test","date":"","comment":"Hello world","subComments":{"commentedBy":"jaril 2","date":"","comment":"Hello world inside dark","subComments":{"commentedBy":"jaril 3","date":"","comment":"wow working great","subComments":{"commentedBy":"jaril 4","date":"","comment":"wow working great","commentId":4},"commentId":3},"commentId":2},"commentId":1},"dueDate":"","createdDate":"","lastUpdated":"","checkList":[],"position":2,"status":"active"}
function deleteCommentId(comments, id) {
if (comments.subComments) {
if (comments.subComments.commentId === id) {
delete comments.subComments;
} else {
deleteCommentId(comments.subComments, id);
}
}
}
deleteCommentId(obj.comments, id);
console.log("final object==>",obj);
var expectedJSON = {"comments":{"commentedBy":"test","date":"","comment":"Hello world","subComments":{"commentedBy":"jaril 2","date":"","comment":"Hello world inside dark","commentId":2},"commentId":1},"dueDate":"","createdDate":"","lastUpdated":"","checkList":[],"position":2,"status":"active"}
console.log("Output match: ",JSON.stringify(obj) == JSON.stringify(expectedJSON));
I have this jSon:
[
{ "value": "13", "text" : "fdg" },
{ "value" : "12", "text" : "fdg" },
{ "value" : "11", "text" : "fdg" },
{ "value" : "10", "text" : "dsf" },
{ "value" : "9", "text" : "testing" },
{ "value" : "8", "text" : "test" },
{ "value" : "7", "text" : "fdg" }
]
And the input field is:
<input type="text" name="productos" id="productos" class="form-control" />
And my js code is:
var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'url_to_json'
});
cities.initialize();
elt = $('#productos');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'productos',
displayKey: 'text',
source: cities.ttAdapter(),
}
});
But when is select, for example, the text "testing", instead of returning me the value 9 (when i get the input val() ) it returns me the value 5. The same happens to me when select another items. I can't find the problem in my code. What is this returning?
I think it's important to remark that if I change the value of itemValue for another (also in jSon data) it doesn't work. I had to keep value name as itemValue.
Thanks,
Virginia
For some reason jqplot is not rendering the label correctly and, ultimately, shoving all the line points at the end of the chart. Here is what it looks like...
Here is what it looks like:
Below is the JS including the plot point...
var _a212064_plot_properties;
$(document).ready(function ()
{
_a212064_plot_properties =
{
"legend" :
{
"show" : true
},
"series" : [
{
"label" : "Current Year"
},
{
"label" : "Previous Year"
}
],
"axes" :
{
"xaxis" :
{
"tickOptions" :
{
"formatString" : "%b"
},
"label" : "Date",
"min" : "07\/01\/2012 00:00:00",
"tickInterval" : "1 Month",
"renderer" : $.jqplot.DateAxisRenderer,
"properties" : "xaxis"
},
"yaxis" :
{
"tickRenderer" : $.jqplot.CanvasAxisTickRenderer,
"tickOptions" :
{
"angle" : -30,
"labelPosition" : "middle"
},
"labelRenderer" : $.jqplot.CanvasAxisLabelRenderer,
"labelOptions" :
{
"fontSize" : "13pt"
},
"label" : "Organic Visits",
"properties" : "yaxis"
}
},
"highlighter" :
{
"bringSeriesToFront" : true,
"tooltipLocation" : "n",
"tooltipOffset" : "0",
"formatString" : "Point <\/span>%s: %s<\/strong><\/div>"
},
"cursor" :
{
"show" : true,
"zoom" : true
}
}
$.jqplot.config.enablePlugins = true;
$.jqplot.config.defaultHeight = 300;
$.jqplot.config.defaultWidth = 400;
_a212064 = $.jqplot("a212064", [[[1341115200, 2330], [1343793600, 2768], [1346472000, 2462], [1349064000, 2331], [1351742400, 2198], [1354338000, 2258], [1357016400, 2763], [1359694800, 2399], [1362114000, 2643], [1364788800, 1550], [1367380800, 621], [1370059200, 356]], [[1341115200, 4654], [1343793600, 4105], [1346472000, 4347], [1349064000, 4163], [1351742400, 3849], [1354338000, 5579], [1357016400, 4908], [1359694800, 3690], [1362114000, 2314], [1364788800, 3173], [1367380800, 2608], [1370059200, 2330]]], _a212064_plot_properties);
}
);
Any ideas? Getting the dates into that label is the last thing I can't figure out.
Thanks!
you need to change the parameters for xaxis.
Here is the working copy of your code: Jsfiddle link
var _a212064_plot_properties;
$(document).ready(function ()
{
_a212064_plot_properties =
{
"legend" :
{
"show" : true
},
"series" : [
{
"label" : "Current Year"
},
{
"label" : "Previous Year"
}
],
"axes" :
{
"xaxis" :
{
"label" : "Date",
"renderer" : $.jqplot.DateAxisRenderer
},
"yaxis" :
{
"tickRenderer" : $.jqplot.CanvasAxisTickRenderer,
"tickOptions" :
{
"angle" : -30,
"labelPosition" : "middle"
},
"labelRenderer" : $.jqplot.CanvasAxisLabelRenderer,
"labelOptions" :
{
"fontSize" : "13pt"
},
"label" : "Organic Visits"
}
},
"highlighter" :
{
"bringSeriesToFront" : true,
"tooltipLocation" : "n",
"tooltipOffset" : "0",
"formatString" : "Point <\/span>%s: %s<\/strong><\/div>"
},
"cursor" :
{
"show" : true,
"zoom" : true
}
}
$.jqplot.config.enablePlugins = true;
$.jqplot.config.defaultHeight = 300;
$.jqplot.config.defaultWidth = 400;
_a212064 = $.jqplot("a212064", [[[1341115200, 2330], [1343793600, 2768], [1346472000, 2462], [1349064000, 2331], [1351742400, 2198], [1354338000, 2258], [1357016400, 2763], [1359694800, 2399], [1362114000, 2643], [1364788800, 1550], [1367380800, 621], [1370059200, 356]], [[1341115200, 4654], [1343793600, 4105], [1346472000, 4347], [1349064000, 4163], [1351742400, 3849], [1354338000, 5579], [1357016400, 4908], [1359694800, 3690], [1362114000, 2314], [1364788800, 3173], [1367380800, 2608], [1370059200, 2330]]], _a212064_plot_properties);
}
);