Welcome, Guest Login

Support Center

List Block

Last Updated: Jun 13, 2017 03:22PM EDT

List

Version: 4.00

List of text and images, very useful to quickly build list of any kind based on a Data Source. For example a list o headlines for a media app, products for ecommerce.

Click Here to View How-To Video

Usage

Drag this block into your app and then you can edit it's settings by right clicking on the block with your mouse.

List is a great starting Block to add a scrollable list of images and text to your app.
The content populating the list comes from a Data Source, either an RSS, XML or JSON feed or an EachScape Cloud Collection.
You can also add intermediary items every N th items of the list. This is mostly used to show ads.
Last you can add a different Block on Top or at the Bottom of the list. For example display a bigger image for the first article (classic UI settings for News apps)

You can set optional images for right and left side of a row, and set one or more text areas whose formatting you can customize. There are many parameters available to customize your List.

** WARNING: The List Block should not be used with Content Distribution files. It will not perform optimally **

Advanced List
To build custom list, you should use Layouts and the Pattern feature of Layouts.
Start learning Pattern now, watch this video.

Parameters

Data Source Either an [RSS, XML or JSON feed] (http://support.eachscape.com/customer/en/portal/articles/1567899-process-rss-xml-json-as-a-live-feed) or content from [EachScape Cloud Collection](http://support.eachscape.com/customer/en/portal/articles/1368259-eachscape-cloud-collection)
Anchor To Bottom ANDROID ONLY. This is to anchor the list to the bottom of the middle block if it's less then the full space. Useful for something like Table of Contents.
Reload Image If present, this will enable the "pull-down to reload" feature. It may be transparent, but must be sized as it determines the height of the reload area above the list.
Reload Text Color The color to use for the reload text.
Sticky Select If checked, the highlight effect of the cell will remain highlighted.
Highlighted Background Color Color to use for cell background when it is selected.
Row Visited Background Color If supplied, this color is used as the background color for a row if it had been previously visited. (The visited state is NOT persisted and will be reset when the app is restarted.)
Scroll To Current Record Scrolls the list item corresponding to the current data source record to the top of the view.
Animate Scrolling Whether scrolling to the current record should be animated or instantaneous.
Create Links ANDROID ONLY. If checked, URLs found within the text will be displayed as links. Users will be able to click on the links and open a browser window.
Row Height Height of each element in the list. If not set, the height will be calculated.
Row Background Color The background color of each element.
Row Background Image The image to display in the background of each element.
Row Separator Color Color of the separator line between items. If not set, no line is displayed.
White Scroll Indicator If checked, the scrolling indicator will be white instead of the default black color.
Inter Item Height The number of pixels between items.
Text Vertical Alignment The vertical alignment of all text lines in each cell.
Text Vertical Padding The amount of pixels to pad if the text is top or bottom aligned. (Ignored if it is middle aligned.)
Items The number of text items displayed in each list row.
Item The expression to be displayed in each element in the list. Usually a field from your Datasource. It can be calculated, to do so, choose 'edit' at the bottom of the scrolling menu to access the Expression Editor.
Max Lines The maximum number of lines of text to display for the item.
Font The font for the item text.
Disclosure Indicators Small indicators at the right-most edge of each headline list element. They indicate that tapping on the item will lead to another display. Generally you will want these if the tap action is defined for this block.
Disclosure Indicator Image The image to display for the disclosure indicator. If not specified, a generic '>' indicator is displayed. The image is not scaled, so it must be small enough to fit in the list item. The background should be transparent.
Left Image The expression you enter here will be the left-side image displayed for each element of the list. As for the text item of the list, you can calculate that expression using 'edit' at the bottom of the list.
Left Overlay Image image: An optional image overlaid on the left image.
Left Loading Image The image displayed when the left image is being loaded from a URL.
Left Placeholder Image The image displayed when a row has no image of its own.
Left Image Width The width of the left-side image. If not specified, the image will be square.
Right Image The expression you enter here will be the right-side image displayed for each element of the list.
Right Loading Image The image displayed when the right image is being loaded from a URL.
Right Image Width The width of the right-side image. If not specified, the image will be square.
Left Image Margin The background margin around the images.
Left Image Height The height of the images. If not set, this value will be calculated.
Empty Result Text The text to display when there are no rows.
Empty Result Font The font for the empty result.
More Item Image This is the image that will be displayed as an overlay on the bottom of the list block to show that there are more items in the list. If this is not set then it'll just do default behavior.
Top Item Block An optional custom block (myBlock) for the first list item. Very useful to display a Block which is different than the list rows, for example a large image for a first article for a news headline list. You have to define the inserted Block as a MyBlock before you can insert it. Learn how to [create custom blocks using MyBlock] (http://support.eachscape.com/customer/portal/articles/1364381)
Top Item Block Height If Top Item is specified, the height of the item.
Bottom Item Block An optional custom block for the last list item. Very useful to display a Block which is different than the list rows, for example a bottom ad. You have to define the inserted Block as a MyBlock before you can insert it. Learn how to [create custom blocks using MyBlock] (http://support.eachscape.com/customer/portal/articles/1364381)
Bottom Item Block Height If Bottom Item is specified, the height of the item.
Inside Item Block An optional custom block which repeats every Nth row. This is mostly useful to display an interstitial Ad but can be used to insert any kind of repeating Block. You have to define the inserted Block as a MyBlock before you can insert it. Learn how to [create custom blocks using MyBlock] (http://support.eachscape.com/customer/portal/articles/1364381)
Inside Item Block Height If Inside Item is specified, the height of the items.
Inside Item Block Interval The frequency with which the item is repeated (every Nth item).

Event(s)

Before Draw, Tap, Tap Left, Tap Right, Tap Disclosure, Refresh Requested

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets2.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete