Allcancode Platform v5
  • Introduction
  • Getting started
  • Managing projects
    • The list of projects
    • Creating a project
    • Sharing projects with teams
    • Basic project settings
  • Creating UI layouts
    • The container
    • Basic components
    • Creating a component
    • Working with layout properties
    • Working with styling properties
    • Building responsive layouts
  • Writing frontend logic
    • Introducing Blockly
    • Handling data
      • Session
      • Variable
    • Binding inputs to data
    • Binding text to data
    • Visualizing a list
    • Handling events
    • Navigating between pages/screens
    • Sharing data between pages/screens/components
    • Using native components
    • Creating native components
    • Creating a library of functions
  • Creating a backend
    • Defining endpoints
    • Creating a library of backend functions
  • Testing and debugging
    • Previewing a web application
    • Previewing a mobile app
    • The build log
    • The debug panel
  • How-to Guides
    • Sync code with git
      • Sync with GitHub
      • Sync with Gitlab
      • Sync with Bitbucket
    • Publish web applications
      • Publish web apps to Vercel
      • Publish web apps to Netlify
    • Publish mobiles apps
      • Publish mobile apps to stores
      • Publish mobile apps to Expo Go
      • mobile app with Expo
    • Implementing authentication
    • Implementing authorization
    • Supporting multilingual UIs
  • Release Notes
    • Release notes
Powered by GitBook
On this page

Was this helpful?

  1. Writing frontend logic

Visualizing a list

PreviousBinding text to dataNextHandling events

Last updated 1 year ago

Was this helpful?

Step 1: Create a component

First way of implementation

Step 2: Create a child component

Step 3: Right click on the child component

Step 4: Select "Properties"

Step 5: Add a property and type the name

Step 6: Select component

Step 7: Import the child component

Step 8: Select the child component, tap on "Visibility" panel, fill in "List Variable" and "Item Variable"

Step 9: Select child component and fill in "Text" field (content view panel) with list option's label starting with $.

Second way of implementation

Step 2: Import container

Step 3: Select container

Step 4: Create a variable and complement "List Variable" field (list view panel) with variable's name starting with $.

Step 5: Create a child component

Step 7: Complement "Item Variable" and select a component from "Component Name" dropdown

Step 8: Select child component

Step 9: Import a text

Step 10: Fill "Text" field (content view panel) with list option's label starting with $.