ui-select or select2 with angular-schema-form-dynamic-select? #15

subhendupsingh · 2015-05-12T23:21:29Z

How can I implement ui-select or select2 with angular-schema-form-dynamic-select, I see that select behaviour here is applied to a button, i want it to be a dropdown like ui-select or select 2.

nicklasb · 2015-05-13T00:09:20Z

I don't know about select2 for ASF, while I have considered also implementing ui-select, it is not currently in the pipeline.
I would recommend that you look at angular-schema-form-uiselect instead.

nicklasb · 2015-05-13T00:11:32Z

Just out of interest, why does it matter if it is a button? Or something else?

nicklasb · 2015-05-13T00:14:35Z

Oh, I realized now what you meant.

subhendupsingh · 2015-05-13T00:21:21Z

Angular schema form uiselect and dynamic select won't work together because
of the button implementation. What can I do as a workaround?
On May 13, 2015 5:44 AM, "Nicklas Börjesson" [email protected]
wrote:

Oh, I realized now what you meant.

—
Reply to this email directly or view it on GitHub
#15 (comment)
.

nicklasb · 2015-05-13T00:24:40Z

That sounds strange. In what way does the usage of buttons in ASFDS and the use of div:s in ui-select conflict? I am sorry if I am a bit daft, but I don't get it?

nicklasb · 2015-05-13T00:36:13Z

The reason it is implemented that way in ASFDS is because that is the way the angular-strap select is invoked: http://mgcrea.github.io/angular-strap/#/selects-usage

I would be strange if two different classes of HTML elements interacted like that.

In what way doesn't it work?

nicklasb · 2015-05-13T13:04:49Z

Ok, so now I went ahead and actually added basic support for ui-select in the develop branch, it turned out to be not that hard, I mixed stuff from the chengz and stevehu-forks and reworket it to work in the stuff in this component.

There are some filter related errors to iron out, but in general, it seems to work pretty well.

nicklasb · 2015-05-13T13:07:32Z

If you want to try out that, just 'bower update angular-schema-form-dynamic-select#develop', unless you work against the git repo directly.

subhendupsingh · 2015-05-13T13:54:04Z

That's really cool. Thumbs up, I will give it a try and let you know.
On May 13, 2015 6:37 PM, "Nicklas Börjesson" [email protected]
wrote:

If you want to try out that, just 'bower update
angular-schema-form-dynamic-select#develop', unless you work against the
git repo directly.

—
Reply to this email directly or view it on GitHub
#15 (comment)
.

subhendupsingh · 2015-05-13T23:27:14Z

Can you please show some code how to apply ui-select to ASFDS, i am new to angular js, i updated the installed the devstream but dont know how to use ui-select.

nicklasb · 2015-05-13T23:46:54Z

First, update again.

Then, the index.html in the root of the library is the demo application. The angular example resides in app.js, I have added two UI-selects there. The second doesn't work properly yet.

nicklasb · 2015-05-13T23:47:30Z

Remember to use #develop, this is only in that branch.

subhendupsingh · 2015-05-13T23:50:17Z

Thanks! :)

subhendupsingh · 2015-05-14T00:06:49Z

I am getting

Cannot GET /directives/decorators/bootstrap/uiselect/uiselect.html

nicklasb · 2015-05-14T00:08:55Z

Are you sure you are using the angular-schema-form-dynamic-select.js in the root, and not the file in /src?

nicklasb · 2015-05-14T00:09:49Z

Because the template caches should be populated with that content.

subhendupsingh · 2015-05-14T00:10:16Z

Yes i am using js in the root

../bower_components/angular-schema-form-dynamic-select/angular-schema-form-dynamic-select.min.js

subhendupsingh · 2015-05-14T00:11:17Z

I will have to use ../bower_components/angular-schema-form-dynamic-select/angular-schema-form-dynamic-select.js

subhendupsingh · 2015-05-14T00:13:14Z

Getting this now:

{{form.title}}
{{select_model.selected.name}} {{(select_model.selected.isTag===true ? form.options.taggingLabel : '')}}
{{select_model.selected.name}} {{(select_model.selected.isTag===true ? form.options.taggingLabel : '')}}

nicklasb · 2015-05-14T00:19:04Z

Ok, I just realized it will not work like that.
Instead you need to git clone the repository to get all the dependencies satisfied in the right place.
Just follow the documentation:
https://github.com/OptimalBPM/angular-schema-form-dynamic-select#example

Then checkout the develop branch, and add the remaining dependencies for ui-select. I have not decided what will be included in the library, but just look in the index.html, and check so that all those scripts and css:es are available.

nicklasb · 2015-05-14T00:21:54Z

These additional libraries should get you going:

underscore
angular-underscore
angular-ui-utils
angular-translate
angular-ui-select

nicklasb · 2015-05-14T08:40:30Z

I will add those I deem relevant to the dependencies in the bower.json after I have cleared up what is actually needed.

subhendupsingh · 2015-05-17T03:15:13Z

Included all the dependencies, now getting

Error: [$injector:unpr] Unknown provider: highlightFilterProvider <- highlightFilter

subhendupsingh · 2015-05-17T03:35:14Z

I have included ngSanitize too. Any idea about this?

subhendupsingh · 2015-05-17T03:37:30Z

I was getting /directives/decorators/bootstrap/uiselect/uiselect.html, so i made the directory structure in my app and put uiselect.html there, then i started getting

Error: [$injector:unpr] Unknown provider: highlightFilterProvider <- highlightFilter

nicklasb · 2015-05-17T09:21:10Z

Oh, sorry, you need to in stall angular-ui-utils:

bower install angular-ui-utils

nicklasb · 2015-05-17T09:33:33Z

Yes, angular-sanitize is needed too, basically, you can see what dependencies there are in the index.html. If they are all satisfied, it should work.

nicklasb · 2015-05-17T09:35:01Z

I do suspect, however, that some of these dependencies are not completely necessary, however I am not sure how strict I should be about that.

nicklasb · 2015-05-17T16:22:54Z

@subhendupsingh , if you do a git pull now, the uimultiselect works as well. There was a bug in the original implementation.

nicklasb · 2015-05-17T22:18:34Z

Well, that part haven't changed, as far as I can see. I have not changed any of the callback in my example.
Also, you are putting a .then on the documentsData-call. Which is not correct if it isn't a promise.
It seems pretty reasonable that something is undefined when that is the case.

subhendupsingh · 2015-05-17T22:18:57Z

Used the method you suggested with asyncCallback, still getting:

Cannot read property 'forEach' of undefined

nicklasb · 2015-05-17T22:19:43Z

How does your code look now?

subhendupsingh · 2015-05-17T22:19:52Z

actually it is $http.post service and i have read somewhere that $http returns promise by default. Thats the reason i used it that way.

nicklasb · 2015-05-17T22:20:29Z

The last thing I didn't understand.

subhendupsingh · 2015-05-17T22:20:44Z

form[i].options = {
"asyncCallback": "getCurrency"
};

and

$scope.getCurrency=function(options){
var defer=$q.defer();
DocumentsDataService.documentsData("CURRENCY",null,null, function(result){
var currencyArray = []
if(result!=null && result!=''){
for(i in result){
currencyArray.push({
"value": result[i].isocode,
"name": result[i].name
});
}
}
console.log(currencyArray);
defer.resolve(currencyArray);
});
return defer.promise;
};

nicklasb · 2015-05-17T22:25:32Z

Well, the defer.resolve must be inside the callback, or it'll never be called:

$scope.getCurrency=function(options){
    var defer=$q.defer();
    DocumentsDataService.documentsData("CURRENCY",null,null, function(result){
        var currencyArray = [];
        if(result!=null && result!=''){
            for(i in result){
                currencyArray.push({
                    "value": result[i].isocode,
                    "name": result[i].name
                }
             }
        }
        console.log(currencyArray);
        defer.resolve(currencyArray);
    });


    return defer.promise;
    };

Also, I cannot test this code, it is just a suggestion.

nicklasb · 2015-05-17T22:27:43Z

Also, do not look at e-mails, look here at github, as I (and most others) often edit messages for a short while after posting
.

subhendupsingh · 2015-05-17T22:28:28Z

This is the code from my service do i need to return a promise from here?

if(mode=='CURRENCY'){
                    endpoint=API_CURRENCY_ENDPOINT;
                    return $http({method: "GET",url: endpoint})
                        .success(function(result){
                            //console.log(result);
                            loginCb(result);
                        })
                        .error(function(result){
                            //console.log(result.data);
                            loginCb(result);
                        });
                }

nicklasb · 2015-05-17T22:37:01Z

You are mixing two things that should not be mixed here, synchronous callbacks and asynchronous promises.

I would recommend that you do not use a callback, and do not implement the .success and .error. (especially as the error is ignored)
Just return the $http-promise to $scope.getCurrency and implement it like this.

$scope.getCurrency=function(options){
    var defer=$q.defer();
    DocumentsDataService.documentsData("CURRENCY",null,null).then( function(result){
        var currencyArray = [];
        if(result!=null && result!=''){
            for(i in result){
                currencyArray.push({
                    "value": result[i].isocode,
                    "name": result[i].name
                }
             }
        }
        console.log(currencyArray);
        defer.resolve(currencyArray);
    });


    return defer.promise;
    };

If you someday feel you need control in DocumentsDataService.documentsData, like for caching and to on, implement that as well asynchronously, it is the way it is done in javascript.

If you want to make it really simple, use the options.httpGet shorthand combined with the remapping functionality, actually the example is exactly your use case:
https://github.com/OptimalBPM/angular-schema-form-dynamic-select#property-mapping

nicklasb · 2015-05-18T05:36:51Z

Ok, I have found that there are several bugs in the current version of the ui-select component that affect this component, and they appear when I set an initial value:

This has been resolved but hasn't been released: Issue: TypeError: Cannot read property 'length' of undefined at ctrl.getPlaceholder angular-ui/ui-select#519
TypeError: Cannot read property 'indexOf' of undefined
I don't really understand the proposed solution here: Async data tons of errors in console angular-ui/ui-select#380

nicklasb · 2015-05-18T09:43:45Z

Hold on, I am rewriting the implementation to make it simpler to understand.
It seems that the library I used as a baseline for my implementation does a lot of things that isn't necessary anymore, and that is probably part of the problem.

subhendupsingh · 2015-05-18T09:46:22Z

That would be great.
On May 18, 2015 3:13 PM, "Nicklas Börjesson" [email protected]
wrote:

Hold on, I am rewriting the implementation to make it simpler to
understand.
It seems that the library I used as a baseline for my implementation does
a lot of things that isn't necessary anymore, and that is probably part
of the problem.

—
Reply to this email directly or view it on GitHub
#15 (comment)
.

nicklasb · 2015-05-18T09:48:06Z

Well, I have been swearing over this for two days now, so this is the only way for me to avoid coming back as an insect, karma-speaking. :-)

nicklasb · 2015-05-18T10:58:13Z

I hit some issues, and to not have to basically redo what the base implementation did, I asked them a question about it instead:
angular-ui/ui-select#934

nicklasb · 2015-05-18T13:16:01Z

I have now released 0.9.1. It fixes some of these issues. However UI-select does not work completely yet, it is possible to select multiple identical items in some cases and so on. But perhaps you can use that for now.

subhendupsingh · 2015-05-18T13:25:20Z

What about callbacks? Are they working now?
On May 18, 2015 6:46 PM, "Nicklas Börjesson" [email protected]
wrote:

I have now release 0.9.1. It fixes some of these issues. However UI-select
does not work completely yet, it is possible to select multiple identical
items in some cases and so on. But perhaps you can use that for now.

—
Reply to this email directly or view it on GitHub
#15 (comment)
.

subhendupsingh · 2015-05-18T13:31:56Z

Great i just saw in the examples, you have implemented uiselect with callback.

nicklasb · 2015-05-18T13:32:14Z

Well, there was no problem with callbacks per se, but there was a problem with strapselect that had options, but not "options.multiple = true".

subhendupsingh · 2015-05-18T14:00:23Z

Awesome!

subhendupsingh · 2015-05-18T22:57:03Z

This is weird but i am still getting

[ui.select:items] Expected an array but got '{}'.

nicklasb · 2015-05-18T23:04:05Z

What, from getCurrency?
How does it look now?

subhendupsingh · 2015-05-18T23:21:04Z

To test i am just returning an array object:

$scope.getCurrency=function(options){
                
                var arr=[{"value":"INR","name":"Indian Rupee"}];
         
            return arr;
        }

nicklasb · 2015-05-18T23:33:47Z

And the form part?

subhendupsingh · 2015-05-18T23:37:03Z

yes i have used plain callback.

form[i].type = "uiselect";
                   
                    form[i].options = {
                        "callback": "getCurrency"
                    };

nicklasb · 2015-05-18T23:43:33Z

From where do you get the error? In what source line is it?
Can you trace into the code?

This would be one of those cases where a plnkr.co-example would be very helpful.

That is actually the normal way to handle stuff like this on github these days, it is much faster to debug a running example that exhibits the behavior.

Also, I must be going to bed now. Wait, it looks like you are in Delhi or something, you should too. :-)

subhendupsingh · 2015-05-18T23:48:02Z

your "plain callback" thing got it working 👍

$scope.getCurrency=function(options){
            var arr=[];
            DocumentsDataService.documentsData("CURRENCY",null,null,function(result) {
                if (result != null && result != '') {
                    for (i in result) {
                        arr.push({
                            "value": result[i].isocode,
                            "name": result[i].name
                        })
                    }
                }
            });
            return arr;
        }

Thank you so much for all the help and patience and yes I am in Delhi and will happily go to bed now. Have good night!!

nicklasb · 2015-05-19T05:53:39Z

So DocumentsDataService.documentsData was synchronous after all, and didn't return a promise then?
You had a '.then(function(){...' in the earlier example, so I was certain it did.

No problem, thanks for all the feedback, if it weren't for that, it would have been more difficult.
Your tries
And I wouldn't have implemented ui-select if you hadn't gotten me to rethink that position.

Good night!

nicklasb · 2015-05-19T16:08:39Z

Closing this now, I'll monitor the success of the ui-select-issue so that can be brought up to 100%.

subhendupsingh changed the title ~~How can I implement ui-select or select2 with angular-schema-form-dynamic-select?~~ ui-select or select2 with angular-schema-form-dynamic-select? May 12, 2015

nicklasb closed this as completed May 19, 2015

ui-select or select2 with angular-schema-form-dynamic-select? #15

ui-select or select2 with angular-schema-form-dynamic-select? #15

Comments

subhendupsingh commented May 12, 2015

nicklasb commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

subhendupsingh commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

subhendupsingh commented May 13, 2015

Uh oh!

subhendupsingh commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

nicklasb commented May 13, 2015

Uh oh!

subhendupsingh commented May 13, 2015

Uh oh!

subhendupsingh commented May 14, 2015

Uh oh!

nicklasb commented May 14, 2015

Uh oh!

nicklasb commented May 14, 2015

Uh oh!

subhendupsingh commented May 14, 2015

Uh oh!

subhendupsingh commented May 14, 2015

Uh oh!

subhendupsingh commented May 14, 2015

Uh oh!

nicklasb commented May 14, 2015

Uh oh!

nicklasb commented May 14, 2015

Uh oh!

nicklasb commented May 14, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

nicklasb commented May 17, 2015

Uh oh!

subhendupsingh commented May 17, 2015

Uh oh!