Control Gallery

General Information

Custom

Input Sizing Rules

Warning!

In Bootstrap 3 inputs are meant to fill the width of their parent container (link). If a small input is desired they should be wrapped in a table grid. This provides the best responsive solution. In some rare cases it's beneficial to be able to fix the width of certain inputs to provide better context of what the input is for. For instance a credit card CVV field makes more sense visually being fixed width to 3 characters. To provide this capability we have added the following CSS classes to fix width inputs. Please use them sparingly.

Alert

Rock framework developers should get approval from the Core Team before using these styles.

.input-width-xs

.input-width-sm

.input-width-md

.input-width-lg

.input-width-xl

.input-width-xxl

<Rock:RockTextBox ID="tbInput1" runat="server" CssClass="input-width-xs" Label=".input-width-xs" />

<Rock:RockTextBox ID="tbInput2" runat="server" CssClass="input-width-sm" Label=".input-width-sm" />

<Rock:RockTextBox ID="tbInput3" runat="server" CssClass="input-width-md" Label=".input-width-md" />

<Rock:RockTextBox ID="tbInput4" runat="server" CssClass="input-width-lg" Label=".input-width-lg" />

<Rock:RockTextBox ID="tbInput5" runat="server" CssClass="input-width-xl" Label=".input-width-xl" />

<Rock:RockTextBox ID="tbInput6" runat="server" CssClass="input-width-xxl" Label=".input-width-xxl" />

Note

In Bootstrap 3 inputs are display:block;. If you need these sized controls to align horizontally, consider wrapping them with the form-control-group class.

Horizontal Forms

While Rock uses a similar approach to Bootstrap, we’ve made horizontal forms a bit easier to help facilitate their use when creating forms in workflows and event registrations. Below is the syntax for declaring a horizontal form.

<div class="form-horizontal label-sm">
    <div class="form-group">
        <label for="inputEmail3" class="control-label">Email</label>
        <div class="control-wrapper">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
</div>

When using this in form generators you'll need to complete two steps. The first is adding a wrapping <div class="form-group "> in your pre/post fields.

The second is an additional class on the form-horizontal element that determines how wide the label column should be. Options include:

label-sm: Label column of 2, field column of 10
label-md: Label column of 4, field column of 8
label-lg: Label column of 6, field column of 6
label-xl: Label column of 8, field column of 4
label-auto: Label and field widths determined by contents

Email Email Email Email Email Email Email Email Email Email Email

<div class="form-horizontal label-sm">
    <div class="form-group">
        <label for="inputEmail4" class="control-label">Email</label>
        <div class="control-wrapper">
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
        </div>
    </div>
</div>

<div class="form-horizontal label-md">
    <div class="form-group">
        <label for="inputEmail5" class="control-label">Email</label>
        <div class="control-wrapper">
            <input type="email" class="form-control" id="inputEmail5" placeholder="Email">
        </div>
    </div>
</div>

<div class="form-horizontal label-lg">
    <div class="form-group">
        <label for="inputEmail6" class="control-label">Email</label>
        <div class="control-wrapper">
            <input type="email" class="form-control" id="inputEmail6" placeholder="Email">
        </div>
    </div>
</div>

<div class="form-horizontal label-xl">
    <div class="form-group">
        <label for="inputEmail7" class="control-label">Email</label>
        <div class="control-wrapper">
            <input type="email" class="form-control" id="inputEmail7" placeholder="Email">
        </div>
    </div>
</div>

<div class="form-horizontal label-auto">
    <div class="form-group">
        <label for="inputEmail8" class="control-label">Email Email Email Email Email Email Email Email Email Email Email</label>
        <div class="control-wrapper">
            <input type="email" class="form-control" id="inputEmail8" placeholder="Email">
        </div>
    </div>
</div>

Margins and Padding

Warning!

If you think you need to control the margin or padding, you might be 'doing it wrong.' These are for use in those cases when you know what you're doing.

Format

The format is the type (padding or margin) followed by a dash then the position (v=vertical, h=horizontal, t=top, etc.) followed by a dash and then the sizing specifier (none, small, medium, etc).

.padding|margin - v|h|t|b|r|l|all - none|sm|md|lg|xl

.margin-t-xl

.padding-h-lg

.padding-all-xl .margin-all-lg

.padding-all-xl .margin-all-md For God so loved the world that he gave his one and only Son...

<div class="well">
    <Rock:RockTextBox ID="tbMP1" runat="server" CssClass="margin-t-xl" Label=".margin-t-xl" Placeholder="Blah..."/>
</div>

<div class="well">
    <Rock:RockTextBox ID="tbMP2" runat="server" CssClass="padding-h-lg" Label=".padding-h-lg" Placeholder="Blah..." />
</div>

<div class="well">
    <label class="control-label">.padding-all-xl .margin-all-lg</label>
    <Rock:NotificationBox ID="nbMP3" runat="server" CssClass="padding-all-xl margin-all-lg" NotificationBoxType="Info" Title=".padding-all-xl .margin-all-md" Text="For God so loved the world that he gave his one and only Son..." />
</div>

Field Labels

When a field is not editable because it was pre-configured via configuration or block setting, it should still have a typical look by using the form-group, control-label, control-wrapper classes.

Group

A/V Team

<div class="form-group">
	<label class="control-label">Group</label> 
	<div class="control-wrapper">
		<p>A/V Team</p>	
	</div>
</div>

Rock:Grid

	Name	DateTime

	Ketchup	5/14/2025 4:08 AM
	Mustard	5/14/2025 4:08 AM
	Onions	5/14/2025 4:08 AM
	Pickles	5/14/2025 4:08 AM
50 500 5,000 4 Example Data Items

<div class="grid">
    <Rock:Grid ID="gExample" runat="server" AllowSorting="true">
        <Columns>
            <Rock:ColorField DataField="DefinedValueColor" ToolTipDataField="DefinedValueTypeName" HeaderText="" />
            <Rock:RockBoundField DataField="DefinedValueTypeName" HeaderText="Name" SortExpression="DefinedValueTypeName" />
            <Rock:DateTimeField DataField="SomeDateTime" HeaderText="DateTime" SortExpression="SomeDateTime" />
            <Rock:BoolField DataField="SomeBoolean" HeaderText="Some Boolean" SortExpression="SomeBoolean" />
            <Rock:EditField />
            <Rock:SecurityField TitleField="DefinedValueTypeName" />
            <Rock:DeleteField />
        </Columns>
    </Rock:Grid>
</div>

Note An extra div is required around the grid to help wrap the grid and an optional grid filter for styling.

Drop Downs

Rock:DataDropDownList/RockDropDownList

<Rock:DataDropDownList ID="ddlDataExample" runat="server" Label="Rock:DataDropDownList/RockDropDownList" SourceTypeName="Rock.Model.GroupType, Rock" PropertyName="Name" />

State Drop Down List

Rock:StateDropDownList

<Rock:StateDropDownList ID="statepExample" runat="server" Label="Rock:StateDropDownList" />

Button Drop Down List

Rock:ButtonDropDownList

<Rock:ButtonDropDownList ID="bddlExample" runat="server" Label="Rock:ButtonDropDownList" />

Button Drop Down List Checkmark

Rock:ButtonDropDownList with Checkmark

<Rock:ButtonDropDownList ID="bddlExampleCheckmark" runat="server" Label="Rock:ButtonDropDownList with Checkmark" SelectionStyle="Checkmark" Title="T-Shirt Size" />

Inputs

Text Box

Rock:DataTextBox

<Rock:DataTextBox ID="dtbExample" runat="server" Label="Rock:DataTextBox" LabelTextFromPropertyName="false" SourceTypeName="Rock.Model.GroupType, Rock" PropertyName="Description" />

Email Box

Rock:EmailBox

<Rock:EmailBox ID="ebEmail" runat="server" Label="Rock:EmailBox" />

URL Link Box

<Rock:UrlLinkBox ID="ulLink" runat="server" Label="Rock:UrlLinkBox" />

Number Box

Rock:NumberBox

<Rock:NumberBox ID="numbExample" runat="server" Label="Rock:NumberBox" />

Address Control

Rock:AddressControl

<Rock:AddressControl ID="addrExample" runat="server" Label="Rock:AddressControl" />

Number Up Down (Stepper)

Rock:NumberUpDown

<Rock:NumberUpDown ID="nudExample" runat="server" Label="Rock:NumberUpDown" Minimum="0" Maximum="5" />

Check Box

Rock:RockCheckBox

<Rock:RockCheckBox ID="cbExample" runat="server" Label="Rock:RockCheckBox" />

Rock:RockCheckBox

<Rock:RockCheckBox ID="cbExample2" runat="server" Label="Rock:RockCheckBox" SelectedIconCssClass="fa fa-check-square-o fa-lg" UnSelectedIconCssClass="fa fa-square-o fa-lg" />

Rock:RockCheckBoxList

Pickles

Onions

Ketchup

Mustard

<Rock:RockCheckBoxList ID="cblExample" runat="server" Label="Rock:RockCheckBoxList" />

Rock:RockCheckBoxList (horizontal)

Pickles Onions Ketchup Mustard

<Rock:RockCheckBoxList ID="cblExampleHorizontal" runat="server" Label="Rock:RockCheckBoxList (horizontal)" RepeatDirection="Horizontal" />

Rock:RockListBox

<Rock:RockListBox ID="lbExampleListBox" runat="server" Label="Rock:RockListBox" />

Radio Button

Rock:RockRadioButtonList

Pickles

Onions

Ketchup

Mustard

<Rock:RockRadioButtonList ID="rblExample" runat="server" Label="Rock:RockRadioButtonList" />

Rock:RockRadioButtonList (horizontal)

Pickles Onions Ketchup Mustard

<Rock:RockRadioButtonList ID="rblExampleHorizontal" runat="server" Label="Rock:RockRadioButtonList (horizontal)" RepeatDirection="Horizontal" />

Rock:Switch

<Rock:Switch ID="swExample" runat="server" Label="Rock:Switch" Text="Rock:Switch" />

Rock:ListItems

<Rock:ListItems ID="liExample" runat="server" Label="Rock:ListItems"></Rock:ListItems>

Number Range

Rock:NumberRangeEditor

<Rock:NumberRangeEditor ID="nreExample" runat="server" Label="Rock:NumberRangeEditor" LowerValue="10" UpperValue="25" />

Rating Input

Rock:RatingInput

<Rock:RockRating ID="rrRating" runat="server" Label="Rock:RatingInput" /><br />

Range Slider

Rock:RangeSlider

<Rock:RangeSlider ID="rsSlider" runat="server" Label="Rock:RangeSlider" MaxValue="250" MinValue="125" StepValue="0" SelectedValue="200" />
<br />

Rock:RangeSlider

<Rock:RangeSlider ID="rsSlider2" runat="server" Label="Rock:RangeSlider" />
<br />

Test

Pickers

Date/Time

Rock:DatePicker

<Rock:DatePicker ID="dpExample" runat="server" Label="Rock:DatePicker" />

Rock:DatePartsPicker

/ /

<Rock:DatePartsPicker ID="dppExample" runat="server" Label="Rock:DatePartsPicker" OnSelectedDatePartsChanged="dppExample_SelectedDatePartsChanged" />

Rock:DateTimePicker

<Rock:DateTimePicker ID="dtpExample" runat="server" Label="Rock:DateTimePicker" />

Rock:DaysOfWeekPicker

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

<Rock:DaysOfWeekPicker ID="daysOfWeekPicker" RepeatDirection="Horizontal" runat="server" Label="Rock:DaysOfWeekPicker" />

Rock:DayOfWeekPicker

<Rock:DayOfWeekPicker ID="dayOfWeekPicker" runat="server" Label="Rock:DayOfWeekPicker" />

Rock:TimePicker

<Rock:TimePicker ID="timepExample" runat="server" Label="Rock:TimePicker" />

Rock:MonthYearPicker

<Rock:MonthYearPicker ID="mypExample" runat="server" Label="Rock:MonthYearPicker" OnSelectedMonthYearChanged="monthYearPicker_SelectedMonthYearChanged" />

Rock:MonthDayPicker

<Rock:MonthDayPicker ID="mdpExample" runat="server" Label="Rock:MonthDayPicker" OnSelectedMonthDayChanged="monthDayPicker_SelectedMonthDayChanged" />

Rock:DateRangePicker

<Rock:DateRangePicker ID="drpExample" runat="server" Label="Rock:DateRangePicker" LowerValue="1/1/2012" UpperValue="12/31/2014" />

Rock:SlidingDateRangePicker

<Rock:SlidingDateRangePicker ID="sdrpExample" runat="server" Label="Rock:SlidingDateRangePicker" PreviewLocation="Top" />

Rock:BirthdayPicker

/ /

<Rock:BirthdayPicker ID="bdaypExample" runat="server" Label="Rock:BirthdayPicker" OnSelectedBirthdayChanged="birthdayPicker_SelectedBirthdayChanged" />

Rock:YearPicker

<Rock:YearPicker ID="ypYearPicker" runat="server" Label="Rock:YearPicker"  />

Campus

Rock:CampusPicker

<Rock:CampusPicker ID="campExample" runat="server" Label="Rock:CampusPicker" ForceVisible="true" />

Rock:CampusesPicker

Main Campus Gloria Dei en Español

<Rock:CampusesPicker ID="campsExample" runat="server" Label="Rock:CampusesPicker" ForceVisible="true" />

Connections

Rock:ConnectionRequestPicker

<Rock:ConnectionRequestPicker ID="crpConnectionRequestPicker" runat="server" Label="Rock:ConnectionRequestPicker" />

DefinedValues

Rock:DefinedValuePicker for ConnectionStatus defined type

<Rock:DefinedValuePicker ID="dvpDefinedValuePicker" runat="server" Label="Rock:DefinedValuePicker for ConnectionStatus defined type" DefinedTypeId="4" />

<Rock:DefinedValuesPicker ID="dvpDefinedValuesPicker" runat="server" Label="Rock:DefinedValuesPicker for ConnectionStatus defined type" DefinedTypeId="4" />

Rock:DefinedValuesPickerEnhanced for ConnectionStatus defined type

<Rock:DefinedValuesPickerEnhanced ID="dvpDefinedValuesPickerEnhanced" runat="server" Label="Rock:DefinedValuesPickerEnhanced for ConnectionStatus defined type" DefinedTypeId="4" />

Events

Rock:EventCalendarPicker

<Rock:EventCalendarPicker ID="ecpEventCalendarPicker" runat="server" Label="Rock:EventCalendarPicker" />

Rock:EventItemPicker

<Rock:EventItemPicker ID="eipEventItemPicker" runat="server" Label="Rock:EventItemPicker" />

Rock:RegistrationTemplatePicker

<Rock:RegistrationTemplatePicker ID="pRegistrationTemplatePicker" runat="server" Label="Rock:RegistrationTemplatePicker" />

Financial

Rock:AccountPicker

<Rock:AccountPicker ID="acctpExample" runat="server" Label="Rock:AccountPicker" />

Rock:FinancialGatewayPicker

<Rock:FinancialGatewayPicker ID="fgpFinancialGatewayPicker" runat="server" Label="Rock:FinancialGatewayPicker"/>

Files and Images

Rock:BinaryFileTypePicker

<Rock:BinaryFileTypePicker ID="bftpExample" runat="server" Label="Rock:BinaryFileTypePicker" OnSelectedIndexChanged="binaryFileTypePicker_SelectedIndexChanged" />

Rock:BinaryFilePicker

<Rock:BinaryFilePicker ID="bfpExample" runat="server" Label="Rock:BinaryFilePicker" />

Rock:FileUploader (BinaryFile mode)

Upload

<Rock:FileUploader ID="fuprExampleBinaryFile" runat="server" Label="Rock:FileUploader (BinaryFile mode)" BinaryFileTypeGuid="C1142570-8CD6-4A20-83B1-ACB47C1CD377" />

Rock:FileUploader Large (BinaryFile mode)

Drop File Here or Click to Select

<Rock:FileUploader ID="fuprExampleUploader" runat="server" DisplayMode="DropZone" IsBinaryFile="true" Required="false" Label="Rock:FileUploader Large (BinaryFile mode)" RequiredErrorMessage="A Document File is required." FormGroupCssClass="fileupload-group-lg" UploadButtonText="Drop File Here or Click to Select"></Rock:FileUploader>

Rock:FileUploader (Content file mode)

Upload

Uploaded File: -

<Rock:FileUploader ID="fuprExampleContentFile" runat="server" Label="Rock:FileUploader (Content file mode)" IsBinaryFile="false" RootFolder="~/App_Data/TemporaryFiles" OnFileUploaded="fupContentFile_FileUploaded" />
<asp:Label ID="lblPhysicalFileName" runat="server" Text="Uploaded File: -" />

Rock:ImageUploader

Upload

<Rock:ImageUploader ID="imgupExample" runat="server" Label="Rock:ImageUploader" />

Rock:ImageUploader

Upload

<Rock:ImageUploader ID="ImageUploader1" runat="server" Label="Rock:ImageUploader" ThumbnailHeight="200" ThumbnailWidth="200" />

Rock:ImageEditor

<Rock:ImageEditor ID="imageEditor" runat="server" Label="Rock:ImageEditor" MaxImageWidth="1600" MaxImageHeight="1200" />

Rock:MediaElementPicker

Account

Folder

Media

<Rock:MediaElementPicker ID="mediaElementPicker" runat="server" Label="Rock:MediaElementPicker" MediaElementId="3" />

Groups and Group Types

Rock:GroupPicker

<Rock:GroupPicker ID="gpExample" runat="server" Label="Rock:GroupPicker" />

Rock:GroupPicker (Multiselect)

<Rock:GroupPicker ID="grExampleMultip" runat="server" Label="Rock:GroupPicker (Multiselect)" AllowMultiSelect="true" />

Rock:GroupPicker (FullWidth)

<Rock:GroupPicker ID="gpExampleFullWidth" runat="server" EnableFullWidth="true" Label="Rock:GroupPicker (FullWidth)" AllowMultiSelect="true" />

Rock:GroupTypePicker

<Rock:GroupTypePicker ID="gpGroupType" runat="server" Label="Rock:GroupTypePicker" />

<Rock:GroupTypesPicker ID="gpGroupTypes" runat="server" Label="Rock:GroupTypesPicker" />

Rock:GroupRolePicker

Role

<Rock:GroupRolePicker ID="grpExample" runat="server" Label="Rock:GroupRolePicker" />

Interval

Rock:IntervalPicker

Mins Hours Days

<Rock:IntervalPicker ID="ipExample1" runat="server" Label="Rock:IntervalPicker" />

Rock:IntervalPicker (Default Value, Default Interval)

Mins Hours Days

<Rock:IntervalPicker ID="ipExample2" DefaultValue="2" DefaultInterval="Day" runat="server" Label="Rock:IntervalPicker (Default Value, Default Interval)" />

Locations

Rock:LocationList

<Rock:LocationList ID="LocationList1" runat="server" Label="Rock:LocationList" AllowAdd="true" ShowCityState="true" IsAddressRequired="true" />

Rock:LocationPicker

<Rock:LocationPicker ID="locpExample" runat="server" Label="Rock:LocationPicker" />

Rock:LocationPicker (Address Mode, Mode Selection disabled)

<Rock:LocationPicker ID="locpExampleAddressMode" runat="server" Label="Rock:LocationPicker (Address Mode, Mode Selection disabled)" CurrentPickerMode="Address" AllowedPickerModes="Address" />

Rock:GeoPicker (Point mode)

<Rock:GeoPicker ID="geopExamplePoint" runat="server" Label="Rock:GeoPicker (Point mode)"  DrawingMode="Point" MapStyleValueGuid="BFC46259-FB66-4427-BF05-2B030A582BEA" />

Rock:GeoPicker (Polygon mode)

<Rock:GeoPicker ID="geopExamplePolygon" runat="server" Label="Rock:GeoPicker (Polygon mode)" DrawingMode="Polygon" Help="You can set the style of this through the 'Map Style' block attribute." Warning="If you need to stipulate restrictions, use the warning property." />

Pages

Rock:PagePicker

<Rock:PagePicker ID="pagepExample" runat="server" Label="Rock:PagePicker" />

Person Pickers

Rock:PersonPicker

<Rock:PersonPicker ID="ppExample" runat="server" Label="Rock:PersonPicker" />

Rock:PersonPicker ( FullWidth )

<Rock:PersonPicker ID="ppExampleFullWidth" runat="server" EnableFullWidth="true" Label="Rock:PersonPicker ( FullWidth )" />

Rock:PersonPicker including businesses

<Rock:PersonPicker ID="ppBusinessExample" runat="server" Label="Rock:PersonPicker including businesses" IncludeBusinesses="true" />

Rock:PersonPicker with Self Selection

<Rock:PersonPicker ID="ppSelfSelect" runat="server" Label="Rock:PersonPicker with Self Selection" EnableSelfSelection="true" />

Rock:GradePicker

<Rock:GradePicker ID="pGradePicker" runat="server" Label="Rock:GradePicker" />

Lava Commands

<Rock:LavaCommandsPicker ID="pLavaCommandsPicker" runat="server" Label="Rock:LavaCommandsPicker" />

Lava Merge Fields

Rock:MergeFieldPicker

Add Merge Field

<Rock:MergeFieldPicker ID="mfpExample" runat="server" Label="Rock:MergeFieldPicker" />

Merge Fields Templates

Rock:MergeTemplatePicker

<Rock:MergeTemplatePicker ID="pMergeTemplatePicker" runat="server" Label="Rock:MergeTemplatePicker" />

Reporting

Rock:DataViewItemPicker for Person Dataviews

<Rock:DataViewItemPicker ID="dvpDataViewPicker" runat="server" Label="Rock:DataViewItemPicker for Person Dataviews" EntityTypeId="15" />

Rock:DataViewsPicker for Person Dataviews

<Rock:DataViewsPicker ID="dvpDataViewsPicker" runat="server" Label="Rock:DataViewsPicker for Person Dataviews" EntityTypeId="15"/>

Rock:ReportPicker for Person Reports

<Rock:ReportPicker ID="rpReports" runat="server" Label="Rock:ReportPicker for Person Reports" EntityTypeId="15" />

Rock:MetricCategoryPicker (Pick Metric from Category Tree)

<Rock:MetricCategoryPicker ID="pMetricCategoryPicker" runat="server" Label="Rock:MetricCategoryPicker (Pick Metric from Category Tree)" EntityTypeId="15"/>

SystemPhoneNumbers

Rock:SystemPhoneNumberPicker

<Rock:SystemPhoneNumberPicker ID="spnpSystemPhoneNumberPicker" runat="server" Label="Rock:SystemPhoneNumberPicker" />

Rock:SystemPhoneNumbersPicker

Connections - Randy Miller Outreach/Missions - Stephanie Knea Deisies/Funeral - Patty Hoesl

<Rock:SystemPhoneNumbersPicker ID="spnpSystemPhoneNumbersPicker" runat="server" Label="Rock:SystemPhoneNumbersPicker" />

Workflows

Rock:WorkflowTypePicker

<Rock:WorkflowTypePicker ID="wftpExample" runat="server" Label="Rock:WorkflowTypePicker" />

Rock:WorkflowActionTypePicker

<Rock:WorkflowActionTypePicker ID="wfatpExample" runat="server" Label="Rock:WorkflowActionTypePicker" />

Workflow Picker

Workflow Type

Workflow

<Rock:RockControlWrapper ID="rcwWorkflowPicker" runat="server" Label="Workflow Picker">
    <Rock:WorkflowPicker ID="pWorkflowPicker" runat="server" FormGroupCssClass="margin-l-md margin-t-sm" Label="Workflow Type" />
</Rock:RockControlWrapper>

Other Pickers

Rock:CategoryPicker

<Rock:CategoryPicker ID="catpExample" runat="server" Label="Rock:CategoryPicker" />

Rock:ComponentPicker

<Rock:ComponentPicker ID="compExample" runat="server" Label="Rock:ComponentPicker" />

Rock:EntityPicker

Entity Type

<Rock:EntityPicker ID="epEntityPicker" runat="server" Label="Rock:EntityPicker" />

Rock:FieldTypePicker

<Rock:FieldTypePicker ID="ftlExample" runat="server" Label="Rock:FieldTypePicker" />

Rock:RemoteAuthsPicker

<Rock:RemoteAuthsPicker ID="pRemoteAuthsPicker" runat="server" Label="Rock:RemoteAuthsPicker" />

Schedules

Rock:SchedulePicker

<Rock:SchedulePicker ID="spSchedulePicker" runat="server" Label="Rock:SchedulePicker" />

Rock:ScheduleBuilder

Edit Schedule

<Rock:ScheduleBuilder ID="schedbExample" runat="server" Label="Rock:ScheduleBuilder" OnSaveSchedule="scheduleBuilder_SaveSchedule" />

Misc

Rock:NotificationBox

This creates a Bootstrap alert. We’ve added the ability to have Details that can be shown.

Success This is a success message.

Info This is an informational message.

Warning This is a warning.

Danger Something really went wrong.

Hey You can close this when you are done reading it if you want.

Some Info This is a message with extra stuff. Show Details

Here are the extra details

<Rock:NotificationBox ID="nbExampleSuccess" runat="server" Title="Success" Text="This is a success message." NotificationBoxType="Success" />
<Rock:NotificationBox ID="nbExampleInfo" runat="server" Title="Info" Text="This is an informational message." NotificationBoxType="Info" />
<Rock:NotificationBox ID="nbExampleWarning" runat="server" Title="Warning" Text="This is a warning." NotificationBoxType="Warning" />
<Rock:NotificationBox ID="nbExampleDanger" runat="server" Title="Danger" Text="Something really went wrong." NotificationBoxType="Danger" />
<Rock:NotificationBox ID="nbExampleDismissable" runat="server" Title="Hey" Text="You can close this when you are done reading it if you want." NotificationBoxType="Warning" Dismissable="true" />
<Rock:NotificationBox ID="nbExampleDetails" runat="server" Title="Some Info" Text="This is a message with extra stuff." Details="Here are the extra details" />

Rock:TagLiteral

This creates a asp:literal with the contents wrapped by the specified tag. We’ve added the ability to specify a css class. TagLiteral2, TagLiteral3, TagLiteral6 demonstrate the fact that if the text is not set nothing will be rendered.

TagLiteral1: Text Set via the Text Property with CssClass = Description

TagLiteral4: This text is set via code.

TagLiteral5: Literal Content in tag

TagLiteral6: Text with no tag should yield a div.

<Rock:TagLiteral ID="TagLiteral1" runat="server" Tag="div" Text="TagLiteral1: Text Set via the Text Property with CssClass = Description" CssClass="description"/>
<Rock:TagLiteral ID="TagLiteral2" runat="server" Tag="div" Text="" CssClass="description"/>
<Rock:TagLiteral ID="TagLiteral3" runat="server" Tag="div" Text="" CssClass=""/>
<Rock:TagLiteral ID="TagLiteral4" runat="server" Tag="div" />
<Rock:TagLiteral ID="TagLiteral5" runat="server" Tag="p">
    <span>TagLiteral5: Literal Content in tag</span>
</Rock:TagLiteral>
<Rock:TagLiteral ID="TagLiteral6" runat="server" Text="TagLiteral6: Text with no tag should yield a div." />
<Rock:TagLiteral ID="TagLiteral7" runat="server" />

Rock:Badge

This is a mostly standard Bootstrap badge. We say "mostly" because we added the ability to control the color of the badge via the BadgeType property (danger, warning, success, info) similar to the old Bootstrap 2.3 Labels and Badges.

1 0 5 15 99

<Rock:Badge ID="badge" runat="server" ToolTip="you have new messages waiting" Text="1" />
<Rock:Badge ID="badge1" runat="server" BadgeType="success" Text="0" />
<Rock:Badge ID="badge2" runat="server" BadgeType="info" Text="5" />
<Rock:Badge ID="badge3" runat="server" BadgeType="warning" Text="15" />
<Rock:Badge ID="badge4" runat="server" BadgeType="danger" Text="99" />

Rock:HighlightLabel

This creates a Bootstrap Label but we’ve added a few additional custom LabelType options to control the color.

Default Primary Success Info Warning Danger Campus Type Custom

<Rock:HighlightLabel ID="hlblExample1" runat="server" LabelType="Default" Text="Default" ToolTip="More information is here." />
<Rock:HighlightLabel ID="hlblExample2" runat="server" LabelType="Primary" Text="Primary" />
<Rock:HighlightLabel ID="hlblExample3" runat="server" LabelType="Success" Text="Success" />
<Rock:HighlightLabel ID="hlblExample4" runat="server" LabelType="Info" Text="Info" />
<Rock:HighlightLabel ID="hlblExample5" runat="server" LabelType="Warning" Text="Warning" />
<Rock:HighlightLabel ID="hlblExample6" runat="server" LabelType="Danger" Text="Danger" />
<Rock:HighlightLabel ID="hlblExample7" runat="server" LabelType="Campus" Text="Campus" />
<Rock:HighlightLabel ID="hlblExample8" runat="server" LabelType="Type" Text="Type" />
<Rock:HighlightLabel ID="hlblExample9" runat="server" LabelType="Custom" CustomClass="danger" Text="Custom" />

While you can set the Text to include HTML (such as font icons), you can also do this a little easier just by setting the IconCssClass property.

errors

<Rock:HighlightLabel ID="hlblExample" runat="server" LabelType="Danger" IconCssClass="fa fa-flag" Text="errors" />

Rock:Toggle

A toggle switch for those cases when a simple checkbox just won't do.

Show Preview?

No Yes

<Rock:Toggle ID="toggleShowPreview" runat="server"
    Label="Show Preview?" OnText="Yes" OffText="No" Checked="true"
    Help="If set to yes, a preview will be shown immediately as you update your criteria."
    OnCheckedChanged="toggleShowPreview_CheckedChanged" />

Need special color indicators on the buttons? Set ActiveButtonCssClass to .btn-info, .btn-success, .btn-danger or .btn-warning

Off On

<Rock:Toggle ID="tglExample1" runat="server" />
<Rock:Toggle ID="tglExample2" runat="server" ActiveButtonCssClass="btn-info" />
<Rock:Toggle ID="tglExample3" runat="server" ActiveButtonCssClass="btn-success" />
<Rock:Toggle ID="tglExample4" runat="server" ActiveButtonCssClass="btn-danger" />
<Rock:Toggle ID="tglExample5" runat="server" ActiveButtonCssClass="btn-warning" />
<Rock:Toggle ID="tglExample6" runat="server" ActiveButtonCssClass="btn-primary" />

Want different colors for the on/off states?

Off On

<Rock:Toggle ID="tglExampleOnOff" OnCssClass="btn-success" OffCssClass="btn-danger" runat="server" />

Need larger or smaller toggle buttons? Set ButtonSizeCssClass to .btn-lg, .btn-sm or .btn-xs

Off On

<Rock:Toggle ID="tglExample7" runat="server" ButtonSizeCssClass="btn-lg" />
<Rock:Toggle ID="tglExample8" runat="server" />
<Rock:Toggle ID="tglExample9" runat="server" ButtonSizeCssClass="btn-sm" />
<Rock:Toggle ID="tglExample10" runat="server" ButtonSizeCssClass="btn-xs" />

Rock:ButtonGroup

Favorite Fruit

Apple Banana Strawberry Chicken

<Rock:ButtonGroup ID="bgExample" runat="server" Label="Favorite Fruit">
    <asp:ListItem Text="Apple" Value="1" />
    <asp:ListItem Text="Banana" Value="2" />
    <asp:ListItem Text="Strawberry" Value="3" />
    <asp:ListItem Text="Chicken" Value="4" />
</Rock:ButtonGroup>

Rock:BootstrapButton

Click Me

<Rock:BootstrapButton ID="lbSave" runat="server" Text="Click Me" CssClass="btn btn-primary"
    DataLoadingText="&lt;i class='fa fa-refresh fa-spin'&gt;&lt;/i&gt; Saving"

Rock:AttributeEditor

Attribute Editor...

<asp:LinkButton ID="btnShowAttributeEditor" runat="server" CssClass="btn btn-link" Text="Attribute Editor..." OnClick="btnShowAttributeEditor_Click" CausesValidation="false" />
<asp:Panel ID="pnlAttributeEditor" runat="server" Visible="false" CssClass="well">
    <Rock:AttributeEditor ID="edtExample" runat="server" OnCancelClick="aeExample_CancelClick" OnSaveClick="aeExample_SaveClick" ValidationGroup="Attribute" />
</asp:Panel>

Rock:HtmlEditor (Full)

HtmlEditor

<Rock:HtmlEditor ID="htmlEditorFull" runat="server" Label="HtmlEditor" Toolbar="Full" />

Rock:HtmlEditor (Light)

HtmlEditor

<Rock:HtmlEditor ID="htmlEditorLight" runat="server" Label="HtmlEditor" Toolbar="Light" />

Rock:CodeEditor

Script

    <h3>Hello!!!</h3>
    <p>This is a great way to edit HTML! Reasons:</p>

    <!-- Comment
         We shouldn't have to explain why this is better than just a
         textarea but we will just for you...
    -->

    <ol class="reasons">
        <li>Syntax highlighting</li>
        <li>Tabs work great</li>
        <li>Code folding</li>
    </ol>

<Rock:CodeEditor ID="ceScript" runat="server" EditorTheme="Rock" Label="Script" EditorMode="Html" EditorHeight="300">
    <h3>Hello!!!</h3>
    <p>This is a great way to edit HTML! Reasons:</p>

    <!-- Comment
         We shouldn't have to explain why this is better than just a
         textarea but we will just for you...
    -->

    <ol class="reasons">
        <li>Syntax highlighting</li>
        <li>Tabs work great</li>
        <li>Code folding</li>
    </ol>
</Rock:CodeEditor>

Alternately, you can provide the contents of the code to edit in the Text property of the control.

Rock:MarkdownEditor

Convert to HTML

Rock:MarkdownEditor

*Italic*
**Bold**


[Link](http://www.rockrms.com)

![Image](/Assets/Images/rock-logo-black.svg)

> Blockquote

* Apples
  * Red
  * Green
  * Blue
* Bananas
* Oranges

1. One
2. Two
3. Three

`Inline code` with backticks
```
# code block
print '3 backticks or'
print 'indent 4 spaces'
```

Horizontal Rule

---

**bold** *italics* >quote [link text](link address) more

Rock:CampusAccountAmountPicker

(SingleAccount Mode)

Resulting Campus Account

<Rock:CampusAccountAmountPicker ID="caapExampleSingleAccount" runat="server" AmountEntryMode="SingleAccount" AutoPostBack="true" OnAccountChanged="caapExample_Changed" OnCampusChanged="caapExample_Changed" />

<hr />
<Rock:RockLiteral ID="lCaapExampleSingleAccountResultAccount" runat="server" Label="Resulting Campus Account" Text="-"/>

Rock:CampusAccountAmountPicker

(MultipleAccounts Mode)

Campus

Resulting Campus Accounts

<Rock:CampusAccountAmountPicker ID="caapExampleMultiAccount" runat="server" AmountEntryMode="MultipleAccounts" OnAccountChanged="caapExample_Changed" OnCampusChanged="caapExample_Changed" />

 <hr />
<Rock:RockLiteral ID="lCaapExampleMultiAccountResultAccount" runat="server" Label="Resulting Campus Accounts" Text="-" />

CSS Rollovers

You often run across situations where you would like buttons or links to appear when you hover over a selection of code. Instead of using jQuery toggles you can use the CSS classes below. These classes can be applied to any tags. In order to support nested rollovers the actions must be direct descendants of their containers. On touch enabled devices the rollover-items will always be displayed.

(roll over the box to see effect)

Delete Export

<div class="alert alert-info rollover-container">
    <em>(roll over the box to see effect)</em>
    <div class="rollover-item pull-right">
        <a class="btn btn-default btn-xs" href="#">Delete</a>
        <a class="btn btn-default btn-xs" href="#">Export</a>
    </div>
</div>

Rock jQuery UI Library

To help promote consistence we have created a standard Rock jQuery UI Library. Below are the current functions with their usage patterns.

rockFadeIn()

Use this to fade in a selected DOM object in. The function hides the selector and then fades it in. Using this object will help provide consistent fade behavior.

Usage Examples

PrayerSession.ascx - Used when moving from one prayer request to another.
Check-in Layouts - Used to fade in the `<body>`

I Fade In

Press To Fade

<div class="js-fadepanel alert alert-info">
    I Fade In
</div>

<a href="#" class="js-fadebutton btn btn-sm btn-action">Press To Fade</a>

<script>
    $('.js-fadebutton').on("click", function () {
        $('.js-fadepanel').rockFadeIn();
        return false;
    });
</script>

Tip: When used within an UpdatePanel, you'll want to add your fade-in handler to the endRequest event of the PageRequestManager similar to this:

<script>
    function FadePanelIn() {
        $("[id$='upYourPanel']").rockFadeIn();
    }

    $(document).ready(function () { FadePanelIn(); });
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(FadePanelIn);
</script>

10am Attendance
10am Guest Attendance
11am Attendance
11am Guest Attendance
1st-12th Grade
2021 Inactive Process/Run Feb 1st
2022 Inactive Process
2022 Inactive Process/First Run
2022 Inactive Process/Letter #2
2022 Inactive Process/Letter #3
2022 Inactive Process/Second Run
2023 Inactive Process/First Run
35 and older
5th Grade Students
6:30am Attendance
6:30am Guest Attendance
6th Grade Students
7pm Attendance
7pm Guest Attendance
7th - 8th grade Girls
8:30am Attendance
8:30am Guest Attendance
Adult Member > Females
Adult Member > Males
Adult Member > Males 18+
Adult Member > Males 30-40yrs old - Target
Adult Member & Attendees > Males - Pastor Rob
Adult Members
Adult Members
Adult Members - Main Campus
Adult Members - No Email Addresses
Adult Members - No Email Addresses (>=21)
Adult Members - No Email Addresses (>=21)
Adult Members & Guests by Age
Adult Members Were giving and Stopped in the last 3 months
Adult Members Who Gave over the Past 3 Months
Adult Members who have NEVER Given to MMF
Adult Members who have NOT Given to MMF in Last 3 Months
Adults - Ages 20-30 with Marital Status (Copy)
Adults - Ages 20-33 Single (Active Status)
Adults 21-29 years old
Adults 25-35 years old
AG (Copy)
All Adult Men
All Adult Men (Widowers)
All Adult Women
All Adult Women (Widow)
All Adults
All Deceased
Attendance 28+ Times in 12 Months
Attendance List
Background check about to expire
Background check is still valid
Baptized Children (Specific Time Period)
Baptized Children in School Year
Baptized Members
Basic Demographics
Care Team Volunteers
Children
Children of Adult Members
Children Under 1yr
City
Class
Class Grade Promotion
College Age Graduating 2018-2014
Comfort Dog Donations
Confirmed Members
Conflict Profile Complete
Conflict Profile Incomplete
Congregation Letters
Congregation Letters - Male Only
Couples 25-50
Couples 51-65
Couples 66-80
Current Members Synodical Report
Day One Teachers
Deceased Connection Status Not Deceased Record
DISC Complete
DISC Incomplete
DM All Participants
DM Develop + Influence
DM Develop Participants
DM Develop Participants (sans DMP)
DM Influence Participants
Donor Report (1 year range)
Donors - 40 years and under
Easter Guests
Emotional Intelligence Complete
Emotional Intelligence Incomplete
Endowment Fund Donations
e-news recipients
Entered eRA
eRA Dynamic Report
eRA Start Date is not Blank
Essentials Class Complete
Essentials Class Incomplete
Exit eRA
Families that committed to CSP (MORE)-Family Members
Families that committed to CSP (MORE)-Individual Emails
Families that DID NOT commit to CSP (MORE)-Family Members
Families that DID NOT commit to CSP (MORE)-Individual Emails
Families within Nassau Bay
Female
First Time Individual Visitors
First Time Individual Visitors - Essentials Invite
First Time Individual Visitors - Essentials Invite (Sept)
Fully Alive App Members (sans DMP/Develop/Influence)
GDE Members
Giving - Empty
Giving for a Specific Fund
GPS Completed
GPS Incomplete
Grades
Graduating Seniors
Graduation Year
Guest Adult
Guests
Homebound
Homebound Members
Inactive Members Current Year - Synodical Report
Inactive Status - No Activity
Inactive Statuses - All
Inactive Statuses - Deceased
Inactive Statuses - Self Exclusion
Inactive Statuses - Transferred
Individuals by Family not Pledging in 2021
Individuals not serving (age group)
Individuals Serving
Infant-12th Grade
Infant-12th Grade Active Records
Infant-12th Grade Members
Infant-5th Grade
Joy
Kids Jr Families
Kids Parents 5th & 6th Grade
Kids Parents 5th-12th Grade*
Kids Parents 5th-8th Grade*
Kids Parents 6th Grade
Kids Parents 9th-12th Grade*
Kids Parents K-12th Grade*
Kids Parents K-4th Grade*
Kids Parents Kinder-4th Grade
Leaders in Groups of Group Type: Imported Groups
Main Campus Adult Members - No Spiritual Gifts Assessment
Main Campus Spiritual Gifts
Main Campus Spiritual Gifts (Copy)
Male
Married in 2024
Medical Release Form
Member Logins
Members
Members - Adults or Children, by City, Zip
Members - Inactive - 3 Months
Members - No Attendance/Giving - 1 Year
Members - No Attendance/Giving - 1 Year (Copy)
Members (Child and Adult)
Members 20-40 yrs old - Membership <2yrs
Members 25-49 yrs old - Membership
Members 70+
Members Deceased in Past Year
Member's Envelope Numbers
Members that Committed to CSP (MORE)
Members that Committed to CSP (MORE) (Crystal's Test)
Members that Committed to CSP (MORE)-Spouse File
Members that DID NOT Commit to CSP (MORE)
Members that DID NOT Pledge This Year
Members that Pledged Last Year
Members that Pledged This Year
Members who are in a Serving Team and a Small Group
Members who are not in a Serving Team and a Small Group
Members who made Pledges last year but not this year
Members with no age
Members with No Giving EVER
Membership Demographics
Memorial Letters
Men 18-65
Men Adults
Middle School Students
Middle School Students
Motivators Complete
Motivators Incomplete
Near Taylor Lake
New Members
No Age
No Contributions in last 12 months (52 weeks)
No Contributions in last 3 months (12 weeks)
No Contributions in last 6 months (24 weeks)
No Giving EVER
No Giving in 3 months
No Giving in Date Range
Non-Members Subscribed
Non-resident Confirm Members
Occupations
Occupations (Medical)
Parents of 5th and 6th Grade
Parents of 8th Grade Students
Parents of Early Teens (Ages 10-12)
Parents of Highschool (Ages 14-18)
Parents of Kids (Ages 5-10)
Parents of Kids Jr (Ages 0-5)
Parents of Middle School (Ages 12-14)
Pending People
People In Day One Groups
People Named Stephen Cupitt
People of Pledges
People Pledge 10/17-05/18
People that Attended Kid or Kids Jr Specific Date Range
People that Attended Kids Jr on Specific Date
People that Attended Kids Jr on Specific Date - Connection Status
People that Attended Kids Jr This last 7 Days
People that Attended Kids on Specific Date
People that Attended Kids the Last 7 Days
People that Attended the Student Center On Specific Date
People that Attended the Student Center On Specific Date-7th & 8th Grade
People that Attended the Student Center This Past Week
People that Attended Volunteer This last 7 Days
People that Gave for this First Time This Week.
People that pledged for the first time
People Who Have Never Given to MMF (past 3 months)
People who made Pledges last year but not this year
People who made Pledges this year
People with Birthdays Today
People with Duplicate Emails
People with Duplicate Phone Numbers
People with email fakeemail@123.com
People with Past Pledges
Peoples that Checked In Specific Date Range
Peoples that Checked In This Past Weekend
Peoples that Checked In This Past Weekend (AMH)
Potential Reach - Worship
Prayer Partners
Prospect People
Recommend Parents of Students for Impact Week
Released from membership
Self Inactivated
Serving - Front Desk
Serving Team Leaders
Serving Teams
SHAPE Profile
Shrimp Boil Attendees
Small Group & Adult Bible Study Leaders
Small Group Leaders
Spiritual Gifts
Spiritual Gifts Incomplete
Spiritual Gifts Searchable
Staff
Staff Page
Students 5th-12th Grade
Students 5th-12th Grade
Students 5th-7th Grade
Students 7th & 8th Grade
Students 8th-12th Grade
Students 9-12th Grade - Ross
Students 9th-12th Grade (Copy)
Students aged 11-13
Summer Camp
Teachers
Testing Dataview on Core Leaders Group
Under 35
Web Prospect Connection Status
Women Attendance - Last 16 Weeks
Women Attendance - Last 6 Months
Women's Ministry Email
Yearly Baptisms
Yearly Contributions - GDE Campus
Yearly Contributions - Main Campus

Control Gallery

General Information

Input Sizing Rules

Horizontal Forms

Margins and Padding

Format

Field Labels

Rock:Grid

Drop Downs

State Drop Down List

Button Drop Down List

Button Drop Down List Checkmark

Inputs

Text Box

Email Box

URL Link Box

Number Box

Address Control

Number Up Down (Stepper)

Check Box

Radio Button

Number Range

Rating Input

Range Slider

Pickers

Date/Time

Campus

Connections

DefinedValues

Events

Financial

Files and Images

Groups and Group Types

Interval

Locations

Geography Picker

Geography Picker

Pages

Person Pickers

Search

Search

Search

Search

Lava Commands

Lava Merge Fields

Merge Fields Templates

Reporting

SystemPhoneNumbers

Workflows

Other Pickers

Schedules

Misc

Rock:NotificationBox

Rock:TagLiteral

Rock:Badge

Rock:HighlightLabel

Rock:Toggle

Rock:ButtonGroup

Rock:BootstrapButton

Rock:AttributeEditor

Rock:HtmlEditor (Full)

Rock:HtmlEditor (Light)

Rock:CodeEditor

Rock:MarkdownEditor

Rock:CampusAccountAmountPicker

Rock:CampusAccountAmountPicker

CSS Rollovers

Rock jQuery UI Library

rockFadeIn()