Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Reply
tomseidel
Regular Visitor

Custom visual arrange layers of visualization

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:

Capture.JPG

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

9 REPLIES 9
v-viig
Community Champion
Community Champion

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

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

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
Community Champion
Community Champion

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

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
Community Champion
Community Champion

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

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
Community Champion
Community Champion

  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

 

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
Community Champion
Community Champion

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

Helpful resources

Announcements
LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.