Interactive User Lists with Televo Navigation
This comprehensive guide outlines the development of an interactive user list within the Televo framework, focusing on enhancing mobile applications through engaging list presentations and seamless navigation capabilities. The design leverages Televo's JSON-configurable UI components, emphasizing user-friendly interactions and intuitive navigation paths.
Overview
The interactive user list is a dynamic UI component designed to display a collection of user profiles. It provides essential information at a glance, such as names, profile images, and brief messages or statuses, and incorporates interactive elements to facilitate navigation to detailed user information or actions.
Key Features
- Profile Avatars and User Information: Visually represent users with avatars and display relevant information, enhancing recognition and interaction.
- Navigation Triggers: Utilize actionable components for navigating to detailed views or performing specific actions, improving user engagement.
- Adaptable Design: Ensure compatibility with both light and dark themes, maintaining consistency across various user preferences.
Component Structure
The user list is structured within a column container, featuring a heading and a scrollable list of user profiles, each encapsulated as an interactive element for detailed navigation.
JSON Structure Overview
{
"type": "column",
"data": {
"children": [
{
"type": "text",
"data": {
"text": "Friends"
},
"style": {
"fontStyle": "headline4",
"fontWeight": "bold",
}
},
{
"type": "list",
"data": {
"items": [
{
"name": "Alice Smith",
"profileAvatarURL": "https://img.freepik.com/free-psd/3d-illustration-person-with-sunglasses_23-2149436188.jpg?size=626&ext=jpg&ga=GA1.1.768410946.1707471582&semt=ais",
"lastMessage": "Hey, are you free to talk tomorrow? I have some exciting news about the project we discussed last week and would love to share the details with you."
},
{
"name": "Bob Johnson",
"profileAvatarURL": "https://img.freepik.com/free-psd/3d-illustration-human-avatar-profile_23-2150671142.jpg?size=626&ext=jpg&ga=GA1.1.768410946.1707471582&semt=ais",
"lastMessage": "That sounds great, I'll see you then!"
},
{
"name": "Charlie Davis",
"profileAvatarURL": "https://img.freepik.com/free-psd/3d-illustration-person-with-sunglasses_23-2149436200.jpg?size=626&ext=jpg&ga=GA1.1.768410946.1707471582&semt=ais",
"lastMessage": "Can you send over the files?"
},
{
"name": "Dana Lee",
"profileAvatarURL": "https://img.freepik.com/free-psd/3d-rendering-avatar_23-2150833554.jpg?size=626&ext=jpg&ga=GA1.1.768410946.1707471582&semt=ais",
"lastMessage": "Loved the movie, thanks for recommending!"
},
{
"name": "Evan Moore",
"profileAvatarURL": "https://img.freepik.com/free-psd/3d-illustration-human-avatar-profile_23-2150671122.jpg?size=626&ext=jpg&ga=GA1.1.768410946.1707471582&semt=ais",
"lastMessage": "I'll catch up with you later."
}
],
"child": {
"type": "elevatedButton",
"action": {
"type": "push",
// "destination": "petDetail",
"payload": {
"data": {
"children": [
]
}
}
},
"data": {
"child": {
"type": "listTile",
"data": {
"title": {
"type": "text",
"data": {
"text": "{{data.name}}"
},
"style": {
"fontStyle": "headline6",
"fontWeight": "semibold",
}
},
"subtitle": {
"type": "text",
"data": {
// "text": "This is the subtitle text which can be changes as per the use case while implementation."
"text": "{{data.lastMessage}}"
},
"style": {
"fontSize": 14,
"maxLines": 2,
}
},
"leading": {
"type": "networkImage",
"data": {
// "imageUrl": "https://img.freepik.com/free-psd/3d-illustration-person-with-sunglasses_23-2149436188.jpg?size=626&ext=jpg&ga=GA1.1.768410946.1707471582&semt=ais"
"imageUrl": "{{data.profileAvatarURL}}"
// "imageUrl": "https://example.com/images/generic-avatar.png"
},
"style": {
"height": 70,
"width": 70,
"scale": "fit",
"cornerRadius": 50,
"padding": {
"right": 8
}
}
},
"trailing": {
"type": "icon",
"data": {
"icon": "chevron.right"
},
"style": {
"height": 20,
"width": 20,
}
}
},
"style": {
"backgroundColor": "f8f8f8",
"backgroundColorDark": "202020"
}
}
},
"style": {
"contentPadding": {
"top": 0,
"right": 0,
"bottom": 0,
"left": 0
},
"cornerRadius": 24,
"backgroundColor": "f8f8f8",
"backgroundColorDark": "202020"
}
}
},
"style": {
"axis": "vertical",
"itemSpacing": 4,
}
}
]
},
"style": {
"alignment": "leading",
"padding": {
"top": 20,
"bottom": 20
}
}
}
Detailed Component Breakdown
Column
At the highest level, the column type serves as a vertical container, organizing its child components linearly. This is crucial for maintaining a clean, ordered presentation of information, starting with a heading and followed by the user list.
"type": "column",
"style": {
"alignment": "leading",
"padding": {"top": 20, "bottom": 20}
}
The alignment and padding ensure that the content is aesthetically pleasing and accessible, adhering to design best practices.
Heading (Text Component)
The heading, marked by its headline4 and bold styling, introduces the list's context. This component sets the tone and provides clarity to the user about the list's content.
"type": "text",
"data": {"text": "Friends"},
"style": {"fontStyle": "headline4", "fontWeight": "bold"}
User List
The user list is a dynamic collection of user profiles, encapsulated within a list type. Each item within the items array represents individual user data, including their name, profile picture, and a snippet of their latest activity or message.
"type": "list",
"style": {"axis": "vertical", "itemSpacing": 4},
"data": {
"items": [...]
}
The vertical axis and itemSpacing ensure that each user profile is distinct and easily navigable.
ElevatedButton with ListTile
Each user profile is wrapped in an elevatedButton component, transforming it into an interactive element. This is where the action types—push and sheet—come into play, dictating the navigation flow upon interaction.
"type": "elevatedButton",
"action": {"type": "push", "payload": {...}},
"data": {
"child": {"type": "listTile", "data": {...}, "style": {...}}
}
ListTile
The listTile component plays a crucial role in the user interface of mobile applications, particularly when presenting lists of items such as contacts, emails, or any other form of listed data. It's designed to offer a concise yet informative snapshot of an item within a list, providing users with key details at a glance and improving the overall usability of an application. Let's delve into the anatomy of the listTile component, its functionalities, and how it enhances user experience.
- Leading: This element usually hosts an icon or image, serving as a visual identifier for the item. In the context of a user list, it often displays the user's profile picture. The visual cue helps users quickly associate the list item with its content or function.
"leading": {
"type": "networkImage",
"data": {
"imageUrl": "{{data.profileAvatarURL}}"
},
"style": {
"height": 70,
"width": 70,
"scale": "fit",
"cornerRadius": 50
}
}
- Title: This is typically the primary label of the list item, such as a user's name or an email subject. It's prominently displayed and usually styled to stand out as the most important piece of textual information.
"title": {
"type": "text",
"data": {
"text": "{{data.name}}"
},
"style": {
"fontStyle": "headline6",
"fontWeight": "semibold"
}
}
- Subtitle: Often used to display secondary information or a brief description, the subtitle complements the title by providing additional context. This could be the last message from a user or a brief summary of an email.
"subtitle": {
"type": "text",
"data": {
"text": "{{data.lastMessage}}"
},
"style": {
"fontSize": 14,
"maxLines": 2
}
}
- Trailing: This element appears on the opposite end of the leading element and is often used for navigation indicators (like chevrons) or action icons (such as delete or more options). It signals to users that additional interactions are available.
"trailing": {
"type": "icon",
"data": {
"icon": "chevron.right"
},
"style": {
"height": 20,
"width": 20
}
}
Action
- Push: This action type is used to navigate to a new screen within the application, typically to provide more detailed information about the selected user profile. It represents a forward navigation action, pushing a new route onto the stack.
"action": {"type": "push", "payload": {...}}
The payload can carry data to the destination screen, allowing for a personalized and context-aware detailed view.
- Sheet: Alternatively, the
sheetaction type triggers a bottom sheet to slide up from the bottom of the screen. This is often used for actions or details that do not necessitate a full screen transition but still provide additional context or functionalities.
"action": {"type": "sheet", "payload": {...}}
The payload here, similar to the push action, can include data relevant to what the bottom sheet should display, enabling dynamic content delivery without leaving the current context.
Customization and Flexibility
The JSON configuration allows for extensive customization, enabling developers to adjust the visual and functional aspects of the user list to fit their specific application needs. This flexibility ensures that the component can evolve alongside the application, adapting to new requirements or design trends.
Conclusion
The interactive user list component represents a core element in creating engaging and intuitive user interfaces within the Televo framework. By combining essential information with seamless navigation capabilities, this component significantly enhances the user experience, encouraging interaction and exploration within applications. Through careful design and thoughtful implementation, developers can leverage this component to create rich, dynamic user interfaces that resonate with their audience.