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
  • Android
  • Parameters
  • Styling
  • Examples
  • Closing a Cover Sheet
Export as PDF
  1. Essentials
  2. Controls
  3. Content Controls

Cover Sheet

The ins and outs of displaying and styling cover sheets

Last updated 1 month ago

Cover sheets are a commonly patterned way to present information to a user that doesn't rely on changing the navigation stack.

Cover sheets cannot be opened within cover sheets. Some blocks utilize cover sheets to reveal content or forms, so be sure not to include these blocks in the navigation stack.

Android

Parameters

Listed below are the options provided via the ShowCoverSheetCommandParameters object.

Property
Type
Description

PageGuid

Guid

The Guid of the page to display in the cover sheet. Use this instead of Content.

Content

View

The content to display inside of the cover sheet. Use this instead of PageGuid.

ModalPresentationStyle

ModalPresentationStyle

[iOS ONLY] The way that the sheet is presented. There are currently four accepted values: FormSheet, PageSheet, FullScreen and OverFullScreen. Defaults to FormSheet.

IsNavigationPage

bool

Whether or not the page displayed should be converted into a page that has a toolbar with a dismiss button. Defaults to true.

SheetTitle

string

The title of the sheet, displays in the middle of the navigation bar.

DismissButtonText

string

The text to use in the dismiss button, seen in the toolbar (navigation bar) of the sheet. Defaults to Cancel.

bool

Whether or not this instance should show a navigation bar. IsNavigationPage must be enabled. (defaults to false)

Button

The button to use as the primary action in the top right corner of cover sheets.

Button

The button to use as the secondary action in the top left corner of cover sheets.

.cover-sheet {
    -maui-bar-background-color: green;
    -maui-bar-text-color: #ffffff;
    -rock-status-bar-text: light;
    -rock-ios-hide-navigation-bar-separator: true;
}

Setting -rock-ios-hide-navigation-bar-separator: true; works on initial page loads, but changing the OS theme will reveal this separator on the current page.

Examples

To show a cover sheet that displays another page, pass in the PageGuid as the CommandParameter.

<!-- Cover sheet used to display another page as content. -->
<Button Text="Tap"
    StyleClass="btn, btn-primary"
    Command="{Binding ShowCoverSheet}"
    CommandParameter="71e80253-8d10-426b-8182-65dafe9b695f" />

To show a cover sheet from provided XAML content, pass in the XAML content you want to render inside of the CommandParameter.

<!-- Cover sheet with content as the parameter. -->
<Button Text="Tap"
    StyleClass="btn, btn-primary"
    Command="{Binding ShowCoverSheet}">
    <Button.CommandParameter>
        <StackLayout>
            <Label Text="This is cover sheet content."
                StyleClass="h1" />
        </StackLayout>
    </Button.CommandParameter>
</Button>

Here is an extensive example with most of the ShowCoverSheetParameters properties utilized.

<Button Text="Tap"
    StyleClass="btn, btn-primary"
    Command="{Binding ShowCoverSheet}">
    <Button.CommandParameter>
        <Rock:ShowCoverSheetParameters SheetTitle="Title" 
            ModalPresentationStyle="FullScreen">
            <Rock:ShowCoverSheetParameters.Content>
                <StackLayout>
                    <Label Text="This is cover sheet content."
                        StyleClass="h3" />
                </StackLayout>
            </Rock:ShowCoverSheetParameters.Content>
            <Rock:ShowCoverSheetParameters.PrimaryActionButton>
                <Button Command="{Binding ShowToast}" 
                    Text="Toast"
                    CommandParameter="That was a unique use of the PrimaryActionButton..." />
            </Rock:ShowCoverSheetParameters.PrimaryActionButton>
            <Rock:ShowCoverSheetParameters.SecondaryActionButton>
                <Button Command="{Binding CloseCoverSheet}" 
                    Text="Dismiss" />
            </Rock:ShowCoverSheetParameters.SecondaryActionButton>
        </Rock:ShowCoverSheetParameters>
    </Button.CommandParameter>
</Button>

Closing a Cover Sheet

<Button Text="Tap" Command="{Binding CloseCoverSheet}" />

Currently, there is not a ton of Android functionality. It works similarly to a but has an animation that slides from bottom to top instead of from right to left.

If you set IsNavigationPage to false, Android users won't have a way to close the cover sheet. You'll need a custom button that uses the command.

ShowNavigationBar

PrimaryActionButton

SecondaryActionButton

Styling

You can style the itself by targeting the cover-sheet class. For example, if you want to change the background bar color, text color, and remove the FullScreen separator:

To close any open cover sheet, use the command.

🧱
Navigation Bar
PushPage
CloseCoverSheet
CloseCoverSheet