You will need the Full Write App permission to perform these actions. Your One Church Software subscription also needs the App Builder add-on to access this area.
One Church Software comes with an app builder for customizing parts of the mobile app, including screens and menus. To add the App Builder to a subscription, open Settings & Tools (cog icon in the tool-bar), select Billing, and edit the subscription to include the add-on.
A screen is one page of your app. It is made up of blocks stacked down the page, and each block is a piece of content such as a heading, a set of buttons, or a list. You arrange the blocks, and the app draws them.
The canvas
Screens are managed at Mobile App > Builder. The canvas shows every screen in the version you are viewing, drawn as a small phone, with lines running between them wherever one screen links to another. It is a map of the app rather than a list, so you can see at a glance where a member can get to from where.
Colored dots above the canvas label what each card is:
Home Screen - the screen the app opens on.
Form - a screen showing one of your forms.
Feature / Built-In Screen - a screen that comes with the app, such as giving or sermons.
Web URL - a screen that loads a web page inside the app.
Menu - the navigation menu.
The screen currently set as the home screen carries a Home marker beneath its card. Screens that nothing links to are gathered together under Not reachable from Home, which is a quick way to spot a screen a member has no way of opening.
Add a screen
New screens are created from the canvas itself rather than from a button in the toolbar.
Right-click any empty part of the canvas background.
Choose + Add Screen.
Give the screen a Name. This appears in the navigation bar at the top of the screen in the app, so name it the way a member would read it.
Add the blocks you want on the screen, then click Save.
Tip: The canvas carries a reminder of this. A hint along the top reads Tip: To add a new screen, right click on the background canvas.
Open, rearrange, and remove screens
Double-click a screen card to open it for editing. For everything else, click the 3-dots menu in the corner of the card:
Edit - opens the screen so you can change its name and its blocks.
Go to screen - moves the canvas to center on that screen.
Insert above and Insert below - add a new screen next to this one.
Delete - removes the screen.
Warning: Deleting a screen also breaks anything pointing at it. Check the lines running into the screen on the canvas before you remove it, and repoint those buttons or menu items afterwards.
Designing a screen
Opening a screen brings up an editor built around a picture of a phone. What you see there is close to what a member sees, and you work directly on it.
Click a block to open its properties and change its wording, images, and where it goes when tapped.
Drag a block to move it up or down the screen.
Hover between two blocks and click the + that appears to slot a new block in at that point.
Click + Add Block beneath the last block to add one at the bottom.
The blocks you can add
Click + Add Block to see everything available. The list is split into two groups.
Inline blocks can be combined freely, in any order and any number, on the same screen:
Text - a passage of plain text. Use it for an explanation or a short description.
Heading - a title with an optional subtitle, used to introduce what sits below it.
Button Grid - buttons laid out in a grid. Every button needs somewhere to go.
Action Button - a single wide button, for the one thing you most want tapped.
Item List - a list of rows, each with text and an optional image, and each going somewhere when tapped.
Carousel - images a member can swipe sideways through.
Image List - images stacked down the screen, each able to link somewhere.
Screen level blocks take over the entire screen:
Form - shows one of your forms. Learn more about designing custom forms.
Tabs - splits the screen into tabs, with each tab holding another screen, a form, or a web address.
URL - loads a web page inside the app. The address has to be reachable publicly for it to load.
Tip: The builder explains the rule where you choose the block: A Screen Level block fills the whole screen, so it must be the only block on its screen. It can't be combined with any other block. If you want a heading above a form, put the heading on a different screen that links to it.
Working with a block
Each block has a 3-dots menu along its edge:
Edit - opens the block's properties.
Copy - duplicates the block below itself, which saves setting up a second one from scratch.
Insert above and Insert below - add a new block next to this one.
Delete - removes the block from the screen.
Nothing is saved until you click Save
The screen editor holds your changes as a working copy. Blocks you add, wording you change, and blocks you delete only reach the app when you click Save. Clicking Cancel throws the whole lot away and leaves the screen as it was, which makes the editor a safe place to try something out.
Saving also checks the screen over. If a block is unfinished, the save stops and the message Please fix the highlighted errors before saving. appears, with the blocks at fault marked. A button or list item with nowhere to go, for example, reports A destination is required.
When everything checks out, a confirmation reads Successfully saved screen. and the canvas updates.
Setting the home screen
The home screen is the one members land on when they open the app. To change it, open the screen you want and tick Set as the app home screen, then click Save.
The checkbox cannot be unticked on the screen that is already the home screen, and the builder explains why: To change, make another screen the home screen. The app always needs somewhere to open, so you replace the home screen rather than remove it.
Helpful tips
Keep tabbed screens to four tabs where you can. From five upwards the app folds the extras behind a More tab, which puts them a tap further away.
Check a screen on a phone before you publish it. How do I preview my app on a phone before publishing? covers how.
After changing the home screen, close and relaunch the app on a phone to see the change.
Images are shown on phones of every size. Favor large text and clear imagery over fine detail.