AppAlloy Documentation
Home
  • Glossary
  • 🚀Getting Started
    • Introduce AppAlloy Documentation
    • Build your first AppAlloy app
    • From sheet to app
  • 🗃️Data management
    • Learn data structure
    • Set up data source
      • Integrate with Google Sheets
      • Integrate with Microsoft Excel
      • Build Alloy table
      • Upload local file
    • Manage data type
    • Ultimate guide for data sheet
  • ⚒️Manage table views
    • Design Record View
    • Design Actions
      • Update current record
      • Delete current record
      • Delete many records
      • Create record
      • Open external URL
      • HTTP Request
      • Open phone call popup
      • Open SMS Popup
      • Open email popup
      • Send notification
    • Design Record Components
      • Plain Text
      • Phone number
      • Email
      • URL
      • Map
      • Barcode
      • Checkbox
      • Number
      • Currency
      • Rating
      • Voting
      • Date time
      • Relative date
      • Count Down / Count Up
      • Single Photo
      • Photo Gallery
      • Carousel
      • Audio Player
      • Video Player
      • Youtube Player
      • Vimeo Player
    • Design Form View
    • Design Form fields (synced tables)
      • Text (for synced tables)
      • Number (for synced tables)
      • Date time (for synced tables)
      • Checkbox (for synced table)
      • Options (for synced table)
      • Photos (for synced table)
      • Files (for synced table)
      • Table lookup (for synced table)
      • Signature (for synced table)
    • Design Form fields (Alloy tables)
      • Single line Text (for Alloy table)
      • Long Text (for Alloy table)
      • Phone number (for Alloy table)
      • Email (for Alloy table)
      • Barcode (for Alloy table)
      • Number (for Alloy table)
      • Currency (for Alloy table)
      • Checkbox (for Alloy table)
      • Date (for Alloy table)
      • Photos (for Alloy table)
      • Files (for Alloy table)
      • Single select (for Alloy table)
      • Multiple select (for Alloy table)
      • Address (for Alloy table)
      • Table lookup (for Alloy table)
  • 🎨Manage pages
    • Manage page types
    • Design 'View From' Page
    • Page Layouts
      • List Layout
      • Grid Layout
      • Card Layout
      • Map Layout
      • Checklist Layout
      • Calendar Layout
      • Kanban Layout
    • Design Canvas View Page
    • Canvas Charts
      • Line chart
      • Area Chart
      • Pie Chart
      • Donut Chart
      • Column chart vs. Stacked Column chart
      • Bar chart vs. Stacked bar chart
      • Table
    • Design Form of... Page
  • ⚙️Manage workflow
    • Introduce Workflow
    • Design a workflow
  • 🔌Manage Integration
    • Manage AppAlloy Integration
    • Manage Slack Integration
    • Manage Gmail Integration
    • Manage Google Drive Integration
    • Manage Google Calendar integration
  • 📱Manage App Settings
    • Manage app appearance
  • 🌎App distribution
    • Publish your app
    • Use app as Mobile Web app
    • Use app on AppAlloy Air
  • 🚹Account, team, and plan
    • Manage Account
    • Manage Apps
    • Manage Users
    • Manage Plans
    • Manage Teams
  • #️⃣Learn Power FX
    • Introduce Power FX
    • Operators & Identifiers
    • Formula References
      • Average
      • Concatenate
      • Date
      • DateAdd
      • DateDiff
      • DateValue
      • DateTimeValue
      • Day
      • If
      • Month
      • Now
      • Rand
      • RandBetween
      • Round
      • RoundDown
      • RoundUp
      • Sum
      • Text
      • Today
      • Weeknum
      • Weekday
      • Year
Powered by GitBook
On this page
  • What is ‘View from’?
  • Add a new 'View from' page
  • Design a 'View From....' page
  • Edit Page
  • Edit page title
  • Choose a page layout
  • Default search bar
  • Default sorting button
  • Edit Records
  • Edit Filtering
  • Filter with direct UI
  • Filter with Power FX
  • Edit Sorting
  • Edit Grouping
  • Edit Actions
  • Edit Tab

Was this helpful?

  1. Manage pages

Design 'View From' Page

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

Last updated 8 months ago

Was this helpful?

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.

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.

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.

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

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.

Photo URL gets data from the first column with or containing URLs.

Read the .

The Tab section is about .

🎨
Design Record View
PowerFx References
Design Record View
Design Form View
how your View from... page appears with other pages
Design a View From page
Collection layout for the View from... page
Search bar to navigate through items in the collection view
Sorting button on the view
Edit the item metadata
Options to set Filtering on records
Add a new filter with direct UI
Configure the conditions using filter with direct UI
Configure condition group using filter with direct UI
Configure the item sorting in View From page
Create item categories with Grouping section
Configure interactive buttons for users to work with data
Customize the appearance of view on main menu bar of the app
data type as Photos