Creating an App Header

Introduction

The App Header sits at the top of your application and is viewable on each page. Creating and customizing your App Header is a way for you to brand your entire experience and provide help resources to your customers, should they need it. In this lesson we will walk through configuring an app header and assistance button.

Steps to Create Your App Header

To start, navigate to App Builder and go to your applications Layouts. Click on the + button on the Main Content Container and Add a new container named App Header

Configure the App Header container to have a horizontal layout. Select space-evenly, and center. This will ensure that the content inside the container will sit side by side. Since we only have our single image (for now) it will show in the center of the Canvas.

Additionally, we can adjust the size of the image so it scales with the Canvas. For our logo, we are setting a Maximum Width of 20%. As the device size scales up or down, the header image will also scale up and down in size.

Next, we’re going to add our Assistance button. Our assistance button will be a logo of an agent, and we want to be able to click this image, so we’re going to add a Button Cell to our App Header container. A Button Cell container acts like a normal container but it has a click action. This click action allows you to create dynamic and creative buttons for your users.

Continue and add the agent image to the newly created Button Cell.

Rename the Button Cell to Assistance Button, and rename the image control to Agent Image. Renaming these will help us better identify them in the tree. Afterwards, add a small amount of padding to the App Header container to create space around your images.

You've now finished configuring the look and feel of your App Header. Clicking on your card views will show you how the App Header will be displayed in relation to the rest of your content. After tweaking the App Header to get it exactly right for your application, you should configure the Agent Assistance action.

While you can configure your assistance button to perform any Airkit action, A typical workflow is to have an assistance page in your application that provides resources to your consumer. First, you’ll create a new Card + Card View. Click on the + button at the top of the tree to add a new card, then select the new Card’s + button and create a new Card View. For now, let’s name both of these as Need Assistance.

Finally, we can connect an action to our assist button to open our Needs Assistance Card. Go back to the actions on the Assistance Button. After navigating, add an Open Modal action.

If you have multiple layouts, you can copy your App Header container to any of those additional layouts. To learn more about the basics of App Building, head over to First App Guide!