Custom Widgets???

1
0
-1

Hi there,

We're in the process of developing some custom widgets but having a couple of issues as follows:

Looking at the Advanced Example in http://documentation.bonitasoft.com/custom-widgets-0

Question 1)

  1. We have created a new Custom Widget
  2. We have deleted all existing templates code and parameters
  3. We have downloaded ui-bootstrap-tpls.min.js
  4. We have added as a local resource, and
  5. We have declared ui.bootstrap as Required Module
  6. We have copied the Carousel Code to the template:
    <carousel>
      <slide ng-repeat="slide in slides" >
        <img ng-src="{{slide.url}}" style="margin:auto;" alt="{{slide.alt | uiTranslate}}">
      </slide>
    </carousel>

and

  1. We have copied the Controller code to the Controller:
function ($scope) {
    $scope.slides = [
        { url: 'http://placekitten.com/601/300', alt:'kitty looking down' },
        { url: 'http://placekitten.com/602/300', alt:'kitty in hand' },
        { url: 'http://placekitten.com/603/300', alt:'kitty outside' },
        { url: 'http://placekitten.com/604/300', alt:'4 kitten in basket' }
       ];
    }
  1. However when we execute the page, it always shows ONLY the pictures there is NO Carousel.

The generalted HTML is as follows:

<custom-display-variable-in-custom-widget-widget><div>
    <carousel>
      <!-- ngRepeat: slide in slides --><slide ng-repeat="slide in slides" class="ng-scope">
        <img ng-src="http://placekitten.com/601/300" style="margin:auto;" alt="kitty looking down" src="http://placekitten.com/601/300">
      </slide><!-- end ngRepeat: slide in slides --><slide ng-repeat="slide in slides" class="ng-scope">
        <img ng-src="http://placekitten.com/602/300" style="margin:auto;" alt="kitty in hand" src="http://placekitten.com/602/300">
      </slide><!-- end ngRepeat: slide in slides --><slide ng-repeat="slide in slides" class="ng-scope">
        <img ng-src="http://placekitten.com/603/300" style="margin:auto;" alt="kitty outside" src="http://placekitten.com/603/300">
      </slide><!-- end ngRepeat: slide in slides --><slide ng-repeat="slide in slides" class="ng-scope">
        <img ng-src="http://placekitten.com/604/300" style="margin:auto;" alt="4 kitten in basket" src="http://placekitten.com/604/300">
      </slide><!-- end ngRepeat: slide in slides -->
    </carousel>
</div></custom-display-variable-in-custom-widget-widget>

We are using both Preview and executing the page from a process with the same results, No Carousel.

There are no visible errors in the Chrome Log...

So why can't we get the Carousel to work when everything indicates it's fine?

That's it for today I think... :)

regards
Seán

Comments

Submitted by dbravo on Mon, 03/28/2016 - 20:53

Hi,

Are you using correctly the directives from ui.bootstrap?, in the documentation says you have to use a <uib-carousel> element with <uib-slide> elements inside it.

Please refer: https://angular-ui.github.io/bootstrap/#/carousel

I hope it helps.
Bye.

Submitted by joe.pappas on Tue, 07/18/2017 - 21:58

Yes, I ran into the same issue using the documentation. I had to use the following markup to get it to work

<div uib-carousel active="active">
      <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        <img ng-src="{{slide.url}}" style="margin:auto;" alt="{{slide.alt | uiTranslate}}">
      </div>
</div>

Note the use of uib in carousel and slide. I also had to add an id attribute to the object:

    $scope.slides = [
    { url: 'http://placekitten.com/601/300', alt:'kitty looking down', id: 0 },
    { url: 'http://placekitten.com/602/300', alt:'kitty in hand', id: 1 },
    { url: 'http://placekitten.com/603/300', alt:'kitty outside', id: 2 },
    { url: 'http://placekitten.com/604/300', alt:'4 kitten in basket', id: 3 }

"
The next trick is how to attach documents in the carousel.

No answers yet.
Notifications