Skip to main content

🗂ī¸ Other

The Other category includes specially designed components that offer unique functionalities and customization options. These components are tailored for specific use cases and provide advanced features to enhance your application's capabilities.

Available Components:​

  • Card
  • Carousel
  • Web Embedded
  • Google Maps
  • Chart
  • Stepper
  • Timeline
  • Avatar
  • Progress Bar
  • Tooltip

Card​

  1. Add the Card:
    • Drag and drop the Card component onto the Canvas.
    • Place the card in the desired location and adjust its size using percentage values or by dragging its edges.
  2. Set and Customize:
    • Component Settings:
      • Element Tree: Click on the entire card to view and interact with its nested elements.
      • Double-Click Elements: Double-click on individual elements within the card to customize them as described in their respective sections.
      • Add Action: Select "Add Action" to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Styles:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the Styles may vary depending on the selected component type.

  1. Add the Carousel:
    • Drag and drop the Carousel component onto the Canvas.
    • Place the carousel in the desired location and adjust its size accordingly.
  2. Customize the Carousel:
    • Component Settings:
      • Effect Selection: Choose the transition effect for image appearance.
      • Pagination Settings: Define how images will change (e.g., dots, numbers).
      • Show Arrows: Enable or disable navigation arrows.
      • Autoplay: Set the carousel to autoplay slides.
      • Loop Slides: Enable looping of slides.
      • Add Image Links: Insert URLs for the images to be displayed.
      • Add Action: Select "Add Action" to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Styles:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the Styles may vary depending on the selected component type.

Web Embedded​

  1. Add the Web Embedded:
    • Drag and drop the Web Embedded component onto the Canvas.
    • Place the web embedded component in the desired location and adjust its size accordingly.
  2. Customize the Web Embedded:
    • Component Settings:
      • Add Website Link: Paste the URL of the website you want to embed within your app.
      • Add Action: Select "Add Action" to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Styles:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the Styles may vary depending on the selected component type.

Map​

The Map component allows you to display interactive Google Maps within your application. You can set markers, define the initial location, control the zoom level, and more.

Prerequisites: Setting Up Your Google Developer Console​

  1. Create a Project
    • Go to the Google Developers Console.
    • Sign in with your Google account and complete any required billing details.
    • Click Create Project and give it an appropriate name.
  2. Enable Required APIs
    • Select your project and navigate to APIs & Services → Library.
    • Enable the following APIs (plus any others you may need):
      • Geocoding API
      • Places API
      • Geolocation API
      • Maps JavaScript API
      • Time Zone API
  3. Generate an API Key
    • Go to APIs & Services → Credentials.
    • Click Create Credentials → API Key.
    • Copy the generated API key and keep it handy for AppStruct.
tip
  • Google Billing: Ensure your Google project is linked to a billing account to avoid service interruptions.
  • API Propagation: Changes in API key settings may take a few minutes to propagate.
  • Accuracy: For non-US addresses, adding a Map element can improve the accuracy of location data.

Adding the Map Component​

  1. Add the Map
    • Drag and drop the Map component onto the Canvas.
    • Position it where you want it to appear and adjust its size by dragging its edges or using percentage values.
  2. Set and Customize the Map
    • Component Settings:
      • Google Maps API Key: Paste the key you obtained from the Google Developer Console.
      • Initial Zoom: Specify the default zoom level. Higher values zoom in, lower values zoom out.
      • Center or Custom Position:
        • Enter the Latitude and Longitude to set the map's center.
        • Alternatively, enable "Center on user's geolocation" if you want the map to automatically center on the user's current position (requires user permission).
      • Enable Default UI: Toggle on to show Google's default map controls (zoom, map type, etc.).
        • Note: Some UI elements might not appear if the map's size is too small.
      • Add Marker Manually:
        • Click "Add Marker Manually" to define markers by latitude and longitude.
        • Provide a title or description for each marker.
      • Add Action: Select "Add Action" to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Styles:
      • Utilize all available customization features (e.g., border style, shadow, corner radius).
      • Refer to the Customization Guide for detailed instructions on advanced styling.
tip

The settings available in the Styles may vary depending on the selected component type.

Chart​

The Chart component displays data visually in formats such as line, bar, pie, and doughnut charts. It is ideal for highlighting trends, comparisons, and performance metrics. You can customize datasets, labels, colors, and more to present complex data in a clear, engaging way.

  1. Add the Chart

    • Drag and drop the Map component onto the Canvas.
    • Position it where you want it to appear and adjust its size by dragging its edges or using percentage values.

  2. Configure the Chart

  • Component Settings

    • Chart Type: Choose the format best suited for your data (e.g., Line, Bar, Pie, Doughnut).
    • Chart Title: Enter a descriptive title (e.g., "Monthly Sales") to help users understand what the chart represents.
    • Legend Position: Select where the legend should appear (Top, Bottom, Left, Right, or Hidden).
    • Labels (X-Axis): Enter category labels (e.g., "January, February, March, April").
    • Datasets: Label: Provide a label for each dataset (e.g., "Dataset 1" or "Sales"). Data: Add comma-separated values for your dataset (e.g., "65, 59, 80, 81"). Add Multiple Datasets: Click + Add Dataset to include additional series for comparison.
    • Add Action: Select "Add Action" to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.

  • Styles:

    • Utilize all available customization features (e.g., border style, shadow, corner radius).
    • Refer to the Customization Guide for detailed instructions on advanced styling.
tip

The settings available in the Styles may vary depending on the selected component type.

Example: Creating a Line Chart for Monthly Sales​

  1. Add the Chart Component: Drag the Chart component to your layout.
  2. Set Chart Type: Select Line as the chart type for showing trends.
  3. Enter Labels: Set the labels to "January, February, March, April, May, June".
  4. Configure Datasets:
    • Dataset 1 Label: "Sales"
    • Dataset 1 Data: "65, 59, 80, 81, 56, 55"
  5. Add Additional Datasets: (Optional)
    • Dataset 2 Label: "Target"
    • Dataset 2 Data: "55, 79, 10, 81, 66, 45"
  6. Style the Chart: Customize the background color and adjust the text color for better contrast.
  7. Preview: Click Preview to see your chart in action.

Stepper​

The Stepper component provides a multi-step navigation interface, perfect for forms, onboarding processes, and guided workflows. It displays a sequence of numbered steps with optional titles and descriptions, allowing users to track their progress through complex processes.

Key Features:

  • Steps Configuration: Add multiple steps with customizable labels and descriptions
  • Active Step Management: Control which step is currently active
  • Step Navigation: Allow users to navigate between completed steps
  • Progress Indication: Visual feedback showing completion status
  • Responsive Design: Adapts to different screen sizes with mobile-optimized layouts

Settings:

  • Steps: Define the sequence of steps with title and description for each
  • Active Step: Set which step should be highlighted as the current step
  • Navigation: Configure whether users can click to navigate between steps

Use Cases:

  • Multi-step forms (registration, checkout, surveys)
  • Onboarding flows for new users
  • Guided tutorials and setup wizards
  • Complex data entry processes

Timeline Component​

The Timeline component displays chronological events in an organized, vertical layout. Perfect for showing activity feeds, project milestones, company history, or any time-based sequence of events.

Key Features:

  • Event Management: Add multiple events with titles, descriptions, and dates
  • Visual Customization: Show/hide dates, toggle alternating layout
  • Compact View: Option for space-efficient display
  • Responsive Design: Mobile-optimized with touch-friendly interactions

Settings:

  • Events: Configure timeline events with title, description, and date fields
  • Show Dates: Toggle visibility of date information
  • Alternating Layout: Switch between left-aligned and alternating event placement
  • Compact View: Enable condensed display for space-constrained layouts

Use Cases:

  • Company milestones and history pages
  • Project timeline tracking
  • User activity feeds
  • Event chronologies and news timelines

Avatar Component​

The Avatar component displays user profile images with extensive customization options. It supports both image uploads and text-based initials, making it perfect for user interfaces, team displays, and profile sections.

Key Features:

  • Flexible Display: Support for both images and text initials
  • Shape Options: Choose between circular, square, or rounded rectangle shapes
  • Size Variants: Multiple size options from small to extra large
  • Status Indicators: Optional status badges for online/offline states
  • Fallback Support: Automatic fallback to initials when image unavailable

Settings:

  • Image: Upload or link to profile image
  • Initials: Set text initials as fallback or primary display
  • Show Initials: Toggle between image and initials display
  • Shape: Select from circular, square, or rounded shapes
  • Size: Choose from predefined size options
  • Status: Add status indicator (online, offline, busy, away)
  • Status Position: Control placement of status indicator

Use Cases:

  • User profile displays
  • Team member showcases
  • Comment sections and forums
  • Contact lists and directories

Progress Bar Component​

The Progress Bar component provides visual feedback for loading states, task completion, and progress tracking. It offers multiple display styles and animation options to match your application's design requirements.

Key Features:

  • Progress Tracking: Display completion percentage from 0-100%
  • Text Display: Optional progress text with customizable positioning
  • Animation Support: Smooth progress transitions with timing controls
  • Style Variants: Multiple visual styles including striped and gradient options
  • Auto-start: Automatic progress initiation on component load

Settings:

  • Progress Value: Set the current progress percentage (0-100)
  • Show Text: Toggle visibility of progress percentage text
  • Text Position: Control text placement (inside, outside, center)
  • Bar Style: Choose visual style (solid, striped, gradient)
  • Animated: Enable smooth progress transitions
  • Animation Duration: Control animation timing
  • Auto Start: Automatically begin progress on load
  • Custom Format: Use custom text formatting
  • Animation Type: Select animation style (linear, ease, bounce)
  • Stripe Animation: Enable animated stripe effects

Use Cases:

  • File upload progress
  • Form completion tracking
  • Loading states for data fetching
  • Skill level displays
  • Achievement progress

Tooltip Component​

The Tooltip component provides contextual information that appears when users hover over or focus on elements. It's essential for improving user experience by offering helpful hints and explanations without cluttering the interface.

Key Features:

  • Contextual Help: Display additional information on demand
  • Smart Positioning: Automatic placement to stay within viewport
  • Arrow Indicators: Optional arrows pointing to trigger elements
  • Flexible Triggers: Support for hover, click, and focus interactions
  • Responsive Design: Mobile-optimized with touch-friendly behavior

Settings:

  • Content: Set the tooltip text or rich content
  • Arrow Position: Control arrow placement and visibility
  • Show Arrow: Toggle arrow display on/off
  • Trigger: Choose activation method (hover, click, focus)
  • Placement: Set preferred position (top, bottom, left, right)
  • Delay: Configure show/hide timing

Use Cases:

  • Form field explanations
  • Icon and button descriptions
  • Feature introductions
  • Help documentation
  • Interactive tutorials

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].