Using Angular UI in embedded Forms (Typeahead)

Camunda 7 Topics Discussion & Questions
,
1

Hello together

I have read a lot about the integrated AngularJs features and wanted to make use of it in my embedded form. Im talking about: https://angular-ui.github.io/bootstrap/

So I started to play around. However Im getting not very far. Especialy I wanted to use the typeahead functionality. The code im using in my form is as following:

HTML (copy paste from: https://angular-ui.github.io/bootstrap/#/typeahead):

[CODE]

Model: {{selected | json}}
[/CODE]

I hope if i get the implementation of this example I can use the other really cool things on this website the same way.

Thanks for your help.

Marc
`

2

Hi Marc,

could you describe your problem in more detail? Are you getting any error messages in the console? What is the behavior you want to achieve? What behavior do you get instead?

Cheers
Sebastian

3

Hi Sebastian,

I just want an Input-field. When the user enters some value it should suggest a list possible option (In this case an array with states in America).

I took the example and code 100% from: https://angular-ui.github.io/bootstrap/#/typeahead
If you look at this site it is the first example (static arrays)

However Im not able to make it run inside camunda.

The Errormassage when I want to start the process is: Form failure: Expected identifier

thx
Marc

4

Hi Marc,

your HTML markup looks like it uses a version of angular UI bootstrap that is not supported by the angular version we are using. Make sure you use a version that is compatible with angular 1.2.29 (e.g. angular-ui v0.12.0)

Also, in your Javascript section, you define a function but never call it. You should be able to access the scope outside of any function call. You can also access it inside the event lifecycle listener functions.

Does this help you?

Cheers
Sebastian

5

Hi Sebastian,

Yes I think the second hint was really important and brought me one step closer to my goal. However it still doesnt work :confused:

Input-Field unchangend
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

As sugested I tried the following script codes:

camForm.on('form-loaded', function ($scope, $http) {
    $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

});

and also with the inject()

inject([ '$scope', '$http', function($scope, $http) {
      camForm.on('form-loaded', function() {

          $scope.selected = undefined;
          $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

      });
  }]);

In both cases no error message is displayed. But nothing happens if I enter some text in my input filed.

If you could have a quick look at my code and have any suggestion for me it would be really great

Marc

6

Hi Marc,

as I mentioned in my previous post, your HTML markup for the typeahead is unsupported. There is no uib-typeahead attribute in the version of angular-bootstrap.ui we use.

If you click here: http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/#/typeahead and scroll down a bit to the example code, you will find the markup you can use.

Cheers
Sebastian

7

Hi Sebastian,

I just didnt see the difference between this two versions. Of course you where right it should be typeahead and not uib-typeahead. Thanks a lot for your help!

Here is the complet code maybe somebody else is thankful :slightly_smiling:

<form>
<div class='container-fluid'>
  <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    <input autocomplete="off" type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
<script cam-script type="text/form-script">
    camForm.on('form-loaded', function () {
        $scope.selected = undefined;
        $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
    });
</script>
</form>