# Can't remove item from action bar

**URL:** <https://community.cumulocity.com/t/cant-remove-item-from-action-bar/4964>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [May 31, 2022, 8:18am UTC](https://community.cumulocity.com/t/cant-remove-item-from-action-bar/4964 "2022-05-31T08:18:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marija.stefanjuk](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@marija.stefanjuk](https://community.cumulocity.com/u/marija.stefanjuk)\
**Post date:** [May 31, 2022, 8:18am UTC](https://community.cumulocity.com/t/cant-remove-item-from-action-bar/4964/1 "2022-05-31T08:18:20Z")

</div>

#### What product/components do you use and which version/fix level?

1011.0.12

#### Are you using a free trial or a product with a customer license?

#### What are trying to achieve? Please describe in detail.

I would like to remove action bar item from Cockpit app, specifically “Add group” button on Groups page.  
I tried it with extending ActionBarService but I didn’t succeed.  
This is snippet of my code:

```auto
@Injectable({
    providedIn: 'root'
})
export class CustomActionBarService extends ActionBarService{
    constructor(injector: Injector, router: Router){
        super(injector, router);
        this.items$ = this.items$.pipe(
            tap((actions) => console.log("actions ", actions)),
            map(actions => {
                return actions.filter(({ template }) => {
                    let ele = template;
                    if(template._projectedViews) {
                        ele = template._projectedViews[0].nodes.find(view => !!view).renderElement;
                    } else {
                        return true;
                    }
                    return !ele.querySelector("button[title='Add group']");
                })
            })
        );
    }
}

```

#### Do you get any error messages? Please provide a **full error** message screenshot and log file.

Button is still there.

Am I missing something? Is there another way to implement this?  
Thank you

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 31, 2022, 10:13am UTC](https://community.cumulocity.com/t/cant-remove-item-from-action-bar/4964/2 "2022-05-31T10:13:08Z")

</div>

Hi Marija,

Your filter is not working since the attribute `_projectedViews` is not actually existing on the object at the point in time when you are filtering. It is added later on to the object.

There are two other options I see:

1. You could just hide the button via CSS
2. You could override the `SubAssetsService` to at least disable the button (if that is sufficient for you) like so:

```auto
import { Injectable } from '@angular/core';
import { SubAssetsService } from '@c8y/ngx-components/sub-assets';

@Injectable({
  providedIn: 'root'
})

export class CustomSubAssetsService extends SubAssetsService {
  canCreateGroup(): boolean {
      return false;
  }
}

```

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [August 29, 2022, 10:13am UTC](https://community.cumulocity.com/t/cant-remove-item-from-action-bar/4964/3 "2022-08-29T10:13:09Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.