List menu's present a list of options to the user. Selecting an option loads
another screen. List menus are one of the most flexible screens types and
can be configured in lots of different ways. The items in the list can come
from the screens configuration data or a remote file hosted on a backend
server. Hosting the items on a remote server allows for dynamic changes.
This
shows the format of a remote file of list items.
{"itemId":"99999",
"itemType":"BT_screen_menuList",
"itemNickname":"List Menu",
"navBarTitleText":"Select One",
"dataURL":"http://mywebsite.com/listItems.php"}
|
Item Id *
|
"itemId":"a unique id"
A unique number or string identifiying this item from all other items in the
configuration file.
|
|
Item Type *
|
"itemType":"BT_screen_menuList"
Used by the mobile app to determine what type of item to create.
|
|
Item Nickname *
|
"itemNickname":"A unique nickname"
The nickname of the item in the buzztouch control panel.
|
|
Child Items
|
"childItems":[Array of List Items]
An array of Child Item JSON objects representing each item in the list.
Do not use a childItems array if the screen pulls it's items from a dataURL.
|
|
Data URL
|
"dataURL":"http://www.mysite.com/listItems.php"
A URL pointing to a file containing an
array of Child Item JSON objects representing each item in the list.
Do not use a dataURL if the screen uses a childItems array.
|
|
Status Bar Style *
|
"statusBarStyle":"default"
Options: default, solid, transparent, hidden.
|
|
Navigation Bar Title
|
"navBarTitleText":"The Screen Title"
The title text that shows in the navigation bar.
|
|
Navigation Bar Style *
|
"navBarStyle":"solid"
Options: solid, transparent, hidden.
|
|
Navigation Bar Color *
|
"navBarBackgroundColor":"#000000"
Hexidecimal color.
|
|
Left Button Text
|
"navBarBackButtonText":"Back"
Keep this short.
|
|
Right Button Type
|
"navBarRightButtonType":"infoLight"
Omit this property or leave the value blank for no right button.
Options: home, next, infoLight, infoDark, details, done, cancel, save, add, addBlue, compose,
reply, action, organize, bookmark, search, refresh, camera, trash, play, pause, stop, rewind,
fastForward
This property sets the image's type, it does not determine what happens when the button is tapped.
The Right Button Load Screen is what determines what happens when the button is tapped.
|
|
Right Button Load Screen
|
"navBarRightButtonTapLoadScreenItemId":"Another screen itemId"
OR
"navBarRightButtonTapLoadScreenNickname":"Another screen nickname"
OR
"navBarRightButtonTapLoadScreenObject":{a JSON sreen object}
The itemId, or the nickname, or the the JSON data for a screen or menu or feature.
Only one of these three properties will be used.
Keywords: Set the navBarRightButtonTapLoadScreenItemId to "back", "home" or
"showAudioControls" for special behaviors. These option will not load a screen but will
perform the action associated with the keyword.
|
|
Right Button Transition Type
|
"navBarRightButtonTapTransitionType":"flip"
Leave this blank for devices default transition. Or, use one of
these values: fade, flip, curl, grow, slideUp, slideDown.
|
|
Hide Bottom Tab Bar
|
"hideBottomTabBarWhenScreenLoads":"0"
Options: 0 or 1 where 1 = yes. This property is ignored when this screen is set as the home screen for
a tab or if the app does not use a tabbed layout.
|
|
List Style *
|
"listStyle":"plain"
Options: plain or round. Round creates rounded corners and margins around the list exposing
the background color.
|
|
List Background Color *
|
"listBackgroundColor":"clear"
Hexidecimal color or a keyword: "clear" or "stripes" (do not enter quotes).
|
|
List Rows Background Color *
|
"listRowBackgroundColor":"#FFFFFF"
Hexidecimal color or "clear" (do not enter quotes).
|
|
List Title Text Font Color *
|
"listTitleFontColor":"#000000"
Hexidecimal color. Title is line 1 of text.
|
|
List Description Text Font Color *
|
"listDescriptionFontColor":"#000000"
Hexidecimal color. Description is line 2 or more of text.
|
|
List Row Seperator Color *
|
"listRowSeparatorColor":"#000000"
Hexidecimal color or "clear" (do not enter quotes).
|
|
List Row Selection Style *
|
"listRowSelectionStyle":"blue"
Options: blue, gray, none.
|
|
List Row Height Small Device *
|
"listRowHeightSmallDevice":"50"
Numeric: The height of the list rows on small devices. Default is 50.
|
|
List Row Height Large Device *
|
"listRowHeightLargeDevice":"50"
Numeric: The height of the list rows on large devices. Defaults is 50.
|
|
List Title Height Small Device *
|
"listTitleHeightSmallDevice":"30"
Numeric: The height of the title in the row.
If a description is used, the description height
is the difference between the title height and the row height.
Default is 30.
|
|
List Title Height Large Device *
|
"listTitleHeightLargeDevice":"30"
Numeric: The height of the title in the row.
If a description is used, the description height
is the difference between the title height and the row height.
Default is 30.
|
|
List Title Font Size Small Device *
|
"listTitleFontSizeSmallDevice":"20"
Numeric: The font size of the title. Default is 20.
|
|
List Title Font Size Large Device *
|
"listTitleFontSizeLargeDevice":"20"
Numeric: The font size of the title. Default is 20.
|
|
List Description Font Size Small Device *
|
"listDescriptionFontSizeSmallDevice":"15"
Numeric: The font size of the description. Default is 15.
|
|
List Description Font Size Large Device *
|
"listDescriptionFontSizeLargeDevice":"15"
Numeric: The font size of the description. Default is 15.
|
|
List Header Height Small Device *
|
"listHeaderHeightSmallDevice":"10"
Numeric: The amount of space between the top of the list and the top of the screen.
Default is 10.
|
|
List Header Height Large Device *
|
"listHeaderHeightLargeDevice":"10"
Numeric: The amount of space between the top of the list and the top of the screen.
Default is 10.
|
|
List Footer Height Small Device *
|
"listFooterHeightSmallDevice":"50"
Numeric: The amount of space between the bottom of the list and the
bottom of the screen.
Default is 50.
|
|
List Footer Height Large Device *
|
"listFooterHeightLargeDevice":"50"
Numeric: The amount of space between the bottom of the list and the
bottom of the screen.
Default is 50.
|
|
Prevent Scrolling *
|
"preventAllScrolling":"0"
Options: 0 or 1 where 1 = yes.
|
|
Icon Size Small Device
|
"listIconSizeSmallDevice":"30"
Ignored if the List Items in the menu do not use icons.
|
|
Icon Size Large Device
|
"listIconSizeLargeDevice":"50"
Ignored if the List Items in the menu do not use icons.
|
|
Icon Size Small Device
|
"listIconScale":"center"
Options: center or scale. If the icons (or images) are larger then the row-height, use scale.
If the icons are smaller than the row-height, use center.
|
|
Apply Shiny Effect
|
"listIconApplyShinyEffect":"0"
Options: 0 or 1 where 1 = yes. Applies a shiny-effect to the image. Use this to dress-up bland square thumbnails.
|
|
Corner Radius
|
"listIconCornerRadius":"8"
Number. Use this to dress-up blank square thumbnails.
|
|
Header Image Small Device
|
"headerImageNameSmallDevice":"mySmallHeader.png"
OR
"headerImageURLSmallDevice":"http://mysite.com/mySmallHeader.png"
The file name of the image included in the Xcode or Eclipse project or the URL to the image.
This image will be used on small devices.
|
|
Header Image Large Device
|
"headerImageNameLargeDevice":"myLargeHeader.png"
OR
"headerImageURLLargeDevice":"http://mysite.com/myLargeHeader.png"
The file name of the image included in the Xcode or Eclipse project or the URL to the image.
This image will be used on large devices.
|
|
Header Image Height Small Device
|
"headerImageHeightSmallDevice":"100"
The height of the image for small devices.
|
|
Header Image Height Large Device
|
"headerImageHeightLargeDevice":"200"
The height of the image for large devices.
|
|
Header Image Width Small Device
|
"headerImageWidthSmallDevice":"300"
The width of the image for small devices.
|
|
Header Image Width Large Device
|
"headerImageWidthLargeDevice":"600"
The width of the image for large devices.
|
|
Header Image Top Position Small Device
|
"headerImageTopPosSmallDevice":"10"
The images top margin on small devices.
|
|
Header Image Top Position Large Device
|
"headerImageTopPosLargeDevice":"20"
The images top margin on large devices.
|
|
Header Image Corner Radius Small Device
|
"headerImageCornerRadiusSmallDevice":"8"
Number, the radius of the images corners on small devices.
Use an image with square corners
then set this property to automatically apply rounded corners.
|
|
Header Image Corner Radius Large Device
|
"headerImageCornerRadiusLargeDevice":"12"
Number, the radius of the images corners on small devices.
Use an image with square corners
then set this property to automatically apply rounded corners.
|
|
Header Image Scroll with List
|
"headerImageScrollWithList":"1"
Options: 0 or 1 where 1 = yes. If you want the image to remain in the header and the list to scroll under it be sure
to set an appropriate listHeaderHeightSmallDevice and / or listHeaderHeightLargeDevice in the menu so the top of the
list is far enough down the screen and not under the image. In these cases the list header height is usually slightly
more than the height of the image.
|
|
Header Image Tap Load Screen
|
"headerImageTapLoadScreenItemId":"Another screen itemId"
OR
"headerImageTapLoadScreenNickname":"Another screen nickname"
OR
"headerImageTapLoadScreenObject":{a JSON screen object}
The itemId, or the nickname, or the the JSON data for a screen or menu or feature.
Only one of these three properties will be used.
|
|
Header Image Tap Transition Type
|
"headerImageTapLoadScreenTransitionType":"flip"
Leave this blank for devices default transition. Or, use one of
these values: fade, flip, curl, grow, slideUp, slideDown.
|
|
Background Color *
|
"backgroundColor":"#000000"
Hexidecimal color or a keyword: "clear" or "stripes" (do not enter quotes).
|
|
Background Color Transparency *
|
"backgroundColorOpacity":"100"
Numeric Value: 1 - 100, 1 is totally transparent.
|
|
Background Color Gradient Top *
|
"backgroundColorGradientTop":"#000000"
Hexidecimal color. Background gradients flow top-to-bottom and are placed "on-top"
of a possible background color.
|
|
Background Color Gradient Bottom *
|
"backgroundColorGradientTop":"#FFFFFF"
Hexidecimal color. Background gradients flow top-to-bottom and are placed "on-top"
of a possible background color.
|
|
Background Image Small Device *
|
"backgroundImageNameSmallDevice":"background-small.png"
OR
"backgroundImageURLSmallDevice":"URL to background-small.png"
The file name of the image added to the project or the URL to the image.
Background images are placed "on-top" of possible background colors.
Use an image name OR a URL, not both.
|
|
Background Image Large Device *
|
"backgroundImageNameLargeDevice":"background-large.png"
OR
"backgroundImageURLLargeDevice":"URL to background-large.png"
The file name of the image added to the project or the URL to the image.
Background images are placed "on-top" of possible background colors.
Use an image name OR a URL, not both.
|
|
Background Image Transparency *
|
"backgroundImageOpacity":"100"
Number: 1 - 100, 1 is totally transparent.
|
|
Background Image Scale *
|
"backgroundImageScale":"center"
Options: center, fullScreen, fullScreenPreserve, top, bottom, topLeft, topRight,
bottomLeft, bottomRight.
|
|
Include Advertising
|
"includeAds":"0"
Options: 0 or 1 where 1 = yes.
|
|
Login Required
|
"loginRequired":"0"
Options: 0 or 1 where 1 = yes.
App must implement a Login screen.
|
|
Hide From Search
|
"hideFromSearch":"0"
Options: 0 or 1 where 1 = yes.
Hides from search results if the
app implements a Search Menu screen.
|