topic Re: Custom visual arrange layers of visualization in Developer

Custom visual arrange layers of visualization

tomseidel — Tue, 07 Aug 2018 13:56:42 GMT

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

Re: Custom visual arrange layers of visualization

v-viig — Tue, 07 Aug 2018 15:16:34 GMT

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

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Custom visual arrange layers of visualization

tomseidel — Wed, 08 Aug 2018 07:19:02 GMT

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"
],

Re: Custom visual arrange layers of visualization

v-viig — Wed, 08 Aug 2018 14:16:09 GMT

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

Re: Custom visual arrange layers of visualization

tomseidel — Wed, 08 Aug 2018 14:37:08 GMT

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

Re: Custom visual arrange layers of visualization

v-viig — Wed, 08 Aug 2018 14:53:54 GMT

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

Re: Custom visual arrange layers of visualization

tomseidel — Thu, 09 Aug 2018 10:39:18 GMT

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

Re: Custom visual arrange layers of visualization

v-viig — Fri, 10 Aug 2018 12:32:12 GMT

Not sure. Probably it's related to CSS or missed rootSelector property
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

Re: Custom visual arrange layers of visualization

tomseidel — Fri, 10 Aug 2018 12:58:04 GMT

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

Re: Custom visual arrange layers of visualization

v-viig — Mon, 13 Aug 2018 11:54:00 GMT

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