Design 'View From' Page

'View From' page is also known as 'Collection view' page, displaying a large dataset in a scrollable list.

The 'View From...' page should be used to view all records with a specified data source. By hovering to this page type, you will be able to see all the data tables available for you to import to your new page.

What is ‘View from’?

View from is a user interface displaying a database. The automatic layout of the ‘View From ....’ page is a scrollable list. View From also has another name 'Collection View'.

The records contained in this interface are normally arranged vertically or horizontally, including text, images, and/or videos.

Add a new 'View from' page

The ‘View from...’ page lets your end-users intuitively view the data set and seamlessly navigate data records.

To add a new "View from..." page:

On the section Pages, click the + button
Hover on View from...
Choose a data table as the data source for the collection view.

Design a 'View From....' page

Designing your page view is intuitively organizing records so that the end-users can easily navigate through your records without being overwhelmed by your database even if it's huge.

In the App Editor, navigate to the Design tab
On the right sidebar, start designing your page. All the changes you've made will automatically sync to your center mobile preview.

Edit Page

Edit page title

To edit the page title, simply click on the Title option. By default, AppAlloy will auto-generate these fields by the data table values.

You can choose to customize your own or use the available data models to name your table.

Click on the None option if you don't need a title for your table.

Choose a page layout

The page layout defines how your items are arranged within the collection view. AppAlloy offers various layout options to suit your needs:

List: display records in a vertical list.
Card: display records in a vertical list as well but also with bigger images.
Grid: display records in a grid format with two columns.
Map: display records as location pins on a map.
Checklist: display records as a to-do list.
Calendar: display records as events on a calendar.

Default search bar

AppAlloy search bar is automatically enabled, to help users quickly find the records they are looking for. Users can choose to:

Search for keyword.
Scan the barcode to find the exact record.

If your keyword has a single answer, the app will automatically move to the Record view of that record. Otherwise, the scrollable list will appear for you to find your best answer.

Design Record View

Default sorting button

AppAlloy automatically implements a sorting button at the top of the screen, next to the page title, for your users' convenience.

This sorting button enables users to organize records based on specific criteria, allowing them to find relevant information more efficiently.

The sorting options are generated based on the table view associated with the current page, allowing records to be sorted according to each column in the table.

Edit Records

AppAlloy lets you configure your Title, Subtitle, and Photo for the representation of each record in the View from... page.

By default, with the help of OpenAI, AppAlloy will automatically detect the data, from the table for these fields:

Title gets data from the display column.
Subtitle gets data from the first column with data type as plain text.
Photo URL gets data from the first column with data type as Photos or containing URLs.

Click on these settings fields, and you have full rights to customize these settings.

Edit Filtering

Initial filtering allows the app creator to decide which records will be visible on the View from... page, ensuring that users get the most relevant and valuable content.

There are 2 options of filter:

Filter: choose columns and set condition values with direct UI
PowerFX: write the filtering condition with the PowerFX formula.

Filter with direct UI

Direct UI filtering is best suited for straightforward filtering tasks where you want to quickly select columns, conditions, and values without needing to write any code. The direct UI provides a user-friendly interface that allows for easy and fast setup of filters.

To add a filter with direct UI

in the section Filtering, switch the toggle to enable filtering
click the field Show item if the following is true, and choose Filter
choose + Add condition or + Add condition group

What is condition and condition group?

Condition: A single criterion that defines a filter. It consists of a column, a condition type, and a condition value.
Condition Group: A set of conditions grouped together. You can link multiple condition groups using logical operators (OR or AND) to refine your filter further.

To add a condition

Click + Add condition
Choose a column as the filtering criteria
Choose the condition type that best suits your needs such as equals, contains, greater than, less than, etc.
Input the specific value or range of values that will be used for filtering.

If you need to apply multiple filters:

Click the “Add Condition” button and modify the same steps as the previous one
Configure the relation between conditions using :
- "and" to require all conditions must be true, or
- "or" to require any condition must be true.

the relation is configured by once to be applied for all the following

To add a group filer

Click + Add condition group
Within the group field, click the + button on the right end to add a new condition to the group
Configure the condition of the group with the same steps as the single condition configuration.
Configure the relation between a single condition-group, group-group, and condition-condition inside a group using the:
- "and" to require all conditions must be true, or
- "or" to require any condition must be true.

the relation is configured by once to be applied for all the following

Filter with Power FX

PowerFX is ideal when you need to create filters that involve complex logic, dynamic conditions, or calculations. This method allows you to write custom formulas to define filtering conditions, providing flexibility and precision that may not be achievable with the direct UI.

Read the PowerFx References.

To add a filtering rule with Power FX

in the section Filtering, switch the toggle to enable filtering
click the field Show item if the following is true, and choose Power FX
in the formula editor, write the filtering rules using PowerFx with the list of columns and user attributes added for your convenient use.
if you have no idea how to write this language, go to the copilot bar, write a prompt describing how you want to filter, and let the AI assistant do its job
click the "Save" button to save & apply the rule

Edit Sorting

The initial sorting contributes to the default view of your 'View from' page, ensuring that your users see impactful sortings in the most user-friendly way.

To add a sort criteria:

in the section Sorting, click the + button to see all columns.
choose a column from your table as sorting criteria.
configure the sorting items ascending or descending.

You can add multiple sorting items at the same time.

Edit Grouping

Grouping is used to create record categories and to organize large sets of records into meaningful groups, so the users can easily browse for items.

To categorize your items:

in the Grouping section, switch the toggle to enable
choose a column as the categorizing criteria

Edit Actions

Using in-app actions is a way to enhance user usability, also to make the app more engaging.

On the View from... page, you can configure 4 types of actions for your users to interact:

Edit a record.
Add a new record.
Delete a record.
Tap on a record to open another view.

To configure the actions

in the section Actions, switch the toggle button
in the On item tapped, and configure the result action:
- to open the form view to edit the record, or
- to open the record view to see the details of the record.
in Allow Users to, check the box if you want to allow users to:
- Add new items: Users get a new round + button added at the bottom right corner of the page.
- Edit & Delete items: Users can swipe record left, and see 2 buttons Delete and Edit.

Edit Tab

The Tab section is about how your View from... page appears with other pages.

In this section, you may configure:

Page title: name of your page when it appears with other pages. By default, it is set after your data table.
Badge: provide additional information or highlight a specific update. You can set it to a number or a message.
Hidden: to hide or show your page with other pages.

What's next

See how you can design the record view and form view related to each record in the collection of the View from... page.

Design Record View Design Form View

Last updated 25 days ago