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.
Adding, editing, and deleting screens
To open the screen management area, click Mobile App in the left-hand navigation, then select the Screens tab.
From the Screens tab:
To add a new screen, click + Add New.
To edit an existing screen, click the screen name.
To delete a screen, click the 3-dots menu on the screen's row and choose Delete.
Setting a home screen
The screen marked Primary? is the one that appears first when someone opens the app. Only one home screen can be set at a time. To set the home screen, open the screen, toggle the Primary? field on, and click Save.
Designing a screen
When designing a screen (either by adding a new one or editing an existing one), the editor is split into two parts. The left side is the designer, enabling the arrangement of how the screen looks and the setting of what happens when elements are tapped. The right side holds configuration settings for the screen.
The designer offers two views: Action View and Design View.
Use Design View to edit how the screen looks. Click a section of the screen to open the Properties sidebar, to specify what happens when a user taps on that item (an image, list item, button, etc.).
These fields are available on every screen:
Name - the name of the screen. It appears in the top navigation bar within the app.
Template - the template used for the screen. Different templates expose different fields. The available templates are described below.
List
The List template presents a selection of items. Each item triggers a defined action when tapped. Several layouts are available to customize the list's appearance.
The screen is split into an optional image carousel at the top and the list below. See Image carousels at the bottom of this article for how to enable a carousel on this template.
The four list layouts:
Text with images - shows an image on the left and a title/subtitle on the right.
Text only - shows a title/subtitle combination for each item; no images.
Image banners - shows only images. Each image is rectangular and can include a "call to action" so users know what happens when they tap it.
Grid - shows images and text organized in a 2-column grid. The text is optional and the images should be squares.
Once a layout is chosen, start adding content. To add a new item, click Add list item (or the equivalent block for the chosen layout).
A new list item appears in the editor. Click any text area to edit text directly. Click an image to open the file manager, to choose an uploaded image or upload a new one.
Every list item must have an action specified. If one doesn't, a red caution icon appears on the item.
To specify actions, click a list item. The editor changes to show a dropdown for each item. The available actions are:
URL - the website the user is taken to. The website opens within the app.
Screen - the screen the user navigates to. This can be another custom screen or one of the built-in screens that comes with the app.
Form - a custom form for the user to fill out. The form opens within the app. Learn more about designing custom forms.
Content
The Content template uses building blocks - image carousel, text, buttons, and forms - to design a screen. The screen is split into an optional image carousel at the top and a sections list below.
To add a new section, click Add section in the designer. The available section types are:
Text - multi-line text. The text cannot be styled but can be split into paragraphs.
Buttons - a grid of 1- or 2-column buttons. Every button must have an action set.
Form - a button the user can tap to submit the selected form.
Form
The Form template displays a custom form. When the screen is shown in the app, the selected form appears.
URL
The URL template displays a web address. When the screen is shown in the app, the URL loads inside the app. The URL must be publicly available online to work correctly.
Tabbed
The Tabbed template creates a screen made up of tabs. Each tab can contain another screen, a form, or a URL. On iOS, the tabs appear along the bottom of the screen. On Android, the tabs appear along the top.
Each tab has an icon and a label. The icons only appear in the iOS version of the app. Once icons and labels are set, switch to Action View to set what each tab points to. Every tab must have an action defined - tabs that don't show a red caution icon.
Image carousels
The List and Content templates support an image carousel at the top of the screen. This option does not appear on any other template.
To add a carousel, toggle the Carousel? field on. An image placeholder appears at the top. Hover over the image and click the pencil icon to open the editor, to add one or more images. The Destination field is optional and controls what happens when a user taps the image - the available actions are the same as for a list item.
Helpful tips
Avoid putting more than 5 tabs on a tabbed screen. If more are needed, make the 5th tab a list screen that holds the remaining options.
After making changes to the home screen (or replacing it), close and relaunch the app on a phone to see the changes.
Images render on phones of various sizes. Don't make text or imagery too small - favor large text and clear visuals.