Rock Mobile Docs
App Factory
  • Welcome 👋
  • 📱Getting Started
    • Building Your First App
      • Creating An App
      • App Configuration
      • Adding Content
      • Deploying Your App
    • Lexicon
  • 🧱Essentials
    • Animations
    • Blocks
      • CMS
        • Content
        • Content Channel Item View
        • Content Collection View
        • Daily Challenge Entry
        • Hero
        • Lava Item List
        • Login
          • Using Auth0
          • Using Entra
        • Profile Details
        • Register
        • Structured Content View
        • Workflow Entry
      • Check-in
        • Check-in
      • Communication
        • Communication Entry
        • Communication List Subscribe
        • Communication View
        • SMS Conversation List
        • SMS Conversation
      • Connection
        • Add Connection Request
        • Connection Type List
        • Connection Opportunity List
        • Connection Request List
        • Connection Request Detail
      • Core
        • Attribute Values
        • Notes
        • Search
        • Smart Search
        • Quick Note
        • My Notes
      • CRM
        • Group Members
        • Person Profile
      • Events
        • Live Experience Occurrences
        • Live Experience
        • Calendar Event Item Occurrence View
        • Calendar Event List
        • Calendar View
        • Event Item Occurrence List By Audience Lava
      • Finance
        • Giving
        • Scheduled Transaction List
        • Transaction Detail
        • Transaction List
      • Groups
        • Group Attendance Entry
        • Group Edit
        • Group Finder
        • Group Member Edit
        • Group Member List
        • Group Member View
        • Group Registration
        • Group View
        • Schedule Preference
        • Schedule Sign Up
        • Schedule Toolbox
        • Schedule Unavailability
      • Prayer
        • Answer To Prayer
        • My Prayer Requests
        • Prayer Card View
        • Prayer Request Details
        • Prayer Session
        • Prayer Session Setup
      • Reminders
        • Reminder Edit
        • Reminder List
        • Reminder Dashboard
      • Security
        • Onboard Person
    • Codex
      • Application Strategy
      • XAML Styling
      • Resources
      • Documentation
    • Commands
      • Communication Commands
      • Navigation Commands
      • Media Commands
      • Utility Commands
    • Controls
      • Behaviors
        • Event To Command Behavior
        • Touch Behavior
      • Content Controls
        • Activity Indicator
        • Application Info
        • Avatar
        • Bible Audio
        • Bible Browser
        • Bible Reader
        • Campus Context Picker
          • Camera Code Reader
        • Cards
          • Block Card
          • Contained Card
          • Inline Card
          • Elements of a Card
          • Masks
          • Styling Cards With CSS
        • Context Menu
        • Countdown
        • Cover Sheet
        • Divider
        • Expander
        • Field Container
        • Flip View
        • Following Icon
        • Geo Boundary View
        • HTML
        • Icon
        • Icon Button
        • Image
        • Interaction
        • Items Collection
        • Login Status
        • Login Status Photo
        • Lottie View
        • Markdown
        • Media Player
          • Legacy
        • Notification Box
        • Paragraph Text
        • QR Code
        • Ratio View
        • Redirect
        • Responsive Column
        • Responsive Layout
        • Scroll View
        • Segment Picker
        • Styled Border
        • Styled View
        • Tag
        • Toggle Button
        • Web View
      • Developer Controls
        • Execute Command
        • Bible Book And Chapter Picker
        • Command Reference
        • Field Stack
        • Media Cast Button
        • Media Progress Bar
        • Parameter
        • Scan Code
        • Validator
        • Volume Control
        • Zone
      • Effects
        • Blur Effect
        • Safe Area Padding Effect
      • Form Fields
        • Attribute Value Editor
        • Address
        • Campus Picker
        • Check Box
        • Check Box List
        • Currency Box
        • Date Picker
        • Email Box
        • Literal
        • Marital Status Picker
        • Multi Picker
        • Number Box
        • Phone Number Box
        • Picker
        • Text Box
        • Text Editor
      • XAML Extensions
        • Boolean Value Converter
        • From Json
        • Inverse Boolean Converter
        • Nullable Guid Converter
        • On Device Platform
        • On Device Type
        • Palette Color
        • Seconds To Time String Converter
    • Field Types
    • Lava
      • Context in Lava
    • Performance
    • Tips and Tricks
      • Custom Site Attributes
      • Migrating to .NET MAUI (V6)
      • Page Anchors
    • Troubleshooting
    • Advanced Topics
      • Dynamic Content
      • Deep Linking
  • 🎨Styling
    • Introduction
    • Style Guide
      • Walkthrough
      • Colors
      • Typography
      • Utilities
      • Shell Components
      • Migrating
    • Legacy
      • Colors
      • Borders
        • Border Color
        • Border Radius
        • Border Width
      • Text
        • Background Color
        • Text Size
        • Alignment
        • Color
        • Line Height
        • Weights & Styles
      • iOS Shadows
      • Styling Components
        • Tags
        • Bible
        • Button
        • Form Fields
        • Modals
      • Custom CSS
  • 👨‍💻Developers
    • Fundamentals
    • Core & Shell Dependencies
    • Custom Blocks
    • OS Version Requirements
  • 🏭App Factory
    • Overview
    • Android Keystore
    • App Store Product Page
    • Developer Accounts
    • Image Resources
    • In-App Giving
    • Publishing Requirements
    • Push Notifications
    • Rock Logins
    • Shell Update Requirements
Powered by GitBook

Resources

  • Release Notes
  • Community Chat
  • Ask Chip

Documentation

  • Rock Manuals
  • Lava

⚙️ Powered by Rock RMS

On this page
  • Spacing
  • Device Type Customization
  • StringFormat Data Binding
  • YouVersion Bible App Links
  • Push Notification State
Export as PDF
  1. Essentials

Tips and Tricks

Spacing

Be aware that many layouts have default spacing parameters. If things don't line up correctly you may have to remove this default spacing.

Be warned that much of the styling of Rock Mobile has been done with the default spacing in mind. If you disable it you may notice that many controls are closer than usual. When you disable spacing you may find yourself swimming upstream.

For example, StackLayouts have a default Spacing property set to 10. This means each control within the layout will have a 10-unit space between it and its neighbor. For a StackLayout, the spacing will be relative to its Orientation property. When set to Horizontal it will be horizontal spacing, Vertical would be vertical spacing.

Other layout controls also have this same behavior. Below is a list of others (this is not meant to be an inclusive list).

  • Grid - Has default RowSpacing and ColumnSpacing values

  • ResponsiveLayout - Has a default ColumnSpacing value

  • Frame - Has a default Padding of 10

Device Type Customization

As you assign values to properties you may want to have different values for a phone vs. a tablet. This is often the case when working with the sizes of images and cards (via the Ratio properties). Providing different properties is possible using the syntax below.

<Label Text="{Rock:OnDeviceType Phone='I am a phone!', Tablet='I am a tablet!'}" 
    Margin="{Rock:OnDeviceType Phone='20, 20, 20, 20', Tablet='0, 0, 0, 0' }" />

<Image Source="https://yourserver.com/photo.jpg" 
    Ratio="{Rock:OnDeviceType Phone=4:3, Tablet=4:2}" />

If you'd like to change more than just a property, and instead provide different markup, you can use the controls below.

 <Rock:OnDeviceType>
    <Rock:OnDeviceType.Phone>
        <BoxView Color="Red" HeightRequest="10" />
    </Rock:OnDeviceType.Phone>
    <Rock:OnDeviceType.Tablet>
        <BoxView Color="Blue" HeightRequest="10" />
    </Rock:OnDeviceType.Tablet>
</Rock:OnDeviceType>

StringFormat Data Binding

From time to time, you’ll find yourself needing to Bind data as part of a string. You may be tempted to just throw your Binding in the middle of the string as you would in Lava, but you’ll be disappointed as nothing will show up. This is where StringFormat comes into play.

<Label Text="{Binding Name, StringFormat='Hey there {0}!'}" />

In this case, the Key we are Binding to is Name and we want it to output “Hey there Ted!”. We use {0} to insert our Binding Value into the string where we want it to show up.

YouVersion Bible App Links

The YouVersion Bible app provides deep linking for many of the resource types they have available. We won't cover the full breadth of options here, but this will get you started. If someone has the Bible app installed, these resources will be opened natively in the app, falling back to the external browser experience if necessary.

Here's a button snippet you can copy for quick additions to your app:

<Button Text="Bible App"
    StyleClass="btn, btn-primary"
    Command="{Binding OpenExternalBrowser}"
    CommandParameter="https://www.bible.com/" />

Bible Reference

Type
URL Pattern

Book

https://www.bible.com/bible/59/GEN.1

Verse

https://www.bible.com/bible/59/GEN.1.1

Multi-verse

https://www.bible.com/bible/59/GEN.1.1-4

Reading Plan

https://www.bible.com/reading-plans/16169

Video

https://www.bible.com/videos/25490

Podcast Episode

https://www.bible.com/podcasts/395/episodes/59548

Push Notification State

You may want to determine on a page if Push Notifications are enabled and ready for use so that you can prompt the user to enable them. For example, if you have a page that lets the user sign up to receive push notifications about an upcoming event, you might want to make sure notifications are enabled - or at least tell the user they have disabled them. We provide two values in your AppValues model to detect these states.

  • core_PushNotificationHasBeenRequested - This will be a True boolean value if the user has ever been prompted to enable push notifications. Otherwise, it will be False.

  • core_NotificationsAreEnabled - This will be a True boolean value if notifications are determined to be enabled on the device. Otherwise, it will be False.

In the example below, we are manually building an if-else block by making use of the IsVisible properties. The first StackLayout will be shown if the user has never been asked to enable push notifications. The second StackLayout will be shown if the user has been asked but either denied or disabled notifications. The third and final StackLayout will be shown if they have been both asked and have notifications enabled.

Additionally, the first block will let them click a button to enable notifications. The second block has a button they can click to go to Settings and turn notifications back on.

You might wonder why we are doing it this way even though the AppValues are accessible via Lava. The reason to use bindings like this is so the UI is reactive. Suppose they have manually turned off notifications. The second block will show prompting them to go to settings and re-enable them. The user clicks the button, goes to settings and turns notifications back on, and then returns to the application. As soon as the app loads it will update the AppValues which will trigger the Binding to update and hide the second block and show the third block instead. All without having to actually reload the page.

Example

<!-- if -->
<StackLayout IsVisible="{Binding AppValues.core_PushNotificationHasBeenRequested, Converter={Rock:InverseBooleanConverter}}">
    <Label Text="Would you like to enable push notifications?" />
    <Button StyleClass="btn,btn-primary"
        Text="Enable Notification"
        Command="{Binding EnablePushNotifications}" />
</StackLayout>

<!-- elseif -->
<StackLayout IsVisible="{Binding AppValues.core_PushNotificationHasBeenRequested}">
    <StackLayout IsVisible="{Binding AppValues.core_NotificationsAreEnabled, Converter={Rock:InverseBooleanConverter}}">
        <Label Text="Your notifications are disabled, would you like to fix that?" />
        <Button StyleClass="btn,btn-primary"
            Text="Settings"
            Command="{Binding OpenAppSettings}" />
    </StackLayout>

    <!-- else -->
    <StackLayout IsVisible="{Binding AppValues.core_NotificationsAreEnabled}">
        <Label Text="You'll be hearing from us." />
    </StackLayout>
</StackLayout>

Last updated 5 months ago

For the most part, any URL you provide from the will work. We recommend using that as a reference to ensure your URL is valid and to always test once you've added it to the app.

Passage references include a version ID in the route (59 is for ) followed by a three-letter book identifier. Be very careful to provide valid values, especially for the version number! You may notice slugs in some of the URLs provided by the website, but they're typically unnecessary.

🧱
bible.com website
ESV