openmrs-list angular component not working for me

I am trying to use the openmrs-list component in my owa. I am following the example in conceptdictionary owa. I have added this to my view

<openmrs-list resource="vm.resource" columns="vm.columns" actions="vm.actions" list-all="true" limit="vm.limit" disable-links="vm.disableLinks">

And in my controller I have this

//Properties for list component
    vm.resource = "conceptclass";
    vm.disableLinks = true;
    vm.limit = 10; //Default value
    vm.columns= [
        {
            "property": "name",
            "label": "Name"
        },
        {
            "property": "description",
            "label":"Description"
        },
        {
            "property": "uuid",
            "label": "UUID"
        }];
    vm.actions = [
        {
            "action":"edit",
            "label":"Edit",
            "link":"#/class/{uuid}"
        },
        {
            "action":"retire",
            "label":"Retire"
        },
        {
            "action":"unretire",
            "label":"unretire"
        }
    ];

I actually copied that from the conceptdictionary owa just to see how the component works. But after adding all that I don’t get the table as in the conceptdictionary owa. All I get is this

And the console shows a 404 request to http://localhost:8080/openmrs/ws/rest/v1

Not sure what I’m doing wrong.

It seems like the vm.resource value is not being set correctly in the controller and results in being blank in the view thus the request url is /openmrs/ws/rest/v1 and not /openmrs/ws/rest/v1/conceptclass. Could you please paste the whole content of you controller?

1 Like
class HomeController {
    constructor($routeParams) {
        var vm = this;

        //Properties for list component
        vm.resource = "conceptclass";
        vm.disableLinks = true;
        vm.limit = 10; //Default value
        vm.columns= [
            {
                "property": "name",
                "label": "Name"
            },
            {
                "property": "description",
                 "label":"Description"
             },
            {
                "property": "uuid",
                "label": "UUID"
             }];
        vm.actions = [
            {
                "action":"edit",
                "label":"Edit",
                "link":"#/class/{uuid}"
            },
            {
                "action":"retire",
                "label":"Retire"
             },
            {
               "action":"unretire",
               "label":"unretire"
             }
        ];

        vm.addInsurer = () => {
            console.log("You clicked on add insurer");
        }
    }
}

export default HomeController;

I just copied the contents of the ClassListController from the conceptdictionary owa.

I think the resource is been set fine. Adding this

<h1>{{vm.resource}}</h1>

displays

conceptclass

as expected

Could you please open up the Network tab in the Developer Console in Chrome to see, if the conceptclass resource is being requested?

Could you please share complete source code?

Here is my code. I created a branch openmrs-list.

View

Controller

I checked, it’s not.

Not sure what’s the issue. Interestingly it renders fine, if you click the show retired checkbox.

Maybe using ES6 constructs translates differently from what it looks like in ES5 in conceptdictionary owa…