Using Power Cells in QB mobile apps

Introduction

QB apps contain components to add to a screen such as

• Horizontal list

• Grid

• List

• Hero

These components are plugins and need to be present in the app to be able to use the component.

Power cell plugins are then used to add cells to a component. All the styling of a cell is contained within UI Builder, QB apps do not use SDK styling keys for colors, fonts etc.

There are currently 4 Power Cells that lend themselves to certain component types. The plugins must be present in an app to be able to use them

• Cell 1 Mobile - Image sits above text. Typically used with a Grid or Horizontal List component.
• Cell 2 Mobile - Image sits beside text. Typically used with a List component.
• Cell 3 Mobile - Image sits behind text. Typically used with a Hero component
• Cell Info Mobile - specifically for headers and footers and decorative components in a group

1. Add the Component and Cell Mobile plugins to your app

2. Select Cell Style Builder Framework for your layout

Make sure when you first create your layout to select the "Cell Style Builder" option for the framework. You can't go back and select this option to an already created layout.

3. Add the plugin to your layout

Go to the Cell Styles Tab in UIBuilder

This tab only appears in UI Builder if you have done step 2 above.

 Click on the "CELL STYLES" tab, and click on "+ New Cell Style" button in the bottom-left corner

Select which ever Power Cell you want to use e.g. Cell 1 Mobile

4. Rename your instance of the plugin

Whilst still in the Cell Styles tab of UI Builder select the Quick Brick Master Cell instance you have just added in step 4.

On the UI Builder right hand panel click the 3 dots by the name Cell 1 Mobile and select Edit Info

Rename your Power Cell and give it a description so that it is clear where it is intended to be used then save

5. Configure your cell using the settings in UI Builder right hand panel.

There are a lot of configuration parameters but this is the power of Power Cells!

Go to the respective pages for each power cell in the help documents

Power Cell 1

Power Cell 2

Power Cell 3

6. Use your Power Cell to replace a standard component’s cell design

In any screen add your Components of Grid, List, Hero etc. with data sources attached

Then go to Cell Styles (bottom right) and click select

You will now see a list of any Power Cells you have created in steps 3 through 9

Select the one you want and click save in UI Builder

You have now replaced the standard cell design with your Power Cell.

Go and check it out on a device

Repeat for any other component

7. Create and use another Power Cell style in the same layout

If you need another instance of the Power Cell with different styling settings then repeat steps 3 to 6 (giving it a different name of course)

In this layout example 3 different Power Cells each with different style settings have all be created from the single Quick Brick Master Cell plugin installed in the app.