# Create a custom Session Bar App

**URL:** <https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567>\
**Category:** Ignition Early Access\
**Created:** [June 5, 2019, 5:17am UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567 "2019-06-05T05:17:41Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 5, 2019, 5:17am UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/1 "2019-06-05T05:17:41Z")

</div>

Hi  
The ignition session bar app has very nice animation and effective way to display more info in very compact way.  
I’d like to benefit of that design concept in my project. Is it possible to create it with currently available component and tools in perspective?  
If no, it’s nice to have a new component for it.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 5, 2019, 2:21pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/2 "2019-06-05T14:21:45Z")

</div>

While there is no drop-in Component to place your own “App Bar” (that’s what we refer to it as), you could make something very similar with the existing components.

In essence, you would want the following pieces (Easy and Sustainable method):  
A Docked View which is always Visible.  
This Docked View would have a Component which has a click event (Button is common, but you could use a simple Icon).  
The Click Event would open a Popup X pixels from the bottom, where X is the height of the Popup View plus the height of the Docked View.  
The Popup should not show the close button, should not be draggable, should not be resizable, and SHOULD be a modal, and SHOULD be background dismissible.

Now, that solution locks you into having a Docked View visible at all times, which may not be desirable. You can get the same functionality from placing a button/icon with the prescribed click event in every View, but it would need to be placed in every View you use. IF you go _this_ route, I recommend placing the Button in a very small View, and placing an Embedded View into each View, so that you only need to customize the Button in one place for any changes to take effect.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 6, 2019, 3:31am UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/3 "2019-06-06T03:31:22Z")

</div>

Thanks. By the way do you have any plan to add such component in future? Or able to customize the current one by dding additional information?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 6, 2019, 1:31pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/4 "2019-06-06T13:31:13Z")

</div>

Not to my knowledge. As far as I know, outside of logging in and out the App Bar is primarily there for diagnostic use and support reference; so it’s already doing everything it needs to do.

---

<div class="post-metadata">

**Author:** ![maja](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@maja](https://forum.inductiveautomation.com/u/maja)\
**Post date:** [March 20, 2020, 12:24pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/5 "2020-03-20T12:24:46Z")

</div>

Is it possible to achieve an effect similar to the app bar, to have e.g. an icon that is always in the same position and on the top of the view context. Which is most noticeable when it comes to the slider page. I was trying to achieve it with position: sticky but without results. One more question, is it possible to achieve transparent background ?

Thanks!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 20, 2020, 3:02pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/6 "2020-03-20T15:02:54Z")

</div>

`background-color: transparent` Done. Note, however, that you can do this to components and containers, but it will not be applied to Docked View containers or Popup containers.

As for the rest of your question, I’m not really sure what it is you’re asking.

There is only one way right now ways to overlay components in Perspective:

1. Coordinate Container layout, and you manage the z-indexing of the components. You control the positioning and z-index, so overlay is easy.

---

<div class="post-metadata">

**Author:** ![maja](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@maja](https://forum.inductiveautomation.com/u/maja)\
**Post date:** [March 20, 2020, 3:24pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/7 "2020-03-20T15:24:22Z")

</div>

Transparent background, I was thinking of Popup containers.  
Rest of the question, as an app bar icon (handler), it’s always on top (when we’re scrolling the view, the context of the page is behind the app bar). Ok, I can see from your answer that it can’t be achieved.

Thank you very much!

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [March 21, 2020, 1:46pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/8 "2020-03-21T13:46:23Z")

</div>

you can achieve it by viewcanvas or css3 left, top, command with x,y set to auto in xy coordinate

---

<div class="post-metadata">

**Author:** ![rcrownover](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rcrownover/32/17805_2.png) [@rcrownover](https://forum.inductiveautomation.com/u/rcrownover)\
**Post date:** [April 6, 2020, 8:14pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/9 "2020-04-06T20:14:40Z")

</div>

What’s the timeline on Perspective supporting transparent popup backgrounds?  
🙈🙉🙊

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [February 15, 2021, 9:04pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/10 "2021-02-15T21:04:48Z")

</div>

> [@rcrownover](#):
>
> transparent popup backgrounds

Yes please!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 15, 2021, 10:11pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/11 "2021-02-15T22:11:25Z")

</div>

You can do this currently with adjustments to the theme file, and in conjunction with the View being used in the popup.

You need to do two things:

1. The root of the View should have `props.styles.backgroundColor` set to a value of `transparent`.
2. locate the themes directory of your Perspective module and locate `themes/light/app/popup.css`. You’ll want to modify an entry in this file (or _overwrite_ in your own custom theme).

You want to change this entry:

```auto
.ia_popup {
    background-color: var(--container);
    box-shadow: var(--boxShadow5);
    border: var(--containerBorder);
}

```

To this:

```auto
.ia_popup {
    background-color: transparent;
    box-shadow: var(--boxShadow5);
    border: var(--containerBorder);
}

```

With these settings in place, I was able to render the following popup:  
 ![Screen Shot 2021-02-15 at 2.10.24PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91aefa4d544b26802d6672df0b7b825292a98760.png)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [February 16, 2021, 6:11am UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/12 "2021-02-16T06:11:02Z")

</div>

Could you please guide me how to change the color of title bar of a popup?  
Specially I need following manipulation of title bar:  
Font size, color and type  
Height size  
Background

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 16, 2021, 4:46pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/13 "2021-02-16T16:46:51Z")

</div>

Applying these settings allowed for me to modify the appearance of my Popup header, but you’ll need to be careful; my use of hard-coded pixel values can result in situations where the popup looks bad, because the desktop appearance could be fine, but maybe a mobile user finds the header too big.

```auto
.ia_popup__header {
    background-color: var(--div-10);
    color: var(--neutral-90);
    border-bottom: var(--containerBorder);
    font-size: 0.875rem;
}

.ia_popup_header .close-icon .material-icons{
	width: 20px;
	height: 20px;
}

.popup-header {
	height: 60px;
	font-family: monospace;
	font-weight: "bold";
}

```

The Popup header is one spot where the early iterations of Perspective did not expect users to change the appearance, and so it looks like we have some hard-coded positional settings in place. The close icon, for example, is always set to be `0.5rem` from the top and right of the popup header. To implement any sort of relative positioning you’ll need to include a rule to override the close icon settings and apply your own (not these values, but something similar):

```auto
.close-icon {
    top: 1%;
    right: 1%;
}

```

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [February 18, 2021, 5:31am UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/14 "2021-02-18T05:31:18Z")

</div>

In popup \light\app\popup.css I only find .ia\_popup\_\_header and .ia\_popup classes, so how should I know anything about .close-icon .material-icons or .popup-header?

It is nice if you document all these hidden classes in a separate help file in the theme directory or create a theme section in the online help resource.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 18, 2021, 3:34pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/15 "2021-02-18T15:34:16Z")

</div>

This is something you would only know about by inspecting the popup in a browser session. Documentation wouldn’t be the _worst_ idea, but could also be very dangerous. anyone modifying ONLY a class like `.material-icons` could potentially mess up their entire project because that class is used many places outside of popups. The lack of documentation is “intended” to force users to study advanced CSS rules and techniques before wading into this slightly dangerous area of modifying their project.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [February 18, 2021, 6:32pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/16 "2021-02-18T18:32:39Z")

</div>

So it is better to have separated class for different part of popup and make access to them in desinger style property of Popup.  
From Aesthetics point of view it is really important for desinger to have control over then.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 18, 2021, 7:07pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/17 "2021-02-18T19:07:28Z")

</div>

> [@nader.chinichian](#):
>
> From Aesthetics point of view it is really important for desinger to have control over then.

I agree 100%, but this is code which was in place from the Beta of 8.0. Way back then we were working to make components and pieces usable. We're now in the process of making them more customizable (like with the 8.0.13 introduction of organized themes). It's going to be a process, and we can only do so much at a time without breaking existing projects.

---

<div class="post-metadata">

**Author:** ![salbrechtsen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/salbrechtsen/32/18660_2.png) [@salbrechtsen](https://forum.inductiveautomation.com/u/salbrechtsen)\
**Post date:** [February 23, 2021, 10:20pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/18 "2021-02-23T22:20:44Z")

</div>

Is there a way to remove the blue outline around the popup when it is selected? When spawning a popup it always has that blue outline until somewhere else is clicked.

---

<div class="post-metadata">

**Author:** ![salbrechtsen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/salbrechtsen/32/18660_2.png) [@salbrechtsen](https://forum.inductiveautomation.com/u/salbrechtsen)\
**Post date:** [February 23, 2021, 10:32pm UTC](https://forum.inductiveautomation.com/t/create-a-custom-session-bar-app/25567/19 "2021-02-23T22:32:34Z")

</div>

I added this to my popup.css and it removed the blue outline

```auto
.ia_popup:focus {
	outline: 0;
}

```