Adding a custom jQuery control

#1

Does anybody have advice for including a jQuery plugin on a dashboard?

I’ve tried using a combination of the page ready event and script/css in an HTML control, but no luck.

1 Like
#2

Hi Mark,

Good to hear from you! The ‘correct’ way to add a custom control is to use the API and create your own plug-in.

https://www.dundas.com/support/developer/samples/extensions/create-a-custom-control
https://www.dundas.com/support/developer/samples/extensions/create-a-custom-data-adapter

I am however, much more lazy and typically add these sorts of things using a HTML Label control. Since the HTML Label can directly render HTML, you can add it directly to the text property.

Here is a quick sample of the output created using this method:

image
image.png1189×339 30.3 KB

Source:
https://codepen.io/AndreiaLopes/pen/ogrKBZ

The HTML code i put in the HTML Label control:

<style>
  .ui-progressbar {
    position: relative;
    color:#362878;
    width:650px;
    margin-left:auto;
    margin-right:auto;
}
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    margin-left:-40px;
  }

.ui-widget-header {
  border: 1px solid #E8D1CF;
  background: #C3AEE0 url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
  font-weight: bold;
  margin-left:-40px; 
}
</style>
<script>
$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 2 );
 
      if ( val < 99 ) {
        setTimeout( progress, 80 );
      }
    }
 
    setTimeout( progress, 2000 );
  });  
</script>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
1 Like
#3

Thanks Jeff.

I ended up creating what I wanted in simple javascript/css.

image