Custom Widgets???

Q&A
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:
{{slide.alt | uiTranslate}}

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:




kitty looking down

kitty in hand

kitty outside

4 kitten in basket

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… :slight_smile:

regards
Seán

2

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.

3

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.