Custom visual arrange layers of visualization

[tomseidel]

Hi,

we need a datetime picker as custom visual. One option seemed to be including bootstrap/jquery based external components.

Thats what I tried, but cant get it to work. I used:

"npm install jquery-datetimepicker" and referenced it and a simple external script within pbiviz.json: "assets/js/jscripts.js"

content is just:

window.jQuery(function () {
$('#datetimepicker').datetimepicker();
});

when I create just a simple text input I got the error-message:

My constructor just adds an input element with that id:

this.target = options.element;
this.updateCount = 0;
if (typeof document !== "undefined") {
const new_txt: HTMLElement = document.createElement("input");
new_txt.id = 'datetimepicker';
this.target.appendChild(new_txt);
}

how can I get that to work and if so, how do I get the select value back?

Thanks for you help,

Thomas

[v-viig]

Did you add jquery-datetimepicker.js into externalJS property of pbiviz.json?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[tomseidel]

Yes:

"externalJS": [
   "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.min.js",
   "assets/js/jscripts.js"
],

[v-viig]

Please follow these steps:

• Create a new JS file
• Put this code into a new file: var $ = window.jQuery; var jQuery = window.jQuery
• Add this file into externalJS proeprty of pbiviz.json right after jquery
• pbiviz start
• Check if the issue is resolved

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[tomseidel]

Hi Ignat,

that change it and its not throwing any error now. so the code is working.

But, the on-click events on that textbox are not firing any datetime visuals.

I guess the event handling has been overwritten by power bi? can I somehow reactivate that?

Thanks

Thomas

[v-viig]

Power BI does not override events but it loads code into a new DIV.

I've seen such issues with similar components. Please review DOM when you click it. You would probably need to specify rootSelector for datepicker.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[tomseidel]

Not sure, what that means. However I noticed that when I click the control several times it slowly displays.

1st click - nothing to see

2nd click - half visible

3rd click - full visible without any formatting

So the remaining questions would be.

1. Why do I have to click 3 times to fully see it?

2. why is my external css I imported in the visual.less not working

@import "node_modules/jquery-datetimepicker/jquery.datetimepicker.css";

Thanks

Thomas

[v-viig]

1. Not sure. Probably it's related to CSS or missed rootSelector property
2. You must add import statement into less file: @import (less) "node_modules/jquery-datetimepicker/jquery.datetimepicker.css";

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[tomseidel]

Well I did the import:

@import (less) "node_modules/bootstrap/dist/css/bootstrap.css";
@import (less) "node_modules/bootstrap-datetimepicker/bootstrap-datetimepicker.css";

So it must be the root selector thing. Where can I read more about that? Not sure what to look for.

Thanks, again

[v-viig]

Please read documentation of datepicker to find out how to specify another root element.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com