Service Portal - button to filter and refresh widget

[SC4]

Hi. The current OOB widget Topic Content has an input dropdown field with "All", "Articles", "Requests".

I was trying to change the code on the widget but all of the code is based on the input selection and I am very new to Angular, directives, etc.

What would be the best approach? Instead of the dropdown selection, the idea is to click on the Request button and refresh the widget with catalog itens. Same thing for the Request button.

[Barrilito van D · Accepted solution]

Hi SC,

I don't see why you would want to do what you want to do as the filtering out of the box does the same as when you would put it on a button.

But apart from that, try to think more abstract and look at what you already have in the widget that can help you find your solution. I don't know this widget (been a long time working on portals), but if I take a quick look I see that in the view the filter dropdown is build up like this:

<div class="flex-mobile form-inline">
          <label class="label-padding" for="filter_picker_select">${Filter by:}</label>
          <select id="filter_picker_select"  ng-disabled="contentItems.length === 0 && data.filterBy ===''" 
            class="form-control"   
            name="filter_picker_select" ng-model="data.filterBy"
            title="${Filter by}"
            ng-change="getUpdatedContent()"
            aria-label="${Filter by}" 
            ng-options="item.sysId as item.name for item in data.filterOptions"/>
        </div>

What you see is that if the filter changes (ng-change) it calls the getUpdatedContent function in the controller. Looking at the controller you see this method, and that method also stores the filter selected in c.data.action (c.data always refers to something that will be send back to the server), and you see then that it calls the $scope.UpdateContent method below it:

$scope.getUpdatedContent = function() {
        c.data.action = actions.filter;
        $scope.updateContent();
    };

    $scope.updateContent = function() {
        $scope.loading = true;
        $scope.server.update().then(function() {
            $scope.contentItems = c.data.featuredContent.concat(c.data.content);
            $scope.loading = false;
            $timeout(function(){
                $scope.alterTabIndexes();
            },100);
        });
    };

The last function has an update.server function, meaning it will run the server script again of this widget, mostly meaning a refresh and loading data again with in this case the selected filter. 

If you would look at what the filter is, you would see it is either a sys_id of the catalog or knowledge. So knowing that, lookint abstract to this code it only does two things:

• select a filter (a sys id of two known items, catalog or knowledge)
• and if selected call the getUpdatedContent function in the controller

So, if you would want to do sort of the same with two buttons, then make an onclick function on the button that calls the getUpdatedContent function and sets the filter.

If you have not much knowledge on things, then peak around and for instance obeserve in the view these two lines:

        <i id="tab-card" ng-disabled="contentItems.length === 0 && data.filterBy ===''" 
          class="fa fa-th" ng-click="changeView('card')" 

You see that there does seem to be a ng-click, which you may need on the button?

So picking that idea 🙂 try to make a simpte button that calls a new function that does sort of the same.

So add a button to the view like this: (find out the sys_id's first, I just filled in some fictive id):

<button ng-click="getMyNewUpdatedContent('837492639486298365926')">

Then in the controller a your own new function:

    $scope.getMyNewUpdatedContent = function(filter_sys_id) {
        c.data.action = filter_sys_id;
        $scope.updateContent();
    };

This would be a very simple first step to start understanding doing something in the view, calling something in the controller and let it re-use existing things.

Hope it helps you making a better start.

[SC4]

First of all, thank you so much for your response, I really appreciate it.

The client wast a very custom portal, I know OOB is the best approach, but its too late for that.

Do you know where can I get like a basic guide in how to start learning Angular and Portal Widgets?

Ill try something out based on the input you provided.

Again, thanks a lot.

[svani]

Hi @SC4 ,

i know its very late, do you please share html , client and server code if your having because i got same requirement to work but only for request not for article.

thanks in advance

[SC4]

Its working now. I just changed one line. Thank you so much.

From:

$scope.getMyNewUpdatedContent = function(filter_sys_id) {
        c.data.action = filter_sys_id;
        $scope.updateContent();
    };

To:

$scope.getMyNewUpdatedContent = function(filter_sys_id) {
        c.data.filterBy=filter_sys_id;
        $scope.updateContent();