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

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:
    • Left Toolbar:
      • 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.
    • Right Toolbar:
      • 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 right toolbar 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:
    • Left Toolbar:
      • 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.
    • Right Toolbar:
      • 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 right toolbar 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:
    • Left Toolbar:
      • 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.
    • Right Toolbar:
      • 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 right toolbar 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
    • Left Toolbar:
      • 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.
    • Right Toolbar:
      • 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 right toolbar 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

  • Left Toolbar

    • 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.

  • Right Toolbar:

    • 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 right toolbar 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.

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].