# Welcome To eMOBIQ Documentation! ### Welcome to eMOBIQ: Where Ideas Transform into Applications! Redefine your enterprise application development journey with **eMOBIQ**, the pioneer in No-Code application creation. Unleash the power to develop, debug, and deploy cross-platform mobile and web applications—all without writing a single line of code! #### Unleash Innovation with Simplicity ***Empower Your Ideas***\ Unlock the potential to transmute your innovative ideas into robust applications. Leverage our drag-and-drop functionality, visual application logic development, and extensive template library to bring your vision to life. ***Amplify Development Speed***\ Accelerate your application deployment cycle. With eMOBIQ, turn ideas into fully functional apps, ready to launch on multiple platforms, all in a fraction of the conventional development time. ***Extend Capabilities with Plugins***\ Integrate custom or external code through eMOBIQ Software Manager, enhancing your app with specialized functionalities, ensuring versatility, and reusability in application development. #### Start Creating with eMOBIQ in Three Easy Steps! 1. **Design Your App’s Interface**\ Dive into a seamless UI/UX design experience, choosing from our varied templates or crafting your own unique interfaces. 2. **Infuse Logic into Your App**\ Define event-triggered actions, integrate services, and manage data flows without diving into complex code. 3. **Deploy Across Platforms**\ Compile and build your application for iOS and Android with a simple click, making it ready for deployment or thorough testing. #### Pioneering Features Tailored for Your Needs ***Advanced Logic without Code***\ Construct intricate logic, manipulate data, and manage user interactions, all visualized through an intuitive logic builder. ***Multilingual Support***\ Speak to your global audience effortlessly by utilizing our simplified language translation tools. ***Boundless Customization with Plugins***\ Augment your app with custom components and functions through easy plugin integrations. #### Dive Deeper into eMOBIQ Explore our comprehensive [Quick Start Guide](broken://spaces/m62Oog96ffyq84z57Lu4/pages/Sv0tG68KYJfyvVOlGbto) for a detailed walkthrough from creation to deployment. 📘 **Detailed Documentation**\ Navigate through our [Client](broken://spaces/m62Oog96ffyq84z57Lu4) and [Database](broken://spaces/KgbxD4HPavplmw5151C9) documentation to explore the depths of eMOBIQ's capabilities. #### Become Part of Our Thriving Community! * **Forums:** Share your journey, seek advice, or provide insights on our [Community Forum](https://orangekloud.com/forum/). * **Support:** Need a hand? Our dedicated [Support Team](https://orangekloud.com/contact-us/) is always ready to assist you. * **Blog:** Stay updated with the latest in no-code development on our Blog. #### Ready to Transform Your App Development Journey? 🚀 **Start Building with eMOBIQ Now! Sign Up for Free** #### Stay Connected Join our newsletter and follow us on [LinkedIn](https://www.linkedin.com/company/orangekloud-inc/) and [Facebook](https://www.facebook.com/orangekloud.inc) for updates, tips, and more. #### # Welcome to eMOBIQ AI ## Introduction {% embed url="" %} Welcome to eMOBIQ AI, with the introduction of LLMs, our no code platform just got better and more efficient. You can now easily create and modify applications by simply defining your ideas with text. The future of app development is here. With eMOBIQ AI, you can bring innovative solutions to life in days — not months — without the high costs or long timelines traditionally associated with software development. With the help of eMOBIQ AI turn your text ideas into a working application with the click of a button. From start to finish, you are in full control, you can choose to manually review and modify the documentation as the process kicks off. *** ## Your AI Co-Developer eMOBIQ AI acts as your intelligent co-developer. You provide the vision, requirements, and domain expertise; eMOBIQ AI handles the planning, research, and coding. From concept to deployment, we streamline the entire process so you can focus on what matters: solving real business problems. *** ## Learn As You Build We’ve created a collection of guides, tutorials, and best practices to help you get the most out of eMOBIQ AI. Whether you're just starting out or looking to optimize your workflows, our resources are designed to inspire and help you along the way. *** ## Need Help? We’re always here for you, simply reach out to us through our in-app [support chat](https://main.emobiq.com/support) if you have any questions. Let’s build something amazing together! Welcome to eMOBIQ AI. Happy developing! # Subscribe ## How to Subscribe to eMOBIQ AI Follow these simple steps to get started with **eMOBIQ AI** and begin building your first intelligent application. {% stepper %} {% step %} #### Visit Our Website Go to our official [eMOBIQ AI page](https://orangekloud.com/emobiq-ai/) {% endstep %} {% step %} #### Explore Subscription Plans Click on `Try eMOBIQAI` . Here, you’ll find a range of flexible subscription options tailored to different usage needs. Take a moment to review each plan and choose the one that best fits your goals {% endstep %} {% step %} #### Select Your Plan Once you've decided on a plan, click the `Sign Up` button associated with that plan {% endstep %} {% step %} #### Complete Registration Fill out the registration form with your details (name, email, company, etc.), and click `Register` to create your account {% endstep %} {% step %} #### Purchase Credits After logging in, navigate to the main page and click on `Buy Credits` to add credits to your account {% endstep %} {% step %} #### Choose Credit Amount Select the credit amount you'd like to purchase and enter your payment information securely {% endstep %} {% step %} #### Confirm Purchase Click `Buy Credits`, then confirm by clicking `PROCEED` to complete the transaction {% endstep %} {% step %} #### Access Your Dashboard Once the payment is processed, return to the dashboard and click `Goto eMOBIQ AI Dashboard` {% endstep %} {% endstepper %} You’re now ready to start building powerful AI-driven applications! If you run into any issues or have questions along the way, feel free to reach out to our [support page](/emobiq-ai/readme/support). *** #### Need More Help? {% embed url="" %} You can watch our Subscription Walkthrough Video for a visual step-by-step guide above or on [OrangeKloud's official YouTube Channel](https://www.youtube.com/@orangekloudinc.6099/featured). # How Pricing Works in eMOBIQ AI ## Introduction Setting a budget is a crucial step in managing your project effectively. Below, we provide a clear breakdown of how pricing works, so you can make informed decisions. *** ## Understanding the Pricing Model Our pricing structure is designed to be transparent and flexible. The cost of your project is primarily determined by three key factors: * **AI Model (Lite or Standard)**: The model you select at the start of your project directly affects cost. Lite is significantly cheaper and suited for prototyping, while Standard is recommended for production-ready applications. * **Application Size (Number of Pages)**: The complexity and scope of your application impact the number of pages required. If a specific page count isn't provided in the prompt, it will be automatically determined by AI. * **Backend Service:** Introducing external APIs or Supabase may increase the complexity of your application, in turn raising the cost. This is due to the refinement needed to ensure your application works as expected. Remember, not all allocated budget will be used in one go. It adjusts based on your application size and how much refinement you plan on making. *** ## Lite vs Standard

Lite

  • Significantly lower credit cost
  • Best for rapid prototyping and idea validation
  • Does not support advanced modes for complex projects
  • Recommended budget: 5 – 10 Credits

Standard

  • Higher accuracy and output quality
  • Supports advanced generation modes
  • Recommended for production-ready applications
  • Recommended budget: 20 – 60 Credits
*** ## Defining Your Application Size Before submission, you can specify the estimated size of your application in the prompt: * **Small**: 3-5 pages * **Medium**: 8-10 pages * **Large**: 12-15 pages The final size may vary depending on the number of features and complexity outlined in your prompt. *** ## Estimated Cost Breakdown ### Lite Model Lite projects are always generated as small-scale applications (3–5 pages).
App SizeEstimated Cost
Small3 – 5 Credits
### Standard Model
App SizeEstimated Cost
Small15 Credits
Medium30 Credits
Large50 Credits
{% hint style="info" %} *These are estimates. Actual costs may vary depending on backend service complexity, the number of refinement rounds, and whether **manual review** mode is used.* {% endhint %} *** ## Instant Ideas Templates [Instant Ideas](/emobiq-ai/readme/building-your-app/instant-ideas) templates are **completely free** — no credits are required to create an app from a template. Post-creation customization via the Debug Agent is billed separately based on token usage. *** We are committed to ensuring you have full control over your budget. If you have any questions, feel free to [*reach out*](https://orangekloud.com/contact-us/) to our team. We are here to help you every step of the way. # Debug Pricing ## Understanding How the Debug Agent Works The [**Debug Agent** ](/emobiq-ai/readme/debug-agent)is an AI-powered tool designed to help you identify and fix issues in your app quickly and efficiently. It allows you to: * Inspect HTML, JavaScript, and API logic * Identify bugs or misconfigurations * Apply temporary or permanent fixes directly within the code using natural language * Test changes in real time When you interact with the Debug Agent, it processes your request and does it's best to complete your request. {% hint style="info" %} *Do note that AI still makes mistakes and it might take a few prompts to fix the issue. For more information on prompting you can refer to the* [*Debug Agent page*](/emobiq-ai/readme/debug-agent) {% endhint %} *** ## Choosing Your Debug Model
The Debug Agent includes a **Performance** model selector that lets you choose how much AI power to apply during a debug session. You can switch between models at any time from within the Debug Agent.

Standard

  • A smaller-scale model suited for everyday debugging tasks
  • Faster responses and lower credit cost per session
  • Ideal for straightforward fixes, minor UI adjustments, and quick iterations
  • Does not support image input

Performance

  • Advanced model built for production workloads and complex debugging
  • Handles multi-file issues, intricate logic, and API integration problems
  • Supports image input for visual debugging
  • Higher token cost per session
{% hint style="info" %} *Not sure which to use? Start with **Standard** for quick fixes and switch to **Performance** when tackling complex or multi-layered issues.* {% endhint %} *** ### How Is Usage Measured? Each interaction with the Debug Agent consumes **tokens**, which represent the amount of data processed with each prompt. #### Example Session: 12 Tokens: 40866 (prompt: 39415, completion: 1451) **Cost: 0.41** **Credits** This means that during this debug session: * The user provided a **prompt** of \~39,415 tokens (describing the issue and providing context) * The agent generated a **response** of \~1,451 tokens (proposing or applying a fix) * Total cost is calculated based on these tokens processed {% hint style="info" %} ***Note:** Token usage depends on how much content is sent and generated during the session — including source code, error messages, and explanations.* {% endhint %} *** ### Why Is There A Charge? You are charged credits based on **token usage** during each debug session. Here's why: * **AI processing requires resources**: Each debug task involves analysing code, understanding context, and generating accurate responses * **Token-based billing ensures fairness**: You only pay for what you use — not for idle time or fixed hours * **Efficient sessions = lower costs**: The more specific and clear your prompt, the fewer tokens needed to resolve the issue You're not charged for: * Previewing changes in UI-only mode * Viewing documentation or sample guides * Running tests that don’t involve AI reasoning *** ### Real-World Debugging Example #### Issue: After reviewing `service_orders.html` and `service_order_details.html`, the Debug Agent identified that the service order details page was failing due to an authentication error when making an API call. #### Fix Applied: The Debug Agent made the following corrections in `service_order_details.html`: * Fixed incorrect usage of `btoa()` in the `getAuthToken()` function * Updated the request body format from JSON object to URL-encoded form data * Standardised the `Authorization` header capitalisation These changes resolved the authentication failure and allowed the page to load correctly. #### Result: * Service order details now display properly * User redirected correctly instead of being sent back to the main menu * API calls now authenticate successfully # Building your App It's time to begin building your first application! This section provides a structured guide to help you move from concept to a fully functional app—efficiently and effectively. {% hint style="info" %} **Two ways to get started:** * **Create New Blank** — Follow the step-by-step workflow below to build your app from scratch. * **Create New from Template** — Skip the setup entirely and launch from a fully built [Instant Ideas](/emobiq-ai/readme/building-your-app/instant-ideas) template. Free to use, no credits required. {% endhint %} {% embed url="" %} *** ### Step 1: Assign a Meaningful Name to Your App Naming your application thoughtfully enhances usability and recognition. Choose a name that reflects the app's function or domain to improve clarity for both developers and end users.\ Start by giving your app a meaningful name and project icon.
{% hint style="info" %} *Example: Instead of "App\_001", consider a descriptive name like "Inventory Tracker" or "Order Manager".* {% endhint %} *** ### Step 2: Select Your AI Model Choose the AI model that best fits your project's needs. This selection affects the depth of generation, available features, and credit consumption.

Lite

  • Faster app generation, saving time and budget for rapid prototyping with essential details
  • Significantly lower credit cost compared to Standard
  • Does not support advanced modes for more complex projects

Standard

  • Strikes a middle ground between speed and accuracy, delivering well-rounded outputs
  • Suitable for production-ready applications
  • Supports advanced generation modes for more complex project requirements
{% hint style="info" %} *Not sure which to pick? Start with **Lite** to validate your idea quickly, then switch to **Standard** when you're ready to build a more complete application.* {% endhint %} *** ### Step 3: Select Your Backend Service Based on your objectives, select the appropriate application type. Each option is designed for a specific use case and technical architecture:
{% tabs fullWidth="false" %} {% tab title="Stand-alone" %} * Designed for UI-only prototypes or personal tools * No backend database required * Data is stored locally within the browser {% endtab %} {% tab title="External API" %} * Integrates with external systems such as Microsoft Business Central, Acumatica, Sage and many more! * Requires pre-defined and accessible API endpoints * Enables seamless connectivity with existing business ecosystems * Full guide on[ External API configuration](/emobiq-ai/readme/external-api) {% hint style="info" %} *📝 Note: Ensure all external API function calls are documented and tested before selecting this mode.* {% endhint %} {% endtab %} {% tab title="Supabase" %} * Powered by an open-source PostgreSQL backend — no server setup required * Built-in user authentication (login, signup, OAuth via Google, Apple, and more) * Real-time data sync across all devices * File storage for images, videos, and documents * Row-level security for fine-grained data access control * Full guide on [Supabase configuration](/emobiq-ai/readme/supabase) {% endtab %} {% tab title="Plugin" %} * Extends your app with native device capabilities — no additional coding required * Access hardware such as camera, GPS, file system, Bluetooth, and microphone * Works cross-platform on iOS, Android, and Web * Full guide on [Plugin configuration](/emobiq-ai/readme/plugins) {% endtab %} {% tab title="Summary" %}
App TypeDatabase ProvisioningIntegration Capabilities
StandaloneNone - Local StorageNA
External APILeverages external databases via Function APICustom integrations supported
SupabasePostgreSQL via Supabase (cloud or self-hosted)Auth, real-time sync, file storage
PluginNone - extends frontend with device APIsCamera, GPS, Bluetooth, and more
{% endtab %} {% endtabs %} *** ### Step 4: Define Your App Idea Before initiating any project, clearly articulate your application's purpose. The precision of your vision directly influences the quality of the output generated by eMOBIQ AI.
Lack of ideas? *Click `Advanced Ideation` to help you clearly define what your app should do. The more specific you are, the better eMOBIQ AI can assist you to build your app*
Themes *Pre-select the visual style of your app — including project type, style, color palette, and fonts — giving you control over how your app looks before generation begins. For a full breakdown of available theme options, refer to the* [*Themes guide*](/emobiq-ai/readme/building-your-app/themes)*.*
{% hint style="info" %} *For more information on how to have a better App upon generation, refer to our* [*Advanced Prompting Guide*](/emobiq-ai/readme/building-your-app/advanced-prompting-for-app-creation) {% endhint %} *** ### Step 5: Choose Between Autopilot or Manual Review Workflow Decide how much oversight you want during the development lifecycle.

Autopilot

  • Provides End-to-End Automation
  • No need for intermediate reviews
  • Best suited for trusted workflows or simple applications

Manual Review

  • Allows for feedback and adjustments at each stage before proceeding to the next
  • Increases control and accuracy, particularly for complex logic or design
  • Slightly higher cost due to increased AI interaction

Docs & UI only

  • Describe your UI needs in natural language
  • eMOBIQ AI generates the frontend and documentation
  • Preview and review the output
  • Export or refine as needed before moving to full implementation
*** ### Step 6: Allocate Budget
{% hint style="success" %} *💰 Budget Tip: For **Lite** mode, allocating 5 to 10 Credits is recommended for rapid prototyping. For **Standard** mode, it is recommended to allocate 20 to 60 Credits per project depending on your application size. This is to account for prompt-based costs, especially when using **manual review**. For more information regarding costs you may refer to our* [*Pricing Guide*](/emobiq-ai/readme/how-pricing-works-in-emobiq-ai)*.* {% endhint %} *** ### You're Ready to Create! With these steps completed, you now have a clear roadmap for developing your first eMOBIQ AI-powered app. Whether you're building a prototype or a full-scale enterprise solution, eMOBIQ AI empowers you to bring your vision to life quickly, intelligently, and with precision. Let's discover what your new app can do! # Instant Ideas **Instant Ideas** is a library of professionally designed, fully built app templates that let you skip the setup process entirely and launch a working application in seconds — completely free. {% hint style="success" %} *Instant Ideas templates are **free to use** and require no credits to get started.* {% endhint %} *** ## How to Access
There are two ways to browse and use Instant Ideas templates: * **Create New from Template** button on the top right of your dashboard * **"Need inspiration?"** section at the bottom of your dashboard — scroll down to browse featured templates and click **Browse all ideas** to see the full library *** ## Browsing Templates
The Instant Ideas library includes templates across a range of app categories. Use the filters on the left to narrow down by: | Filter | Options | | ------------ | ------------------------------------------------------------------------------------------------------ | | **Category** | Website, Blog, Dashboard, eCommerce | | **Industry** | Healthcare, Financial, Retail, Automotive, Beauty & Wellness, Entertainment, Government, ERP, and more | | **Add-ons** | Supabase, API, Plugin | Each template card shows the app name, version, category tags, and whether add-ons are included. *** ## Template Details Clicking on a template opens a detail view with: * **Description** — what the app does and who it is for * **How to Use** — a walkthrough of the app's key features and flows * **Screenshots / Media** — preview the app's screens before committing * **Explore similar templates** — discover related templates Click **Use template** to create a new project from the selected template instantly. *** ## What to Expect | | Instant Ideas | Build from Scratch | | --------------------------------- | ------------- | ------------------ | | **Cost** | Free | Credits required | | **Setup time** | Instant | Guided workflow | | **Customization during creation** | None | Full control | | **Post-creation customization** | Via Debug tab | Via Debug tab | {% hint style="warning" %} *Instant Ideas templates offer **no flexibility during setup** — the app is generated as-is from the template. Once created, you can freely customize the app using the* [*Debug Agent*](/emobiq-ai/readme/debug-agent)*.* {% endhint %} # Themes When creating a new project, eMOBIQ AI now lets you pre-select the visual style of your app through the **Themes** step. This gives you control over how your app looks and feels before generation begins — without losing the flexibility to refine it further through your app idea description. {% hint style="info" %} Themes are optional. If you skip any or all steps, the AI will determine the best layout automatically. If no layout preference is mentioned in your app idea, it defaults to a **mobile navigation bar** application. {% endhint %} The Themes step consists of **4 sequential selections**: 1. [Project Type](#step-1-project-type) 2. [Style](#step-2-style) 3. [Color Palette](#step-3-color-palette) 4. [Fonts](#step-4-fonts) *** ## Step 1: Project Type
Choose the project type that best fits what you want to build and how users will interact with it. | Project Type | Best For | | --------------------------- | ----------------------------------------------------------------------------------------------- | | **Landing Page** | Focused pages designed to drive one main action, such as sign-ups, promotions, or lead capture. | | **Website** | Multi-page sites that present content, brand information, or a broader online presence. | | **eCommerce Store** | Online stores that showcase products or services and support browsing, purchasing, or booking. | | **Dashboard / Admin Panel** | Internal systems used to manage data, monitor activity, and support day-to-day operations. | *** ## Step 2: Style
Choose a design style that matches your brand vision. {% tabs %} {% tab title="Modern Minimalist" %} Clean, spacious design focusing on content with generous white space and subtle interactions. **Emphasizes:** Simplicity & clarity {% endtab %} {% tab title="Biz Pro" %} Professional, trustworthy design with clean lines and structured layouts. **Best for:** Corporate websites and B2B platforms {% endtab %} {% tab title="Frosted Glass" %} Modern, frosted glass effect with translucent elements and blur. **Creates:** Depth and visual hierarchy with elegant transparency {% endtab %} {% tab title="Soft Depth" %} Soft, extruded UI elements that appear to push through the surface, using subtle shadows to create a physical, tactile feel. {% endtab %} {% tab title="Gradient & Vibrant" %} Bold, colorful design with dynamic gradients and vibrant colors. **Perfect for:** Creative brands and modern startups {% endtab %} {% endtabs %} *** ## Step 3: Color Palette
Select a color palette that reflects the tone and audience of your app. | Palette | Description | | ------------------- | ----------------------------------------------------------------------- | | **Summer Vibes** | Bright, energetic, and optimistic, while remaining practical and usable | | **Warm Earth** | Natural and grounded, suitable for lifestyle or sustainability brands | | **Modern Calm** | Soft, contemporary, and easy on the eyes | | **Bold Energy** | High-contrast and expressive, ideal for marketing-heavy use cases | | **Creative Studio** | Expressive yet controlled, good for portfolios and creative brands | | **Soft Pastel** | Friendly and approachable, great for casual tools and creators | | **Business Ready** | Clean, trustworthy, and safe for client-facing products | | **Neutral** | A calm, balanced foundation designed to let content shine | | **Trendy 2026** | Inspired by 2026 color trends | ### Custom Color Theme If none of the presets suit your brand, you can create your own color scheme using the **+ Add a new Theme color** option. Create your own color set by choosing up to four custom colors: | Color Role | Purpose | | ------------- | ----------------------------------------------------------- | | **Primary** | The dominant color used across main UI elements | | **Secondary** | A supporting color for backgrounds and secondary components | | **Neutral** | Used for text, borders, and subtle backgrounds | | **Accent** | A highlight color for calls-to-action and key interactions | Each color can be entered in **HEX**, **RGB**, or **HSB** format. {% hint style="info" %} Not sure what colors to use? Click **Auto-generate** to let the AI suggest a harmonious color scheme based on your project type and style selection. {% endhint %} Once you're happy with your colors, give the theme a **Label** (name) before saving so you can identify it later. *** ## Step 4: Fonts
Customize the fonts used for headings and paragraph text throughout your app. **Available fonts:** | Style | Font Name | | -------------------- | ------------- | | **Clear Sans** | Open Sans | | **Classic Serif** | Baskervville | | **Modern Tech** | Orbitron | | **Friendly Rounded** | Balsamiq Sans | | **Elegant** | Arizonia | You can select a **Heading** font and a **Paragraph** font independently, allowing for flexible typographic combinations that match your brand. {% hint style="info" %} You can also add a custom heading font using the **+ Add new Heading text** option. {% endhint %} *** ## How Themes Work with Your App Idea Themes work alongside your app idea description — they are not mutually exclusive. Any style instructions written in your app idea will be taken into consideration during generation. {% stepper %} {% step %} ### Select a Theme (Optional) Use the 4-step theme selector to define your preferred project type, visual style, color palette, and fonts. {% endstep %} {% step %} ### Describe Your App Write your app idea as usual. You can mention specific UI preferences here to further refine or override theme defaults. {% endstep %} {% step %} ### AI Generation eMOBIQ AI combines your theme selections and app idea to produce a UI that aligns with both. {% endstep %} {% endstepper %} {% hint style="success" %} **Tip:** Use themes for broad visual direction and your app idea for specific UI details. This combination gives you the most consistent and intentional output. {% endhint %} # Advanced Prompting For App Creation ## How to Think Through Your App Idea Before Building with eMOBIQ AI When building an app using **eMOBIQ AI**, it's not just about filling out forms or ticking boxes — it's about telling a story. A story about a problem someone has, how your app will solve it, and what success looks like when it all works together. This guide helps you **think like a builder** , guiding you through a structured yet flexible process that starts with real-life scenarios and ends with a clear blueprint for your next application. *** ### Start With the Why: What Problem Are You Solving? Every great app begins with empathy — understanding who your user is and what they struggle with. This isn’t just theory; it’s practical thinking that shapes every decision you’ll make while developing your app and debugging it with [Debug Agent ](/emobiq-ai/readme/debug-agent)to meet your app needs. #### Example Use Case: **Meet Sarah**\ Sarah is a therapist who journals daily to manage her mental health and reflect on client sessions. She’s tried digital apps before, but none feel personal enough or give her a visual way to track how she’s feeling over time. She wants something simple, calming, and reflective — a space where she can write, tag her mood, and look back on how she’s doing week to week. {% hint style="success" %} *Tip: Try writing a short paragraph like this one about your ideal user. It doesn't have to be long — just enough to ground your thinking in a real person with a real need.* {% endhint %} {% stepper %} {% step %} #### Step 1: Define the Core Purpose of Your App Now that you’ve got a user in mind, ask yourself: * What does your app help people **do** ? * What kind of **problems** does it solve? * Why would someone **choose this app** over another tool? **Prompt:** > “I’m building an app that helps \[type of person] do \[key action] by \[how it makes it easier/faster/better].” **Example:** > “I’m building an app that helps individuals track their thoughts and moods daily by offering a calm, intuitive interface where entries are tied to a calendar and tagged with emotions.” > {% endstep %} {% step %} #### Step 2: Identify the Must-Have Features These are the features that define your app — the ones that make it *yours* and ensure it solves the problem effectively. Ask yourself: * What should your app **do without fail** ? * What are the **essential interactions** your users will perform? * What happens if those things aren’t there? {% code title="Example Prompts:" %} ``` Allow users to create, save, and edit daily diary entries. Tag each entry with a mood (happy, anxious, tired, etc.). Display entries on a calendar view with color-coded mood indicators. Enable filtering and searching by date, keyword, or mood. ``` {% endcode %} Then add a few **nice-to-have features** that enhance the experience: * Daily prompts or templates for users who need inspiration. * Reminders to encourage consistent journaling. {% endstep %} {% step %} #### Step 3: Envision the Look and Feel Your app’s design plays a big role in how users engage with it. Even the most powerful tools can fall flat if they don’t feel good to use. Think about: * What kind of **vibe** should your app give off? (Calm? Energetic? Minimal?) * How should users **feel** when they open it? * Do certain colors or layouts already come to mind? {% code title="Example Prompts:" %} ``` Clean, minimal, and emotionally soothing. Mood tags displayed clearly on a calendar. Pastel tones and soft visuals to promote reflection. Light/dark mode toggle for personal preference. ``` {% endcode %} {% endstep %} {% step %} #### Step 4: Consider Special Requirements or Limitations Some ideas are best left out — either because they complicate things unnecessarily or because they distract from the core purpose. Also consider extras that might be optional now but useful later. {% code title="Example Prompts:" %} ``` Export entries to PDF or plain text for offline sharing. Add a gratitude log section or customizable tags. Don’t include analytics or dashboards — keep the focus on journaling, not performance tracking. ``` {% endcode %} {% endstep %} {% endstepper %} ### Why This Matters for eMOBIQ AI Because eMOBIQ AI allows deep integration with APIs, databases, and logic execution, having a strong conceptual foundation ensures: * Smooth setup of API connections and authentication * Clear mapping of frontend components to backend logic * Reliable testing and iteration using built-in tools * Better alignment between your vision and the AI-generated solution It also gives the system more context to work with — so when you say "build me a diary app", eMOBIQ AI understands not just what you’re asking for, but **why** you’re asking for it. *** ### Final Thoughts The goal of this guide isn’t to box you into a template — it’s to help you **tell a story** about your app idea in a way that’s both **clear and compelling**. Whether you're building a diary app, invoice processor, or team collaboration tool, starting with the human behind the problem will always lead to better outcomes. So go ahead — write the story of your app. eMOBIQ AI will take care of the rest! # Testing your App ## Testing Your Application in eMOBIQ AI Once you've built your application using **eMOBIQ AI** , it's essential to test it thoroughly before sharing it with others or deploying. Testing ensures your app works as expected — both visually and functionally. There are **two primary ways to test your app** during the development process depending on what you selected during the creation of your application, specifically the `Docs & UI only` Button.
{% hint style="danger" %} *Enabling this generates the projects only up to the UI of your application and cannot yet be deployed or published until the full code functionality has been completed* {% endhint %} *** ### 1. View How the App Looks (Docs & UI only Mode)
#### What It Is: **Docs & UI only Mode** , allows you to see how your app will look from a user’s perspective — without executing any backend logic or API calls. It’s ideal for: * Reviewing layout, design, and component positioning * Ensuring responsive behaviour across screen sizes * Sharing a visual prototype with stakeholders or team members #### How to Use It: * Click the `Test App` button in the eMOBIQ AI editor after the UI Agent has completed it's task * You can also navigate to UI Pages to view the pages generated by eMOBIQ AI * Interact with components like buttons, drop down menus, and inputs — but keep in mind these won’t trigger actual actions or data changes #### Limitations: * No real API calls are made * Dynamic variables and backend logic aren’t executed * You can’t test workflows, database queries, or integrations {% hint style="info" %} *Tip: Use this mode early in development to get feedback on design and flow, especially if you're still shaping the user experience* {% endhint %} *** ### 2. Completed Project: Test Functionality and Debug Logic #### What It Is: Once your project has completed all 6 stages, your application becomes fully interactive. All components are connected to their underlying APIs, databases, and business logic, allowing you to test every feature end-to-end. However, do note that eMOBIQ AI might make mistakes so do check through what was generated and if your app needs to be further [debugged](/emobiq-ai/readme/debug-agent).

Continue to complete your project after the Docs&UI Stage

**It’s ideal for:** * Testing API integrations and dynamic data flows * Validating user interactions and event triggers * Debugging issues in logic, variable mapping, or error handling #### How to Use It: * Click the `Debug` button * The full version of your app will load, complete with all connected data sources and logic steps * Perform typical user actions like submitting forms, clicking buttons, or navigating between screens *** ### Benefits of Using Docs & UI-Only Mode While Full Build Mode allows for complete functional testing and debugging, there are distinct advantages to using **Docs & UI-Only mode** during the early stages of development — especially when working with AI-powered platforms like **eMOBIQ AI**. #### 1. **Faster Feedback and Iteration** Because Docs & UI-Only mode doesn’t execute backend logic or API calls, it loads instantly and allows users to see how the app will look and feel **without waiting for complex builds**. This makes it ideal for: * Sharing mockups with stakeholders * Getting early feedback on layout and flow * Validating user experience decisions before investing time in logic and integrations {% hint style="info" %} *Tip: Use this mode to iterate quickly on design changes, such as adjusting component placement, colour schemes, or responsive behaviour* {% endhint %} #### 2. **Lower Cost** Running a full build that involves AI-generated logic, database queries, or external API calls increases the cost of platform usage credits. In contrast, **Docs & UI-Only mode uses minimal resources** , making it a cost-effective way to: * Preview app structure * Share prototypes internally * Explore different UI/UX directions without triggering expensive backend processes This is especially valuable for teams or individuals who want to **explore multiple ideas** without incurring high costs per iteration. #### 3. **Early Visibility Without Full Commitment** You don’t always need to test every function to understand if an app is heading in the right direction. With Docs & UI-Only mode, you can: * See how components are laid out * Test navigation flows * Understand how data will be presented (even if it’s not live yet) This gives you a **preview of the final product** long before it’s fully functional — allowing you to make informed decisions earlier in the process. *** ### Final Thoughts Understanding the difference between **Preview Mode** and a **Completed Project** helps you make the most of eMOBIQ AI’s powerful no-code development environment. Use **Preview Mode** to refine the look and feel of your app early on, before continuing to develop your project to completion once your logic and integrations are ready — so you can ensure everything works exactly as intended. # Build & Publish ## Build and Publish Your App Using eMOBIQ AI Once your application is built in **eMOBIQ AI** , the next step is to generate native mobile builds and publish them to the **Google Play Store** (Android) or the **Apple App Store** (iOS). This guide walks you through the full process for both platforms — from generating release credentials to enabling automated publishing. *** ### Overall Tips * Always back up your keystore and provisioning files securely * Never lose your signing keys — they’re essential for updates * Test manually first before enabling auto-publishing # Creating accounts For ORKT internal set up Setting up accounts
Click on “For my personal Use”
Next click “Use your existing email” and enter your orangekloud email Apple:
Create your account from this website instead of the link in your email
# Android Build and Publish (Old) #### 1. Build Android Release Version To build a signed release version of your app: **Generate Keystore File:** You’ll need Java installed (JRE or JDK). Use the `keytool` command in terminal: bash1keytool -genkey -v -keystore `my-release-key.keystore` -alias `alias_name` -keyalg RSA -keysize 2048 -validity 10000 Replace `my-release-key.keystore` and `alias_name` with your preferred values. **You will be prompted to enter:** * New Keystore password * First and last name * Organisation Unit * Organisation * City * State Or Province * Country code {% hint style="info" %} ***Tip: :** Keep this keystore alias & password safe — it's required for future updates.* {% endhint %} **Upload to eMOBIQ:** 1. Go to **Build and Publish tab** > **New Build** > Select **Android** 2. Choose **Release** as build type and select the version 3. Upload your `.keystore` file and enter: * Keystore password * Key alias * Key password Click **Build** and wait for the process to complete. **Download Artifacts:** * `.aab` file – used for deployment to Google Play Store * `.apk` file – for direct installation on devices *** #### 2. Initial Setup in Google Play Console 1. Visit [Google Play Console](https://play.google.com/console) 2. Sign in with your company email 3. Create a new app listing matching your eMOBIQ app 4. Complete declaration forms 5. Fill out store listing: * Description * Icon * Screenshots * Graphics 6. Set default language to **en-US** *** #### 3. Manual Deployment to Google Play Store **Upload to Closed Testing:** 1. Go to **Testing** > **Closed Testing** 2. Add testers and countries 3. Upload the `.aab` file 4. Wait for review **Promote to Production:** 1. Once reviewed, promote the release to **Production** 2. Wait for final review 3. App becomes available on Google Play Store > ⚠️ Available channels: * Internal (email-invited users – immediate) * Closed (email-invited users – requires review) * Open (public opt-in users – early access) * Production (public users) *** #### 4. Configure Auto-Publishing via eMOBIQ **Generate Service Account:** 1. Visit [Google Cloud Console](https://console.cloud.google.com/) 2. Go to **Service Accounts** 3. Create a service account and note its ID (an email address) 4. Add key and download JSON file **Link with Google Play Console:** 1. In Google Play Console > **Users and permissions** 2. Invite the service account email with **Admin** access **Upload to eMOBIQ:** Go to **Settings > Android > Publish Settings** and upload: * Service account JSON file * App name * Short description * Full description > ✅ Ensure these match what was entered in Google Play Console **Enable Auto Publishing:** 1. Go to **Build & Publish > Publish tab** 2. Click **Publish** for the latest build 3. Confirm configurations 4. The system will deploy to **Closed Testing** , then automatically promote to **Production** after review > 📌 Note: A manual upload must be completed before enabling auto-publishing # Android Build and Publish ## **Publishing Your Android App to Google Play Store** Deploy your eMOBIQ-built Android app to the Google Play Store manually or via auto-publishing This guide focuses **primarily on eMOBIQ AI’s workflow**. For detailed Android/Google Play steps, follow the linked official documents. *** ### **Build Settings** #### **Prerequisites** * A keystore File * *Don’t have one?* Follow this online guide on how to [Generate a keystore file](https://support.kotobee.com/en/support/solutions/articles/8000065886-create-an-android-keystore-file) * A Google Play [**Developer Account**](https://play.google.com/console/u/0/signup) (Official Documentation: [setup guide](https://developer.android.com/distribute/console)) * A Google Cloud [Console Account](https://console.cloud.google.com/apis/api/androidpublisher.googleapis.com/overview?project=879362208751\&inv=1\&invt=Ab3bJg) {% hint style="success" %} *Tip: For different apps, a different keystore is recommended* {% endhint %} **Go to the** `Publish` Tab → `Settings` → Select `Android` → Build Settings
*** ### **Building Your App** 1. **Go to the** `Publish` Tab → `New Build` → Select `Android` → `Select Version` → `Build`
2. Choose `.AAB` for deploying to Google Playstore
*** ### **Deploy to Google Play** **Link Google Play to eMOBIQ AI** 1. Google Service Account file in eMOBIQ AI refers to your Service account in [Google Console](https://console.cloud.google.com/)
2. Ensure that the Google Service Account and Google Play Console account is linked by navigating to `Users and permissions` tab → `Invite User` → Fill in the `Email address` with the Google Service Account you created
3. Add your app and ensure App permissions and Account permissions are given full access 4. After building the app successfully and creating your Google Service account, navigate to `Settings` → `Android` → `Publish Settings` → `Upload` Service Account file in **JSON** format
{% hint style="warning" %} *Note: App metadata (must match Google Play Console)* {% endhint %} # iOS Build and Publish (old) #### 1. Build iOS App Store Version **Generate Private Key:** 1. Use a **Mac** with **Xcode** installed 2. Go to [Apple Developer Account](https://developer.apple.com/account) 3. Navigate to **Certificates, Identifiers & Profiles** 4. Under **Certificates** , create a new **iOS Distribution (App Store Connect & Ad hoc)** certificate 5. Upload a **Certificate Signing Request (CSR)**\ 👉 [How to create CSR](https://developer.apple.com/help/account/create-certificates/create-a-certificate-signing-request/) **Export Certificate + Private Key:** 1. Download `.cer` file and open in **Keychain Access** 2. If needed, download and install `AppleWWDRCAG3.cer` 3. Locate certificate and private key under **My Certificates** 4. Right-click and export as `.p12` file 5. Set password — this will be used in eMOBIQ **Generate Provisioning Profile:** 1. Go to **Profiles** > Register new profile 2. Select **Distribution > App Store Connect** 3. Choose your App ID and certificate 4. Download `.mobileprovision` file **Upload to eMOBIQ:** 1. Go to **Build and Publish tab** > **New Build** > Select **iOS** 2. Choose **App Store distribution** as build type 3. Enter: * Code sign (Common Name from certificate) * Team ID (Organizational Unit from certificate) 4. Upload: * `.p12` private key file * `.mobileprovision` file * Enter private key password Click **Build** and wait for the `.ipa` file to be generated *** #### 2. Initial Setup in App Store Connect 1. Visit [App Store Connect](https://appstoreconnect.apple.com/) 2. Go to **Apps** > **Add New App** 3. Select **iOS** platform 4. Fill in: * App name * Bundle ID (use eMOBIQ package name) * SKU (unique identifier, e.g., eMOBIQ AppID) > 🧩 Language should be set to **English (U.S.)** Fill all required details including descriptions, screenshots, and metadata > 📌 Available channels: * **TestFlight** – for internal/external testing * **Distribution** – for public availability *** #### 3. Manual Deployment to App Store **Upload via Transporter App:** 1. Use Apple’s **Transporter** app to upload `.ipa` file 2. Wait for review Once approved, your app will be live on the App Store *** #### 4. Configure Auto-Publishing via eMOBIQ **Generate API Key:** 1. In App Store Connect > **Users and Access** > **Keys** 2. Create new API key with **Access Level** : *App Manager* or higher 3. Download the `.p8` file (this can only be downloaded once) 4. Take note of: * **Key ID** * **Issuer ID** **Upload to eMOBIQ:** Go to **Settings > iOS > Publish Settings** and upload: * Account private key file (`.p8`) * Key ID * Issuer ID Enter app details that match App Store Connect: * App name * Subtitle * Short description * Full description **Enable Auto Publishing:** 1. Go to **Build & Publish > Publish tab** 2. Click **Publish** for the latest build 3. Confirm settings 4. The app will be deployed to **TestFlight** , then promoted to **Distribution** after review > 📌 Note: A manual upload must already exist before enabling auto-publishing # iOS Build and Publish ## **Publishing Your iOS App to the App Store** This guide focuses **primarily on eMOBIQ AI’s iOS publishing workflow**. For detailed iOS Apple steps, follow the linked official documents. For Apple Developer setup, follow [official Apple Docs](https://developer.apple.com/documentation/appstoreconnectapi) Ensure you have: * An **Apple Developer Account** ($99/year) * **Xcode** installed (for certificate generation) *** ### **1. Build an App Store Version in eMOBIQ AI** #### **Prerequisites** * **Signing assets** from Apple: * `.p12` private key + password. Generated from an [Apple Device](https://developer.apple.com/help/account/certificates/create-a-certificate-signing-request/) * `.mobileprovision` file. Generated from [Apple Developer Account](https://developer.apple.com/account/resources/certificates/list) #### **Steps in eMOBIQ AI** 1. **Go to**: `Publish` → `Settings` → `iOS` → `Build Settings` 2. **Upload/Enter**: * **Code Sign Identity** (Common Name from certificate) * **Team ID** (10-character ID from Apple Developer account) * **Provisioning Profiles**: * Debug: `.mobileprovision` file * Release: `.mobileprovision` file * **Private Key**: `.p12` file * **Private Key Password** (used when exporting `.p12`) 3. Click **Save**
{% hint style="info" %} ***Security Note**: Store your `.p12` password securely—it’s required for updates* {% endhint %} *** ### **2. Publish to App Store in eMOBIQ AI** #### **Option A: Manual Upload** *(One-time)* 1. **Prepare App Store Listing**: * [Complete metadata in App Store Connect](https://developer.apple.com/help/app-store-connect/) 2. **Upload `.ipa`**: .ipa file can be found on the build page of eMOBIQ AI once the app has been successfully built
* Use **Apple’s Transporter App** ([download here](https://apps.apple.com/us/app/transporter/id1450874784)) * Wait 24-48 hours for Apple to review your app **Option B: Auto-Publishing** *(Recommended)* 1. **Link App Store Connect to eMOBIQ AI**: * [Generate an App Store Connect API Key](https://developer.apple.com/documentation/appstoreconnectapi/creating_api_keys_for_app_store_connect_api) * Download `.p8` file (save **Key ID** and **Issuer ID**) 2. **Configure in eMOBIQ AI**: * Go to `Settings` → `iOS` → `Publish Settings` * Upload: * `.p8` file (Account Private File) * Key ID * Issuer ID * App metadata *(must match App Store Connect)* {% hint style="info" %} ***First-time requirement**: Manual upload before auto-publishing.* {% endhint %} *** **Need Help?** * [Apple Developer Support](https://developer.apple.com/support/) * Create a Ticket: [eMOBIQ Support Page](https://main.emobiq.com/support) For TestFlight troubleshooting, view [Apple’s Official guide](https://developer.apple.com/testflight/) # eMOBIQ Marketplace Build and Publish
**What is the** [**Marketplace**](https://main.emobiq.com/marketplace)**?**\ A centralized hub within eMOBIQ where your apps are stored on **our servers** and can be distributed in **3 modes**: * **Android** (`.apk`/`.aab`) * **iOS** (TestFlight or enterprise signing) * **Web** (Progressive Web App/PWA) *** ### **Step 1: Prepare Your App for Multi-Platform Publishing** **Prerequisite** Successfully build the different formats before publishing
*** ### **Step 2: Upload to eMOBIQ Marketplace** 1. **Go to**: `Publish Tab` → `Publish` → `Marketplace` 2. **Select Distribution Modes**: Publish **Android**, **iOS**, and/or **Web** to Marketplace based on app readiness
*** ### **FAQ** **Q: Can I unpublish an app later?**\ A: Yes! Go to `Publish Tab` → `Marketplace` → Click `Unpublish` **Q: Is there a file size limit?**\ A: Yes (typically 500MB per app). Contact [Support](https://main.emobiq.com/support) for larger files. # External API ### Working with External APIs in eMOBIQ AI {% embed url="" %} eMOBIQ AI enables seamless integration with external APIs, allowing your application to communicate with third-party systems, databases, or services. This functionality empowers developers and system integrators to extend the capabilities of their applications by connecting to external data sources and executing custom logic. *** ### Choosing Your Integration Mode eMOBIQ AI offers three ways to register an external API. Pick the one that matches your use case before starting: | Mode | Best for | Setup style | | ----------------------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------- | | **Standard External API** (this page) | Any third-party REST API that needs accuracy and testing | Endpoint-by-endpoint configuration in a Postman-like editor | | [**EZ-Connect**](/emobiq-ai/readme/external-api/ez-connect) | Non-technical users, prototypes, throwaway demos | Paste plain-text or natural-language API documentation | | [**Business Connect**](/emobiq-ai/readme/external-api/business-connect) | ERP integrations (Acumatica, Dynamics 365, Sage) | Authenticate with ERP credentials and bulk-import endpoints | {% hint style="info" %} *The rest of this page covers the **Standard External API** flow — the most flexible option, with full control over endpoints, authentication, testing, and response shaping.* {% endhint %} *** ### 1. Creating a New API Connection Let's begin integrating an external API into your eMOBIQ AI environment: #### Step-by-Step Instructions: 1. **Add a New API** * Select `External API` as the backend connection
1. **Adding a new API** * Click on `+ Add a new API` * Provide a **meaningful name** and **description** for the API connection. These will help identify the purpose and function of the API within your application * Click `Save` to proceed
1. **Configure Domain Settings** * Click on `+ Add Domain` * Enter the **Base URL** (also known as the root endpoint) that links eMOBIQ AI to the target external API

This URL serves as the foundation for all API requests made from your application to the external service

*** ### 2. Authentication Setup Authentication ensures secure access to external APIs. eMOBIQ AI supports five common authentication methods: {% hint style="info" %} *If you're unsure which authentication method to use, consult the documentation for the API you're integrating with or reach out to the service provider of the API for guidance* {% endhint %} {% stepper %} {% step %} **Selecting Authentication Type** Select the appropriate **authentication type** based on the external API's requirements **Supported Authentication Types:** 1. Basic Auth 2. API Key 3. Bearer Token 4. JWT Bearer 5. [OAuth 2.0](/emobiq-ai/readme/external-api/oauth-2.0) {% endstep %} {% step %} **Authentication Credentials** Depending on the type of authentication your API requires, you’ll need to provide the appropriate credentials. Here’s what to enter for each authentication type: {% tabs %} {% tab title="Basic Auth" %} * Enter your Username and Password * The system will automatically encode these into a `Base64` string and include it in the request headers {% endtab %} {% tab title="API Key" %} * Specify the **Header Name** (e.g., `x-api-key`) and the **Key Value** * This adds a static key-value pair to the request headers and is commonly used for lightweight service authentication {% endtab %} {% tab title="Bearer Token" %} * Enter the **Token** string that will be used as the Bearer credential * This token is typically obtained from an authentication server and will be included in the `Authorization` header like this: `Bearer ` {% endtab %} {% tab title="JWT Bearer" %} * Enter the JWT (JSON Web Token) you want to use for authentication * The JWT is usually generated by an identity provider or authentication service and must be valid at the time of the request * Some systems also allow you to generate or refresh tokens dynamically using pre-request scripts or custom logic {% endtab %} {% tab title="OAuth 2.0" %} * **Client ID**: The public identifier for your application * **Client Secret**: The private key used to authenticate your app (optional depending on the grant type) * **Token Endpoint**: The URL where the system can request an access token * Select the appropriate **Grant Type** from the options below and fill in the required fields **Supported Grant Types:** | Grant Type | Best for | | -------------------------------- | -------------------------------------------------------------------------------------------------------- | | **Password Credentials** | First-party trusted apps that collect the user's username and password directly | | **Client Credentials** | Machine-to-machine or backend services accessing their own resources (no user involved) | | **Authorization Code** | Web apps accessing user data with explicit consent (e.g., Google, Microsoft, Salesforce) | | **Authorization Code with PKCE** | Use when your OAuth provider requires PKCE — adds a cryptographic challenge to prevent code interception | **Authorization Code** — requires: * Authorization URL, Access Token URL, Client ID, Client Secret, and Callback (Redirect) URL * eMOBIQ AI acts as a confidential client; the token exchange happens server-to-server **Authorization Code with PKCE** — requires: * Authorization URL, Access Token URL, Client ID, and Callback URL * Choose **SHA-256** (recommended) or **Plain** as the PKCE mode * Client Secret is not required and is often omitted For full details on all grant types, see the [OAuth 2.0 guide](/emobiq-ai/readme/external-api/oauth-2.0). * Ensure to refresh your access tokens when required:

Clicking on Get new Access Token,
ensures that the connection remains authenticated and ready for use

{% endtab %} {% endtabs %} {% endstep %} {% step %} **Authentication Instructions** After configuring your API authentication method, you can define Authentication Instructions — this tells the AI how to use the credentials when generating the app. This effectively creates a more accurate end result and helps to save cost during the app generation process. Auth Instructions allows you to: * Specify how authentication should be applied in requests (e.g., which headers, tokens, or query params to include) * Customise the behaviour of each API depending on the level of control you need * Help the AI correctly authorise requests to secured endpoints, without manual adjustments * While this step is optional, providing clear authentication instructions improves reliability and reduces ambiguity in how the AI should structure API calls {% endstep %} {% endstepper %} {% hint style="success" %} *Best Practice: Use authentication instructions to align your API call structure with the external service’s expected format (especially useful for APIs with non-standard auth headers or dynamic tokens)* {% endhint %} *** ### 3. Defining API Functions Once the domain and authentication are configured, you can define specific functions (or endpoints) to interact with the external API #### Create a New Function: 1. **Function Details** {% tabs %} {% tab title="Method" %} Supported HTTP methods include `GET`, `POST`, `PUT`, `PATCH`, and `DELETE`
{% endtab %} {% tab title="Name" %} A descriptive name for the function {% endtab %} {% tab title="Path" %} The relative path of the API endpoint (e.g., `/api/v1/users`) {% endtab %} {% endtabs %} 2. **Request Configuration** {% tabs %} {% tab title="Params" %} Query parameters appended to the URL
{% endtab %} {% tab title="Headers" %} Metadata sent with the request (e.g., content type, authorization headers)
{% endtab %} {% tab title="Body" %} Data sent in the body of the request, particularly useful for `POST`, `PUT`, and `PATCH` methods
{% endtab %} {% tab title="Instructions" %} Describe how the AI should interpret and utilize this function. Think of this as a functional specification for the AI engine to understand how to execute or reference this API during runtime
{% endtab %} {% endtabs %} *** ### 4. Testing the API Before integrating the API into your application, it’s essential to verify that it works correctly {% stepper %} {% step %} **Test** Use the `Test` button to send a request to the external API
{% endstep %} {% step %} **Return Message** A successful test will return a `200` or `201` status code, indicating that the connection and function execution was successful. Otherwise, try resolving the errors that appear
{% endstep %} {% step %} **Examination** Examine the returned data to ensure it matches expectations and contains the necessary fields for downstream processing {% endstep %} {% endstepper %} *** ### 5. Refining the API Response Sometimes, not all data returned by an API is required by your application. You can edit the response to improve performance and clarity.
Editing the response can either be done through a checklist **(Formatted)** or through the text editor **(Raw)**
{% tabs %} {% tab title="Edit or Remove Unnecessary Fields" %} If certain fields aren’t used, click **Edit** to remove them to ensure the AI doesn't use it, this is essential in helping the project be generated quicker and ensuring that only usable API information is available when creating the app {% endtab %} {% tab title="Edit the Response" %} * Use the edit function to filter or transform the JSON structure returned by the API * Select or deselect via the checkboxes * This helps simplify complex responses and align them with the format expected by your frontend components or internal logic {% endtab %} {% endtabs %} *** ### 6. Importing APIs Using Schemas For larger or more structured integrations, eMOBIQ AI supports importing API definitions using schema files
{% tabs %} {% tab title="(1) Import via Schema File" %} Upload a schema file (such as OpenAPI 3.0 Schema) that describes the API endpoints and data structures {% endtab %} {% tab title="(2) Manual Schema Entry" %} * Fill out the schema form manually to define the API structure directly in the platform and click generate
* Functions will be populated according to the schema
* This approach is ideal for APIs that don't provide downloadable schema files but still need formal documentation {% endtab %} {% endtabs %} {% hint style="info" %} ***Note**: Using schemas help streamline the integration process, ensuring consistency and reducing manual configuration errors* {% endhint %} *** ### 7. Manage Cookies
When calling external APIs — particularly those that use OAuth or session-based authentication — the API provider may set cookies as part of the authentication handshake, or require certain cookies to be present before allowing a request through. The **Manage Cookies** panel gives you visibility into those cookies and lets you manually add any that are missing. {% hint style="info" %} Cookies are managed entirely within your own browser — they stay on your device and are never transmitted to eMOBIQ servers. Because of this, cookies are browser-specific: switching to a different browser means you'll need to re-add them there. {% endhint %} The panel is split into two sections: | Panel | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Domain (left)** | Lists all domains that have cookies in your current browser session, grouped by the API provider domain (e.g., `login.microsoftonline.com`, `github.com`). A search bar lets you filter by domain name. Each domain shows a count of how many cookies it holds. | | **Cookies (right)** | Displays the **Key** and **Value** of every cookie set by the selected domain. An **Add** form at the bottom lets you manually inject cookies for that domain. | **Viewing cookies by domain** 1. Open the **Manage Cookies** panel 2. Use the **Search domain** bar to filter, or scroll to find the API provider domain 3. Click a domain — its cookies appear in the right panel as a Key / Value list **Adding a cookie** 1. Select the target domain from the left panel 2. Scroll to the **Add** section at the bottom of the right panel 3. Enter the cookie **Key** and **Value** and confirm — the cookie will be sent with subsequent API calls to that domain *** ### Conclusion By leveraging the robust API management features of eMOBIQ AI, you can securely and efficiently integrate external services into your applications. Whether you're retrieving data, submitting forms, or triggering backend processes, eMOBIQ AI provides a flexible and scalable framework for building intelligent, connected systems. # OAuth 2.0 ## OAuth 2.0 Grant Types Explained eMOBIQ AI supports **OAuth 2.0** as a secure and flexible authentication method for connecting to external APIs. OAuth 2.0 defines several **grant types**, each suited to different application architectures and security requirements. Understanding which grant type to use ensures your integration is both functional and compliant with the external service’s security policies. Below, we explain the different OAuth 2.0 grant types supported in eMOBIQ AI, when to use them, and how they work. *** ### Before You Begin: Configure Your OAuth Provider To use OAuth 2.0 in eMOBIQ AI, you **must first register your application** with the external API provider (e.g., Google, Microsoft Azure, Auth0, or your own OAuth server). During registration, you’ll typically need to provide: * **Redirect (Callback) URL**:\ Use the **Callback URL** shown in your eMOBIQ AI OAuth configuration (e.g., `https://api.emobiq.com/oauth/callback` or a custom one if supported). {% hint style="warning" %} *This URL must exactly match what’s registered with the provider—otherwise, the authorization flow will fail.* {% endhint %} * **Application Type**:\ Select the correct type (e.g., “Web Application” for Authorization Code, “Confidential Client” if using Client Secret). * **Allowed Grant Types**:\ Ensure the provider has enabled the grant type you intend to use (e.g., Authorization Code + PKCE, Client Credentials, etc.). * **Scopes**:\ Request only the permissions your integration needs. * **Client Authentication:**
**Send as Basic Auth Header**: client\_id & secret will be base-64 encoded and sent as HTTP header ("Authorization": "Basic XXXXXX") **Send client credentials in body**: client\_id & secret will be on response body instead, mixing with the rest of the params (scopes, etc) Without this external setup, eMOBIQ AI cannot complete the OAuth handshake—even if all fields are filled correctly. *** ### Configuring OAuth 2.0 in eMOBIQ AI When setting up an **External API** connection: 1. Select **OAuth 2.0** as the authentication type 2. Choose the appropriate **grant type** from the dropdown 3. Fill in the required fields (URLs, credentials, etc.) 4. (Optional but recommended) Add **Authentication Instructions** to guide the AI on how to include the token in requests (e.g., `Authorization: Bearer `) *** ### 1. Password Credentials **Use Case**: Your application is highly trusted (e.g., a first-party native app), and you can securely collect the user’s username and password #### How It Works * The client (your eMOBIQ AI app) sends the user’s **username** and **password** directly to the authorization server * In return, the server issues an **access token** (and optionally a **refresh token**) * This token is then used to authenticate subsequent API requests #### Required Configuration in eMOBIQ AI
* Access Token URL – The endpoint where credentials are exchanged for a token * Username and Password – Provided by the end user or stored securely * Client ID and Client Secret – May be required depending on the API provider {% hint style="danger" %} ***Security Note**: This grant type is discouraged for third-party applications or public clients, as it requires handling user credentials directly. Use only when absolutely necessary and with explicit user consent.* {% endhint %} *** ### 2. Client Credentials **Use Case**: Your application needs to access **its own resources** (not user-specific data), such as backend services or machine-to-machine communication #### How It Works * The client authenticates **as itself** using its **Client ID** and **Client Secret** * The authorization server returns an access token scoped to the client’s permissions * No user interaction is involved—ideal for automated or server-side workflows #### Required Configuration in eMOBIQ AI
* Access Token URL * Client ID * Client Secret {% hint style="info" %} ***Note:** Some providers (e.g., Azure AD) require you to explicitly grant **application permissions** (not delegated) and may need admin consent.* {% endhint %} *** ### 3. Authorization Code **Use Case**: Building a **web application** that accesses user data with their explicit consent (e.g., integrating with Google, Microsoft, or Salesforce) #### How It Works 1. The user is redirected to the **authorization server** to log in and approve permissions 2. Upon approval, the server redirects back to your app with an **authorization code** 3. Your app exchanges this code for an **access token** (and often a **refresh token**) via a backend call #### Required Configuration in eMOBIQ AI
* Authorization URL – Where users are sent to log in and consent * Access Token URL – Where the authorization code is exchanged for a token * Client ID and Client Secret * Callback (Redirect) URL – Must match a URL pre-registered with the API provider eMOBIQ AI acts as a **confidential client**, meaning it can securely store the Client Secret. The authorization code exchange happens server-to-server — **no browser or user agent is involved**. You do **not** need to use PKCE unless the provider explicitly requires it (e.g., for public clients). However, if your provider mandates PKCE even for confidential clients (some do, like certain OpenID Connect setups), use the “Authorization Code with PKCE” option. {% hint style="success" %} ***Security Benefit**: The access token is never exposed to the browser or user-facing layer, making this one of the most secure OAuth flows.* {% endhint %} *** ### 4. Authorization Code with PKCE (Proof Key for Code Exchange) **Use Case**: Use this flow only if your OAuth provider **requires PKCE** — even for server-side applications (e.g., some identity providers enforce it universally). While PKCE was originally designed for public clients (like SPAs or mobile apps), some modern providers mandate it for all Authorization Code flows. #### How It Works * Similar to the standard Authorization Code flow, but adds a **cryptographic challenge** to prevent code interception attacks * Before redirecting the user, the client generates a **code verifier** and its hashed version (**code challenge**) * The code challenge is sent during authorization * When exchanging the code for a token, the client sends the original **code verifier**—the server validates it against the stored challenge #### Required Configuration in eMOBIQ AI
* Authorization URL * Access Token URL * Client ID (Client Secret is not required and often omitted) * Callback URL * PKCE Mode – Typically `SHA-256` for strong security. Choose the algorithm used to generate the code challenge: * SHA-256 (Recommended) → Uses cryptographic hashing for maximum security. * Plain → Sends the code verifier directly (less secure, only for legacy systems). {% hint style="success" %} ***Recommended** for public clients where storing a client secret is unsafe. PKCE is now considered a best practice—even for web apps.* {% endhint %} # Business Connect Business Connect is a specialized integration module built for **ERP developers, functional consultants, and integrators** working with enterprise resource planning systems. It's the power-user counterpart to the [standard External API](/emobiq-ai/readme/external-api) setup — instead of defining endpoints one at a time, Business Connect lets you authenticate against your ERP instance and **import the full API surface** in a single step. {% hint style="info" %} *Business Connect is designed for users who already understand their ERP's API model. If you're not familiar with concepts like tenants, endpoint versions, or OAuth scopes, work with your ERP administrator to gather the required credentials before continuing.* {% endhint %} *** ### Supported ERPs
Business Connect currently supports the following ERP vendors: * **Acumatica** * **Microsoft Dynamics 365 Business Central** * **Sage** Each vendor exposes a different set of connection parameters — described in detail below. *** ### How It Differs from the Standard Setup | Capability | Standard External API | Business Connect | | -------------- | -------------------------------------- | -------------------------------------------------------- | | API discovery | Manual entry or OpenAPI schema upload | Automatic import using ERP instance credentials | | Setup style | Endpoint-by-endpoint configuration | One-time vendor configuration, full API surface imported | | Target user | General developers / integrators | ERP developers, functional consultants | | Authentication | Basic, API Key, Bearer, JWT, OAuth 2.0 | Vendor-specific (OAuth 2.0, username/password) | | Best for | Any third-party REST API | Acumatica, Dynamics 365, Sage integrations | *** ### The Business Connect Wizard Business Connect runs as a 4-step wizard: 1. **Select the type of connector** — choose your ERP vendor (Acumatica, Dynamics 365, or Sage) 2. **Enter connector information** — provide instance URL, credentials, and authentication details 3. **Select function** — pick which endpoints to import 4. **Select collection to save** — choose where to file the imported endpoints The sections below walk through each step. *** ### Step 1 & 2: Configuring the Connection {% tabs %} {% tab title="Acumatica" %} Acumatica exposes its data through **contract-based REST endpoints**, where each endpoint is a versioned, named bundle of entities (e.g., the built-in `Default` endpoint, or any custom endpoint you've extended in the Web Service Endpoints screen, `SM207060`). Business Connect authenticates against the Acumatica instance's built-in identity server and pulls in the entity schema for the endpoint you select. **ERP context:** * Each Acumatica tenant runs its own identity server at `Base URL + /identity/connect/token` * The combination of **Endpoint Name + Endpoint Version** determines which entities (e.g., `Customer`, `SalesOrder`, `Bill`) are exposed and what fields they carry * Multi-tenant Acumatica instances require the **Tenant Name** (called *Company* in Acumatica's UI) so the token is scoped to the right database **Required fields:** * **Base URL** *(required)* — your Acumatica instance URL\ e.g., `https://your-company.acumatica.com` * **Endpoint Version** *(required)* — the contract-based endpoint version configured under *Web Service Endpoints*\ e.g., `22.200.001` * **Endpoint Name** *(required)* — the endpoint to expose\ e.g., `Default` * **Tenant Name** *(optional)* — the Acumatica tenant/company; required for multi-tenant instances\ e.g., `Company` **Authentication Type:** `OAuth 2.0` or `No Auth` {% hint style="info" %} *Use `No Auth` only for endpoints intentionally exposed without authentication (rare, typically internal sandboxes). Production Acumatica instances should always use OAuth 2.0.* {% endhint %} When using **OAuth 2.0**, only the **Password Credentials** grant type is supported. Provide: * **Access Token URL** — defaults to `Base URL + /identity/connect/token` * **Username** *(required)* — Acumatica user (the same login used in the Acumatica UI) * **Password** *(required)* — Acumatica user password * **Client ID** *(required)* — Client ID from the Acumatica *Connected Applications* record (`SM303010`)\ e.g., `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` * **Client Secret** *(required)* — Client Secret generated alongside the Client ID * **Scope** *(required)* — OAuth scopes\ e.g., `api offline_access` (use `offline_access` if you need refresh token support) {% hint style="info" %} *Register the Connected Application in Acumatica under **System → Integration → Connected Applications**, choose the **Resource Owner Password Credentials** flow, and assign it to the Acumatica user whose credentials you'll enter here.* {% endhint %} {% endtab %} {% tab title="Dynamics 365" %} Microsoft Dynamics 365 Business Central exposes data through two API surfaces: the **standard REST API** (Microsoft's published, versioned API at `/api/v2.0/...`) and **OData v4** (the underlying protocol used by published pages and queries). Business Connect lets you target either, and authenticates through Microsoft Entra ID (Azure AD). **ERP context:** * Business Central is multi-tenanted on Microsoft Entra — the **Tenant ID** identifies your Entra tenant, and the **Environment** identifies the Business Central environment within it (e.g., `Production`, `Sandbox`) * Each environment can host multiple **Companies** (Business Central's term for a chart-of-accounts / legal-entity boundary). Leave it blank to import companies; specify one to scope the import * Service-to-service integrations should use **client credentials** with an Azure App Registration that has been granted the `API.ReadWrite.All` permission (or equivalent) on the Business Central API **Required fields:** * **API Base URL** *(required)*\ e.g., `https://api.businesscentral.dynamics.com` * **Business Central instance version** *(required)* — the API version path segment\ e.g., `v2.0` * **Tenant ID** *(required)* — your Microsoft Entra tenant GUID\ e.g., `11111111-2222-3333-4444-555555555555` * **Environment** *(required)* — Business Central environment name\ e.g., `Production` * **Company** *(optional)* — Business Central company display name\ e.g., `CRONUS USA, Inc.` **API Type:** `API` (Microsoft's standard REST API) or `OData v4` {% hint style="info" %} *Choose **API** for the official, version-stable Business Central REST endpoints (recommended for most integrations). Choose **OData v4** when you need to call published pages, queries, or AL-extended endpoints that aren't surfaced through the standard API.* {% endhint %} **Authentication Type:** `Client Credentials` (OAuth 2.0) or `No Auth` When using **Client Credentials**, provide: * **Access Token URL** *(required)*\ e.g., `https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token` * **Client ID** *(required)* — Azure App Registration (Application) ID * **Client Secret** *(required)* — secret generated under *Certificates & secrets* in the App Registration * **Scope** *(required)*\ e.g., `https://api.businesscentral.dynamics.com/.default` {% hint style="warning" %} *Replace `{tenant-id}` in the Access Token URL with the actual Tenant ID GUID. The Azure App Registration must have the **Dynamics 365 Business Central** API permission granted **with admin consent**, and the same App ID must be registered as an admin user inside Business Central (Users → New → S2S Authentication).* {% endhint %} {% endtab %} {% tab title="Sage" %} Business Connect supports Sage's REST APIs (e.g., Sage 200, Sage X3, Sage Intacct via partner endpoints) where the API is reached through a tenant- and company-scoped base path. Sage authenticates with username/password over HTTPS — there is no OAuth flow on the Business Connect path today. **ERP context:** * Sage's API is namespaced by **Tenant** (your Sage subscription) and **Company** (the legal entity / dataset within that tenant) * The **Base Path** identifies the Sage module being targeted (e.g., `/accounts` for the financials module). Different modules expose different entity sets * The **API Version** is part of the URL contract — keep it pinned to a known-good version to avoid breaking changes when Sage rolls out updates **Required fields:** * **API Base URL** *(required)*\ e.g., `https://api.sage.com` * **API Version** *(required)*\ e.g., `3.1` * **Base Path** *(required)* — the Sage module path\ e.g., `/accounts` * **Tenant Name** *(required)* — your Sage tenant identifier\ e.g., `your-tenant-name` * **Company** *(required)* — Sage company / dataset identifier\ e.g., `your-company-id` **Authentication Type:** `Basic Auth` or `No Auth` When using **Basic Auth**, provide: * **Username** *(required)* * **Password** *(required)* {% hint style="info" %} *Use a dedicated API/integration user in Sage rather than a named human user — Sage tracks API activity against the login used, and tying it to a service account makes audit and rotation easier.* {% endhint %} {% endtab %} {% endtabs %} *** ### Step 3: Selecting the Endpoints to Import Once the connection is validated, Business Connect queries the ERP instance and lists every available endpoint. ERP APIs are large — Acumatica's `Default` endpoint alone can expose hundreds of entities, and a fully extended Dynamics 365 environment can surface thousands of endpoints. **Step 3 is where you cut that list down to only what your application actually uses.** {% hint style="warning" %} *Business Connect can technically import hundreds of endpoints — close to unlimited — but doing so is **strongly discouraged**. Every imported endpoint adds context the AI must reason over during app generation, which directly increases generation cost and latency. Most applications only use a small fraction of the ERP's surface area; import only those.* {% endhint %} #### How the selection screen works * **Grouped by HTTP method, then by name** — endpoints are organized first by type (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`) and then alphabetically by endpoint name, making it easy to scan related operations together (e.g., all `GET` reads, all `POST` creates) * **Per-endpoint checkboxes** — tick the checkbox beside any endpoint to include it in the import * **Search bar** — filter the list by name to quickly locate the entities you need (e.g., `Customer`, `SalesOrder`, `Item`) * **Select All / Deselect All** — bulk-toggle the entire (or filtered) list when you need to start from a clean slate or include everything in a small endpoint group #### Selection guidance {% hint style="success" %} * Start by **deselecting all**, then add back only the endpoints your app needs * Pick endpoints based on the **user stories** the app will support (e.g., "list customers", "create sales order") — not "everything related to sales" * Prefer **`GET` reads first** — only add `POST`/`PUT`/`PATCH`/`DELETE` for entities the app will actually write to * If you're unsure whether an endpoint is needed, leave it out — you can always rerun Business Connect later to add more {% endhint %} *** ### Step 4: Choosing the Collection In the final step, pick the **collection** the selected endpoints will be saved into. Collections are the same containers used by the rest of the [External API](/emobiq-ai/readme/external-api) flow — you can: * Save into an **existing collection** to keep all endpoints for one ERP under a single connector * Create a **new collection** for a clean separation (e.g., one collection per ERP module, or one per app) Once saved, the imported endpoints behave exactly like any other External API function — they appear in the AI's available toolset during app generation, can be combined with custom External API connections, and can be edited or extended after import. *** ### Tips {% hint style="success" %} * Confirm your ERP credentials work outside eMOBIQ AI first (e.g., via the vendor's own API explorer or Postman) * Use a service account rather than a personal account where possible — credentials persist with the connection * Keep Client Secrets in a secrets manager and rotate them on the schedule mandated by your ERP vendor * For OAuth-based ERPs (Acumatica, Dynamics 365), make sure the registered application allows the grant type you select and includes the scopes Business Connect needs {% endhint %} *** ### Related * [External API](/emobiq-ai/readme/external-api) — the general-purpose API setup * [OAuth 2.0](/emobiq-ai/readme/external-api/oauth-2.0) — OAuth grant types reference * [EZ-Connect](/emobiq-ai/readme/external-api/ez-connect) — natural-language API setup for prototyping # EZ-Connect EZ-Connect makes integration easier than ever, enabling you to connect to third-party services using natural language — whether it's the SAP Business Connector model or even plain English. It's the no-code path for users who already have API information (vendor docs, integration guides, sample requests) but aren't comfortable wiring it up through the standard POSTMAN-like editor used in the [External API](/emobiq-ai/readme/external-api) setup. {% hint style="warning" %} *EZ-Connect is intended for **experimentation and prototyping only**. Because the configuration cannot be tested or verified at setup time, behaviour may be inconsistent and is not recommended for production workloads.* {% endhint %} *** ### When to Use EZ-Connect EZ-Connect is the right choice when: * You're a non-technical user with API documentation but no API tooling experience * You're building a quick prototype or proof-of-concept * You only have natural-language docs (e.g., the SAP Business Connector model) and no OpenAPI schema * You're putting together a throwaway demo and need to move fast *** ### How It Works The URL, target connection, and freeform input you provide are passed to the AI as an **instruction set**. The AI interprets these instructions when generating API calls at runtime — meaning the integration is only as reliable as the description you give it. Unlike the standard External API setup, there is **no test or verify step**. You cannot validate the endpoint, headers, authentication, or response shape before the AI uses it during app generation. *** ### Setting Up an EZ-Connect Integration
{% stepper %} {% step %} **URL** Enter the base URL or endpoint of the third-party service you want to connect to. {% endstep %} {% step %} **Save To** Select the connection (e.g., `Acumatica`) that the EZ-Connect instructions will be attached to. {% endstep %} {% step %} **Your Input** Paste your natural-language API documentation, SAP Business Connector model text, or a plain-English description of how the API works. Cover: * Authentication (e.g., "Use a Bearer token in the `Authorization` header") * Available endpoints and HTTP methods * Required parameters or request bodies * Expected response shape, if known {% endstep %} {% step %} **Save** Click `Save` to store the input as an instruction set for the AI to reference during app generation. {% endstep %} {% endstepper %} *** ### EZ-Connect vs. Standard External API Setup | Criteria | EZ-Connect | Standard External API | | -------------------- | ------------------------------------ | ------------------------------------------------- | | Target user | Non-technical users | Developers / system integrators | | Input format | Natural language / plain text | Structured fields (URL, headers, body, auth) | | Authentication setup | Described in plain text | Explicit (Basic, API Key, Bearer, JWT, OAuth 2.0) | | Endpoint testing | Not available | Built-in `Test` button with response inspection | | Response shaping | Not available | Formatted/Raw editor to trim unused fields | | Verifiability | Cannot verify before generation | Verified end-to-end before use | | Accuracy | Lower — depends on AI interpretation | Higher — deterministic configuration | | Schema import | Not supported | Supports OpenAPI 3.0 import | | Best for | Prototypes, experiments, demos | Production integrations | *** ### Limitations {% hint style="danger" %} EZ-Connect trades accuracy and verifiability for ease of use. Be aware of the following before relying on it: * No request validation or test execution before generation * Quality depends entirely on the clarity of the pasted instructions * The AI may hallucinate fields or behaviour the API does not actually expose * Not suitable for sensitive data flows or production workloads * Authentication handling is best-effort — complex flows such as [OAuth 2.0](/emobiq-ai/readme/external-api/oauth-2.0) token refresh should use the standard setup {% endhint %} *** ### Tips for Better Results {% hint style="success" %} The clearer your instructions, the better EZ-Connect performs: * Include the full base URL and a list of endpoints with their HTTP methods * State the auth mechanism plainly (e.g., *"Use a Bearer token in the `Authorization` header"*) * Provide example requests and example responses where possible * Keep each EZ-Connect entry focused on a single logical group of endpoints {% endhint %} *** ### When to Graduate to the Standard Setup Once your prototype is validated and you need accuracy, testability, and production-grade authentication, move the integration to the standard [External API](/emobiq-ai/readme/external-api) flow — and use [OAuth 2.0](/emobiq-ai/readme/external-api/oauth-2.0) for any auth flow that requires token exchange or refresh. # Plugins ### Unlock Your App's Full Potential — No Code, No Limits #### Make Your AI Apps Do More Than You Ever Thought Possible Imagine telling an AI to build you an app that takes photos, tracks your location, or saves files to your phone and it actually works. That's the power of plugins. **The Problem:** Without plugins, AI-generated apps are stuck in a sandbox. They can't touch your camera, access your GPS, or interact with device hardware. Your brilliant app idea? Limited to basic screens and buttons. **The Solution:** Plugins are like giving your AI superpowers. With the click of a button, your app can do everything a professionally-coded app can do on iPhone, Android, and Web. {% columns fullWidth="false" %} {% column width="25%" %}

Access Hardware

Camera, GPS, File System, Bluetooth, Microphone, and so much more.... {% endcolumn %} {% column width="25%" %}

Cross-Platform

Works on iOS, Android, and Web {% endcolumn %} {% column %}

AI-Aware

Tell the AI “use the Camera Plugin” — it knows how to call it, or reference to it using the reference button {% endcolumn %} {% column %}

No Coding Required

Just click “Add” and reference it for AI to generate the code that works for the different plugins {% endcolumn %} {% endcolumns %} *** #### Using Plugins Plugins can be accessed in our platform through a variety of ways. 1\) During project creation

Click configure

To use the plugins, simply click activate on the plugin you wish to use

2\) In the home page By clicking the Plugin button from the home page, you will be directed to the plug in page where you can browse various plugins to add to your plug to your account to be activated in your project.

In this page you will be able to change the plugin's that are displayed OR activate/deactivate plugins for future projects.

3\) In Debug Agent Clicking the Plugin icon followed by Details you can navigate to plugins page to activate or disable the plugins.
{% stepper %} {% step %} #### Step 1: Tell the AI About Your Plugin After adding a plugin, you must inform the AI: ``` Prompt Example: “I’ve added the Camera Plugin. When the user taps ‘Take Photo’, use the Camera Plugin to capture an image and display it.” ``` The AI will now generate code that calls the plugin’s functions. {% endstep %} {% step %} **Step 2: Reference the Plugin in Your Prompt (Optional but Powerful)** You can reference specific functions directly: ``` Advanced Prompt Example: “Use the File Plugin’s writeFile function to save the captured photo as ‘user-photo.jpg’ in the app’s internal storage.” ``` This gives you fine-grained control over how the plugin is use. {% endstep %} {% endstepper %} *** ### AI Plugins
To use AI-powered features, you'll need to provide your own API key from your chosen AI provider. #### OpenAI 1. Go to [platform.openai.com](https://platform.openai.com) 2. Sign in or create an account 3. Click your profile icon → **API keys** 4. Click **Create new secret key** 5. Copy the key — you won't be able to see it again > ⚠️ Keep your API key private. Never share it or commit it to version control. *** #### Anthropic (Claude) 1. Go to [console.anthropic.com](https://console.anthropic.com) 2. Sign in or create an account 3. Navigate to **API Keys** in the left sidebar 4. Click **Create Key** 5. Copy the key — it won't be shown again > ⚠️ Keep your API key private. Never share it or commit it to version control.
Once you have your key, paste it into the **API Key Field.** *** ### FAQ **Q: Do I need to know how plugins work?**\ A: Nope! Just tell the AI what you want. It knows how to use every plugin. **Q: Will my app work on real phones?**\ A: Yes! Plugins generate native code for iOS, Android, and Web. **Q: How many plugins can I use?**\ A: As many as you need. Mix and match to build powerful apps. **Q: What if I don't know which plugin to use?**\ A: Just describe your feature in plain English. The AI will recommend the right plugins. # Additional Information #### What’s Inside a Plugin? Click **Details** to view more details of the different plugins available for use.
#### Key Sections in Plugin Details * **Function**: The exact JavaScript syntax to call (e.g., `emobiqPlugin["camera-plugin"]["takePicture"](params)`). * **Parameters**: What data to pass in (e.g., `params.quality`, `params.saveToGallery`). * **Returns**: What the function returns (e.g., image URI, error message). * **Usage**: Real-world examples of how to use it.
* **Description**: What the plugin does * **Platform Support**: iOS, Android, Web * **Version**: Always use the latest unless specified * **Author**: Who built it (eMOBIQ or third party)
* **Function**: The exact API calls available that eMOBIQAI uses when creating or debugging the application {% hint style="success" %} ***Tip**: Bookmark plugins you use often — they’ll appear under “Only bookmarked plugins”.* {% endhint %} # Creating Your Own Plugin ### 🔌 **Introducing Plugins: Unlock True Native Power in Your AI-Generated Apps!** **Finally — your AI app can do more than just *****talk*****. It can *****see*****, *****listen*****, *****move*****, and *****connect***** to the real world.** For the first time in eMOBIQ AI, your generated applications can **access the full power of the device** they run on. Whether it’s an iPhone, an Android phone, or a web browser. 📸 **Take photos**\ 📍 **Get live GPS location**\ 📁 **Save files to device storage**\ 📡 **Connect to Bluetooth devices**\ 🔨**Create plugins** for payment gateways, IOT devices…and much more! 🔥 **This isn’t just an upgrade — it’s a game-changer.**\ With Plugins, your AI-generated app stops being a “chatbot with buttons” and becomes a **real, native-capable application**. *** ### What’s Inside a Plugin? #### Understanding Plugin Details at a Glance When you click **Details** on any plugin, you’ll see everything you need to decide **if it’s right for your app. No** coding experience required. Here’s how to quickly understand what matters most: #### 🔍 **1. What does this plugin actually do?** {% hint style="success" %} *Look for the **Description*** {% endhint %} This short summary explains the plugin’s purpose in plain language.\ Example: *“The Camera Plugin lets users take photos using their phone's camera”* *** #### 📱 **2. Will it work on my target platform?** {% hint style="success" %} *Check **Platform Support*** {% endhint %} Plugins may work on **iOS**, **Android**, **Web**, or all three.\ Example: *Camera Plugin → iOS ✅ | Android ✅ | Web ❌* ⚠️ **Important**: If you’re building a mobile app, make sure the plugin supports **both** iOS and Android, unless you’re targeting only one *** #### 🛡️ **3. Is it safe and trustworthy?** {% hint style="success" %} *Check the **Author*** {% endhint %} * **Official (eMOBIQ)**: Built and maintained by our team. Fully tested, secure, and guaranteed to work * **Third-Party**: Created and published by enterprise users. Review the description and usage examples before using in production {% hint style="info" %} **Best Practice**: For business-critical apps, prefer **Official plugins** unless a third-party plugin solves a unique need. {% endhint %} *** #### 🧪 **4. How do I use it in my app?** {% hint style="success" %} *Read the **Usage** examples* {% endhint %} You don’t need to write code—just tell the AI what you want!\ Example prompt: ``` I’ve added the Camera Plugin. When the user taps ‘Take Photo’, open the camera and show the picture afterward. ``` {% hint style="warning" %} **Reminder**: After adding a plugin, always mention it in your prompt so the AI knows to use it! {% endhint %} *** ### Plugin Access by Plan: Who Can Do What?
{% columns %} {% column width="50%" %} **💼 Professional Users** Build internal plugins for your team, client apps, or private workflows. Perfect for businesses that need custom functionality without public distribution. {% endcolumn %} {% column width="50%" %} **🏢 Enterprise Users** Become a plugin publisher, share your innovations with the entire eMOBIQ ecosystem and establish your brand as a solutions leader. {% endcolumn %} {% endcolumns %} *** ### How to Create a Plugin For Professional & Enterprise users, you may refer to our [official configuration guide](https://service.emobiq.com/) # Testing On Debug Agent #### Verify Your Plugin Works: Even on Mobile Features Like Camera or GPS Plugins unlock powerful native device capabilities like camera, GPS, file system, and more. But here's the catch: **you're building in a browser on your laptop.** How do you test a camera feature when your computer can't access your phone's camera? **The answer: The Debug Agent and Real Device Testing** 💡 **Why This Matters**:\ You can't open your iPhone camera from your web browser on your laptop, but you *can* simulate how the plugin behaves. The Debug Agent gives you instant feedback without waiting for a full app build. *** #### Trigger the Plugin in Debug Mode Use the app as you would and test the functions that require the plugin. Example: Testing the Camera Plugin
* Click the "Take Photo" button in your app preview * The Debug Agent simulates the plugin call * You'll see a **web mockup** instead of the real camera opening * Check the **eMOBIQ Terminal** for plugin logs and any error messages **What You're Testing:** ✅ Does the button trigger the plugin correctly?\ ✅ Does the app handle the returned image properly?\ ✅ Are there any errors in the integration? **What You're NOT Testing:** ❌ The actual camera hardware\ ❌ Real-world performance on iOS/Android\ ❌ Device-specific permissions or quirks *** ### Test on a Real Device (Full Validation) For full native functionality (or plugins that don't support web): 1. **Click "Release"** in eMOBIQ 2. **Select Your Platform:** * **iOS:** Generates an `.ipa` file (requires Apple Developer account) * **Android:** Generates an `.apk` file (install directly or upload to Play Store) 3. **Install on Your Device:** * **Android:** Download the `.apk` and install (enable "Install from Unknown Sources") * **iOS:** Use TestFlight or Xcode to install the `.ipa` 4. **Test Every Plugin Feature:** * Tap "Take Photo" → Does the camera open? * Tap "Get Location" → Does GPS activate? * Save a file → Does it appear in device storage? **Why This Step Is Critical:** * Real device permissions (Camera, Location, Microphone) * True performance metrics * OS-specific behaviors (iOS vs Android differences) * Full offline functionality # Supabase ## Supabase Integration: Your App's Supercharged Backend ### What Is Supabase? **Supabase is an open-source** complete backend database with no server setup required. Think of it as your app's brain: it stores data, handles user authentication, manages files, and even sends real-time updates to all your users instantly, integrated seamlessly with eMOBIQ AI! {% columns fullWidth="true" %} {% column width="50%" valign="middle" %}
{% endcolumn %} {% column width="50%" %} **What Supabase Offers** * **PostgreSQL Database:** Store user data, posts, products, anything * **Real-Time Sync:** Changes appear instantly across all devices * **User Authentication:** Login, signup, magic links, OAuth (Google, Apple, etc.) * **File Storage:** Upload and serve images, videos, documents * **Row-Level Security:** Control who can see/edit what data * **RESTful API:** Automatically generated for your database Supabase Documentation {% endcolumn %} {% endcolumns %} {% hint style="info" %} *For more information on* Supabase Pricing {% endhint %} *** ### Why eMOBIQ AI + Supabase = Magic ✨ {% columns fullWidth="true" %} {% column %} **The Problem With Traditional Development:** Building a backend takes weeks. You need to: * Design database schemas * Write API endpoints * Handle authentication * Set up file storage * Sync data across devices * Deploy and maintain servers **Estimated time:** 2–4 weeks for an experienced developer. {% endcolumn %} {% column %} **The eMOBIQ AI Solution:** **Tell the AI what data you need. It sets up Supabase automatically.** ``` Example Prompt: "Build a recipe app where users can save their favorite recipes with photos." ``` **What eMOBIQ AI Does:** 1. Creates a `recipes` table in Supabase with columns: `title`, `ingredients`, `instructions`, `photo_url`, `user_id` 2. Sets up authentication so users can sign up/login 3. Configures file storage for recipe photos 4. Generates all the code to save, fetch, and display recipes 5. Enables real-time sync so updates appear instantly **Your job:** Describe what you want. **eMOBIQ's job:** Make it work. {% endcolumn %} {% endcolumns %} # Configuring Authentication URLs When you generate an eMOBIQ AI application with Supabase login, verification emails (sign-up confirmations, password resets, magic links) will redirect users to the **wrong URL** by default. This is a one-time configuration in your Supabase project that you need to do before authentication will work. {% hint style="info" %} The app code is working correctly. Supabase just needs to be told where your app is running. {% endhint %} *** ## Step 1: Get Your App URL from eMOBIQ AI Your app URL is found on your debug page in the **eMOBIQ AI portal**. {% hint style="info" %} If you are still testing, use the **debug agent URL**. Once you publish your app, repeat this process with the **published app URL**. {% endhint %} *** ## Step 2: Update Supabase URL Configuration In your [Supabase dashboard](https://supabase.com/dashboard), go to your project and navigate to: **Authentication → URL Configuration** You will see two fields to update: 1. **Site URL** — Replace the existing value (e.g. `http://localhost:3000`) with your eMOBIQ AI app URL. Wildcards are not allowed here. This is the web-url if you are testing on the platform. 2. **Redirect URLs** — Click **Add URL** and add the same URL. This allowlist controls where Supabase is permitted to redirect users after authentication.
Click **Save changes** when done. Supabase Redirect URL Guide {% hint style="warning" %} If you use both a debug URL and a published app URL, add **both** to the Redirect URLs list. The Site URL should be set to whichever environment you are currently working in. {% endhint %} *** ## Verification Register a new account in your app. Open the verification email — the link should now point to your eMOBIQ AI app URL and complete successfully. *** {% hint style="info" %} If you want users to access your app without registering, you can enable anonymous sign-ins alongside email authentication. [Anonymous Sign-Ins](/emobiq-ai/readme/supabase/anonymous-sign-ins) {% endhint %} # Integrating eMOBIQ AI with Supabase ## The Integration Flow: Seamless, Smart, and Safe eMOBIQ AI doesn't just connect to Supabase, it **orchestrates** your entire backend workflow with built-in safeguards {% stepper %} {% step %} #### Linking Supabase To use Supabase with your eMOBIQ project, simply click `Configure` under the `Advanced Tab`
{% endstep %} {% step %} #### Connect to Supabase Click on `Connect to Supabase`
{% endstep %} {% step %} #### Authorise eMOBIQ AI * Log in to your Supabase account. If you don't have one, simply register for an account to get started * Select the **Organization** you want to grant API access to * Authorize eMOBIQ by confirming the permissions
{% endstep %} {% step %} #### Select or Create a Project Select the project you would like eMOBIQ AI to create the database on If you haven't created a project yet, you can click `Create New Project` directly from the eMOBIQ AI platform
{% endstep %} {% endstepper %} *** ## Pro Tips for Success #### Let eMOBIQ AI know which backend to use In your app ideation phase, be sure to let eMOBIQ AI know you want to use Supabase as the backend database. This is to help ensure that the backend is confirmed and eMOBIQ AI is clear on what backend you want to use.
#### Selecting Manual Review (Recommended) While not compulsory, we **highly recommend** selecting the `Manual Review` option over Autopilot.
**Why?** * In the Tech Lead stage, you'll receive prompts to review database schemas * You can approve or reject each schema based on your specific requirements * Each SQL query will create tables on Supabase based on what you approve or modify * This gives you full control and ensures the database structure matches your needs
*** ### Summary By following these steps and best practices, you'll have a fully integrated Supabase backend that's tailored to your application's needs — with the safety and control of manual review every step of the way. # Editing Your Database Your database structure isn't set in stone, but changes need to happen in the right places. Here's your complete guide to when, where, and how to modify your Supabase database. ### The Golden Rule **Database changes can ONLY be made in two places in our platform:** 1. 🔍 **Manual Review Mode** - During schema approval (before tables are created) 2. 🐛 **Debug Agent** - For testing, iteration, and fixing issues *** ### Where You CAN Make Changes #### Manual Review Mode (Recommended) **When:** During the Tech Lead stage, before tables are created **What you can change:** * Table names * Column names and data types * Add or remove columns * Modify constraints (NOT NULL, UNIQUE, etc.) * Change default values * Update foreign key relationships * Add indexes * Set up Row-Level Security policies **Best for:** * Initial database design * Major structural changes * Adding new features early in development **How to access:** {% stepper %} {% step %} Enable Manual Review in project settings
{% endstep %} {% step %} Wait for Tech Lead stage
{% endstep %} {% step %} Review and modify schemas as needed
{% endstep %} {% step %} Approve when satisfied {% endstep %} {% endstepper %} ``` Example scenario: You're building a recipe app. eMOBIQ AI proposes a recipes table without a difficulty_level column. In Manual Review, you add it before approval, avoiding a migration later. ``` *** #### Debug Agent **When:** After initial development, during testing and debugging **What you can change:** * Add test data * Modify existing records for testing * Test new columns or tables * Execute ad-hoc SQL queries * Troubleshoot issues **Best for:** * Testing new features * Debugging data issues * Experimenting with schema changes * Iterating on database design *** {% stepper %} {% step %} Open your project {% endstep %} {% step %} Click on **Debug Agent** tab {% endstep %} {% step %} Use the prompt to let Debug Agent know your changes
{% endstep %} {% step %} Approve or Reject changes Verify that this is the change you want before accepting the change
{% endstep %} {% endstepper %} *** ### Verifying Your Data in Supabase After making changes or syncing data, you can inspect your tables directly in the Supabase Studio dashboard. {% hint style="warning" %} **The Table Editor paginates results at 100 rows per page.** If you're verifying that data was inserted correctly, use the **Next** button at the bottom of the grid to check later pages — new rows are typically appended at the end of the table, not the top. {% endhint %} For a full guide on browsing and filtering table data, see the official Supabase documentation: Supabase Table Editor Docs # Anonymous Sign-Ins #### Empower Your Users with Seamless Anonymous Authentication Transform your application's user experience with **Supabase Anonymous Sign-Ins**, the powerful authentication method that lets users explore your app without barriers. Enable authenticated experiences without requiring email addresses, passwords, or any personal information upfront! Anonymous Sign-In Documentation #### Getting Started: Enable Anonymous Sign-Ins in Three Easy Steps! {% stepper %} {% step %} **Access Your Supabase Dashboard** Navigate to your Supabase project dashboard to begin configuration.
*Your Supabase Dashboard - Select your project to get started* 1. Log in to 2. Select your project from the project list {% endstep %} {% step %} **Navigate to Authentication Settings** Configure your authentication providers with just a few clicks. * Click on **"Authentication"** in the left sidebar * Select **"Providers"** from the authentication menu

The Providers page displays all available authentication methods

{% endstep %} {% step %} **Enable Anonymous Sign-Ins** Activate the anonymous sign-in feature with a simple toggle.

Toggle the switch to enable it

Click **Save Changes** to apply the changes. {% endstep %} {% endstepper %} *** {% hint style="info" %} Anonymous sign-ins don't require email verification, so no redirect URL setup is needed. If you are using **email/password login or magic links**, make sure to also configure your authentication URLs so verification emails redirect correctly. [Configuring Authentication URLs](/emobiq-ai/readme/supabase/configuring-authentication-urls) {% endhint %} # Transfer Supabase Projects #### Seamlessly Move Projects Between Organizations! Organize your Supabase infrastructure efficiently by transferring projects to the right organization. Whether you're restructuring teams, consolidating resources, or managing multiple environments, **Supabase Project Transfer** makes it effortless to keep your workspace organized! #### Why Transfer Projects? ***Optimize Organization Structure*** Keep development, staging, and production projects properly organized within their respective organizations for better management and billing clarity. ***Team Collaboration*** Move projects to the correct organization where your team members have access, ensuring smooth collaboration and proper permissions. ***Simplified Billing Management*** Consolidate projects under the appropriate organization for streamlined billing and resource allocation. {% stepper %} {% step %} **Verify Your Organization** Ensure you're working within the correct organization context before initiating the transfer.

Confirm you're in the correct organization before starting the transfer on the top left corner

If not, click the organization dropdown and switch to the correct organization {% endstep %} {% step %} **Access Project Settings**

Open Project Settings to access transfer options

* Select the project you want to transfer from your project list * Click on **"Project Settings"** in the left sidebar (look for the gear/cog icon ⚙️) * The Project Settings page will open {% endstep %} {% step %} **Locate Transfer Project Option**

Scroll down to find the Transfer Project section

{% hint style="warning" %} *Project transfer is a significant action. Make sure you have the necessary permissions to transfer projects.* {% endhint %} {% endstep %} {% step %} **Select Target Organization** Choose the destination organization for your project.

Select the target organization for your project transfer

* Source organization name * Project name being transferred * *Review transfer details carefully before proceeding* {% endstep %} {% step %} **Confirm and Complete Transfer** Finalize the project transfer to move it to the new organization.

Click Transfer Project

Transfer complete! Your project is now in the new organization {% endstep %} {% endstepper %} #### What Happens During Transfer? ***Project Ownership Changes*** The project moves to the target organization's ownership, billing, and management structure. ***Access Permissions Update*** Access is now controlled by the target organization's team members and permissions settings. ***Billing Transfer*** All future billing for this project will be charged to the target organization's payment method. ***Project Resources Preserved*** All databases, authentication settings, storage buckets, and configurations remain intact during the transfer. For more information visit theOfficial Supabase Documentation # Local Supabase Setup Exporting Your Supabase Project from eMOBIQ-AI to Your Local Environment *** ### Step 1 — Set Up Supabase Locally Running Supabase locally gives you the same core services that eMOBIQ-AI used remotely:
ServiceDescription
🗄️ PostgresDatabase
👥 AuthUser authentication
📦 StorageFile management
🧰 StudioSupabase’s web dashboard
*** #### 1. Install Docker and the Supabase CLI Follow the official Supabase installation guide: 👉 [Supabase Local Development Setup](https://supabase.com/docs/guides/local-development) *** #### 2. Initialize and Start Your Local Stack From your terminal: ```sh supabase init supabase start ``` This launches all Supabase services in Docker containers. *** #### 3. Get Your Local Environment Info ```sh supabase status -o env ``` You’ll get something like: ```sh API URL: http://127.0.0.1:54321 Database URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres Studio URL: http://127.0.0.1:54323 Publishable key: sb_publishable_XXXXXXXXXXXX ``` You’ll use the API URL and Publishable key when reconnecting your project files. *** ### Step 2 — Export Data from Your Supabase Cloud Project This step copies your eMOBIQ-AI-connected Supabase database to your local instance. #### 1. Use pg\_dump to Export Your Cloud Database Run: ``` pg_dump \ -h db.[YOUR_SUPABASE_PROJECT_REF].supabase.co \ -U postgres \ -d postgres \ -p 6543 \ -Fc \ -f dump.sql ``` Replace \[YOUR\_SUPABASE\_PROJECT\_REF] with your project ID, e.g. uiqtrynalesuctjsemzf. You can find this in the Supabase Dashboard URL:
When prompted for a password, use the Database password from Project Settings → Database → Connection Info in Supabase Cloud. *** ### Step 3 — Import Data into Your Local Supabase Now import that dump into your local instance: ``` psql -h 127.0.0.1 -p 54322 -U postgres -d postgres -f dump.sql ``` Default local password: ``` postgres ``` When done, open Supabase Studio at and confirm your tables and data are visible. *** ### Step 4 — Update Your HTML/JS Project to Point to Local Supabase Your eMOBIQ-AI projects connect to Supabase Cloud using createClient(). Now, replace those cloud credentials with your local instance values. #### ESM (common in modern setups) ``` ``` #### UMD (non-module) ``` ``` *** ### Step 5 — Run Your App Locally Avoid running HTML files directly with file:// — use a lightweight dev server instead: ``` npx serve . ``` Then open . *** ### Step 6 — Sanity Checks
FeatureHow to Test
🗃️ DatabaseCheck tables in Studio → http://127.0.0.1:54323
👥 AuthCreate a test user; view the email in Mailpit
📦 StorageUpload a file via Studio → Storage
⚡ FrontendYour app fetches data from http://127.0.0.1:54321
*** ### Optional — Switching Between Cloud & Local You can toggle environments with a small script helper: ``` const USE_LOCAL = location.hostname === 'localhost' || location.hostname === '127.0.0.1' const SUPABASE_URL = USE_LOCAL ? 'http://127.0.0.1:54321' : 'https://YOUR_PROJECT_REF.supabase.co' const SUPABASE_KEY = USE_LOCAL ? 'sb_publishable_LOCALXXXXXXXXXXXX' : 'eyJhbGciOi...CLOUDXXXXXXXXXXXX' const supabase = createClient(SUPABASE_URL, SUPABASE_KEY) ``` *** ### 🎉 You’re Done! Your Supabase project — originally linked through eMOBIQ-AI — is now fully local. You can edit your schema, test API calls, and build offline without relying on Supabase Cloud or eMOBIQ-AI’s live environment. *** ### Troubleshooting
IssuePossible Fix
supabase: command not foundReinstall the CLI with npm install -g supabase or brew install supabase/tap/supabase
pg_dump: could not translate host nameCheck your network or ensure you included port 6543
Can’t connect from browserServe files via npx serve ., not file://
Wrong portDatabase: 54322, API: 54321, Studio: 54323
Missing tablesEnsure you imported your dump into the correct port (54322)
*** ### Enterprise Deployment Support If you’d like to deploy your Supabase environment to a virtual machine (VM) or your own production server, we can help you set that up securely. For enterprise deployment assistance, please contact our team **here**. Our enterprise support can guide you through: * Deploying Supabase on your own infrastructure (AWS, Azure, GCP, etc.) * Setting up backups, SSL, and domain routing * Scaling from local to production-grade environments *** ### References * [Supabase Local Development Docs](https://supabase.com/docs/guides/local-development) * [Supabase CLI Guide](https://supabase.com/docs/guides/cli) * [PostgreSQL pg\_dump Reference](https://www.postgresql.org/docs/current/app-pgdump.html) # VM Supabase Deployment Deploying Your Supabase Instance on a Virtual Machine *** ### What You’ll Get Once deployed, your VM will run a full Supabase stack locally via Docker. | Service | Purpose | Default Port | | ------------------ | -------------------- | ------------ | | Postgres | Database | 5432 | | Kong Gateway (API) | REST + Auth endpoint | 8000 | | Studio | Web UI dashboard | 3000 | | Storage | File uploads | 5000 | *** ### Step 1 — Prepare Your VM Environment Recommended Specs * Ubuntu 22.04 LTS (or Debian 12) * 2 vCPUs, 2 GB RAM minimum * 10 GB+ disk * Docker + Docker Compose installed Install dependencies: ``` sudo apt update sudo apt install -y docker.io docker-compose git sudo systemctl enable --now docker ``` *** ### Step 2 — Clone the Supabase Docker Setup ``` git clone https://github.com/supabase/supabase cd supabase/docker ``` This directory contains Docker Compose files for all Supabase services. *** ### Step 3 — Configure Your Environment Copy and edit the example environment file: ``` cp .env.example .env ``` Open .env and minimally edit: ``` SUPABASE_URL=http:// SUPABASE_PUBLIC_URL=http:// POSTGRES_PASSWORD=postgres JWT_SECRET=$(openssl rand -base64 48) ANON_KEY=$(openssl rand -base64 32) SERVICE_ROLE_KEY=$(openssl rand -base64 32) ``` > Replace \ with your VM’s public IP or domain name (e.g. or ). *** ### Step 4 — Start the Stack Launch Supabase services: ``` docker compose up -d ``` Check that all services are healthy: ``` docker compose ps ``` If successful, you’ll see containers like: ``` supabase-kong (API) → 0.0.0.0:8000 supabase-studio (Dashboard) → 3000/tcp supabase-db (Postgres) → 5432/tcp ``` *** ### Step 5 — Import Your Existing Data If you previously exported your Supabase Cloud project to a dump file (supabase\_backup.sql): ``` # copy the dump to your VM scp supabase_backup.sql user@:~ # restore inside the VM ssh user@ docker exec -i supabase-db psql -U postgres -d postgres < supabase_backup.sql ``` Your local database now contains all tables and data from your old cloud project. *** ### Step 6 — Connect Your Frontend In your web project (HTML/JS): ``` const supabase = window.supabase.createClient( 'http://:8000', // your VM’s Supabase API URL 'YOUR_ANON_KEY' // from the VM’s .env file ) ``` ✅ Your frontend now communicates directly with your VM’s Supabase instance *** ### Step 7 — Verify via Supabase Studio Access the dashboard at: ``` http://:3000 ``` Log in using your local keys from .env. You’ll see your tables, users, and storage buckets — just like in Supabase Cloud. *** ### Enterprise Deployment Support If you’d like to deploy your Supabase environment to a virtual machine (VM) or your own production server, we can help you set that up securely. For enterprise deployment assistance, please contact our team **here**: Our enterprise support can guide you through: * Deploying Supabase on your own infrastructure (AWS, Azure, GCP, etc.) * Setting up backups, SSL, and domain routing * Scaling from local to production-grade environments *** ### References * [Supabase Self-Hosting Guide](https://supabase.com/docs/guides/self-hosting) # Debug Agent A step-by-step walkthrough on how to effectively use Debug Agent for modifying, customizing & debugging apps using natural language prompts. *** ### What is Debug Ai Agent? It is an intelligent assistant capable of interpreting natural language instructions — commonly referred to as prompts — to perform a wide range of tasks. These include not only debugging existing functionality but also enhancing and extending your application through code generation and feature implementation. By leveraging this tool, developers can streamline their workflow by describing what they want in plain language, allowing the agent to translate those intentions into functional code, html page generation or UI components. This guide will walk you through best practices for interacting with the Debug Agent, ensuring that your prompts are clear, effective, and aligned with your development goals. *** ### Models Available
{% hint style="info" %} *Keying in prompts into the Debug Agent will edit html or CSS code, credits will be consumed with each use, with the performance model costing more. Learn more about the costs in our* [*Debug Pricing Guide*](/emobiq-ai/readme/how-pricing-works-in-emobiq-ai/debug-pricing#understanding-how-the-debug-agent-works) {% endhint %} *** ### How It Works The debug agent operates in a few key steps: {% stepper %} {% step %} **Understand** Parses your prompt and extracts functional and visual requirements {% endstep %} {% step %} **Generate** Creates or modifies HTML (Website Code) and CSS (Website Design) files based on your prompt {% endstep %} {% step %} **Validate** Ensures APIs and logic align with available functions {% endstep %} {% step %} **Debug** Identifies and fixes issues such as broken navigation, incorrect API calls, or missing components {% endstep %} {% endstepper %} *** ### Best Practices for Prompting #### 1) Avoid Being Generic When describing issues or requesting changes, being generic can lead to misunderstandings or incorrect implementations. The Debug AI Agent relies on precise instructions to generate accurate code or resolve issues effectively. By clearly specifying what you see and what you expect, you ensure that the agent understands your requirements correctly. **Example: Avoiding Generics vs. Being Specific** | Example | Description | | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | ❌ "Fix this page." | This is too vague. The agent doesn’t know which page you’re referring to or what needs fixing. | | ✅ "Fix the order\_list.html page where clicking an order redirects to a non-existent page." | This is specific. You’ve identified the exact page (order\_list.html) and described the issue (clicking an order leads to a broken link). | #### 2) Be Specific Importance of Precision in HTML Page References To ensure the Debug AI Agent understands exactly which part of your application needs attention, always specify the `.html` file name. This helps avoid confusion and ensures the debug agent targets the correct component. How to Specify Pages * Use Exact File Names : Include the .html extension to identify the specific page * Provide Context : Describe the functionality or behaviour associated with the page
Cover image
Right click on the file/s you would like to refer to/files/gpMFSdoZkEarNKegVhL1
Use the / Function in debug agent to reference files quickly. Typing after the / filters files quickly as well/files/klNIv5Qwxb62CDHNw4Wz
{% hint style="info" %} You can also reference API endpoints (`#`) and plugin functions (`@`) directly in your prompt. See [Adding Context](/emobiq-ai/readme/debug-agent/adding-context) for the full guide. {% endhint %} 
Create a return cart button on the header of the return_selection.html page which will
redirect the user to a new create_return.html page. The create_return.html page should
display the customer name and the list of items selected for return (stored in 
sessionStorage as returnItems). There should be a "Confirm Return" button upon 
clicking it should trigger two API calls to POST the return.
Additional Details to Include * File Names : Mention relevant files such as ext\_api.txt, requirements.txt, or request.js * Line Numbers : If applicable, specify line numbers where the issue occurs highlight specific lines and click "Ask AI"
* Error Messages : Provide any error messages or logs related to the problem * Expected Behaviour : Clearly describe what should happen versus what is currently happening 
In the return_list.html page, the returns are not being displayed. Instead, I'm seeing 
the following message on the page: Failed to load return list. Using sample data is 
not allowed. Please edit the code so that it works correctly by fetching data 
exclusively from the Business Central API.
#### 3) API Calls **Ensuring Correct Function Paths**\ One common pitfall is that the Debug Agent might misinterpret or incorrectly reference function names or paths when generating code. To prevent errors, always verify that the generated code aligns with your intended API calls and function references. **Common Issues** * **Function Name Mismatches:** The agent may use a different function name than what you specified * **Incorrect Path References:** The generated code might not match the actual function path defined in your application **Best Practices for Validation** 1. Cross-Reference with Documentation: * Compare the generated code with your function list or Word document to ensure accuracy * Use tools like search functions to locate the correct implementation 2. Check Generated Code: * Review the HTML or JavaScript code produced by the agent * Ensure that function calls, API endpoints, and parameters match your specifications | Example | Image | | -------------------------------------------------- | ------------------------------------------------------------------- | | Function List | | | Search for the function in the generated html code | | By following these best practices, you can significantly improve the effectiveness of your interactions with the Debug AI Agent, leading to more accurate and efficient outcomes. #### 4) Common errors Below are some common errors you might encounter while working with the app, along with guidance on how to resolve them. {% tabs %} {% tab title="Authentication Token Expired (Error 401)" %}
Description\ The authentication token has expired, which can cause issues when making API calls or accessing protected resources. Solution\ Refresh the authentication token by logging out and logging back in. If the issue persists, ensure that the token refresh mechanism is functioning correctly. {% endtab %} {% tab title="Preview Error" %}
Description\ The AI has detected an error during the preview process, which may affect the functionality or appearance of your application.​ Solution\ Click the `Ask AI` button to prompt the Debug agent to analyse and fix the error. This will help identify and resolve any underlying issues in real-time. {% endtab %} {% endtabs %} #### 5) Sample Prompts Below are some sample prompts you can use as references to help eMOBIQ AI modify or fix your app. These examples illustrate how to structure your requests effectively, ensuring clear communication with the Debug agent. {% code title="Sample Prompt 1: Editing the functionality of a button" %} ``` In the index.html page when i click new entry i want to create a new entry, it currently allows me to edit the entry instead. ``` {% endcode %} *** {% code title="Sample Prompt 2: Fixing unlinked buttons & Creating a new page" %} ``` Clicking on any order in the order_list.html page redirects to a non-existent page. Create the order_details.html page with these requirements:​ Detail page need to display by selecting order: ​ Detail page includes:​ In Header: Order number, Customer Code & Name, Order Date ​ In Detail: Item code & name, Unit price, Quantity with uom In Footer : Sub-total, GST, Total​ ``` {% endcode %} *** {% code title="Sample Prompt 3: Fixing Multiple pages at once" %} ``` Can you change all the back buttons in all the pages to a home icon instead and redirect everything to index.html ``` {% endcode %} *** {% code title="Sample Prompt 4: Deleting sections of the app" %} ``` In the index.html, remove the recent entries section ``` {% endcode %} *** {% code title="Sample Prompt 5: Fixing minor CSS errors" %} ``` I cant see the bottom of my all my html pages as the task bar is blocking it, fix this issue ``` {% endcode %} [^1]: By specifying the html page, it helps the AI know which page you need help editing [^2]: Let AI know what you are seeing and the expected outcome from the page or function # Adding Context The Debug Agent is designed to understand your app and select the most relevant files automatically. Adding context is an optional but powerful way to be more deliberate by pointing the AI to exactly the files, API endpoints, or plugin functions you have in mind when you already know what you need. There are **three types of context** you can add, each with a quick keyboard shortcut and a point-and-click alternative: | What you want to reference | Shortcut | UI method | | -------------------------- | -------- | -------------------------------------- | | A file in your project | `/` | Right-click file → **Refer this file** | | An API endpoint | `#` | External API icon → **Reference** | | A plugin function | `@` | Plugin icon → **Reference** | *** ## 1) Referencing Files — `/` Use `/` to point the Debug Agent to a specific file in your project. This is useful when you want to be precise about which page or script should be edited. **How to use**
Cover image
Type / in the prompt box. A file list appears, then start typing to filter and select the file you want to reference./files/bZnKJEH8tPEcvkj8jgHb
Prefer clicking? Right-click any file in the project directory and select Refer this file. It gets added to your prompt automatically./files/NGeoggqheoQT01vaQClo
*** ## 2) Referencing API Endpoints — `#` Use `#` to reference a specific API endpoint from your External API integrations. This is helpful when you want the AI to use a particular endpoint for a feature you're building. **How to use**
Cover image
Type # in the prompt box. A list of your registered API endpoints appears and select the one you need./files/GUZ1erpVrWbFsN2dA8zC
Click the External API icon in the debug agent toolbar. Click Reference next to individual endpoints, or use Reference all if you want to include everything./files/Ge82xQiT3LKhy44V6AAc
{% hint style="info" %} Not sure which endpoint to pick? Use **Reference all** and the AI will determine which ones are relevant to your request. {% endhint %} *** ## 3) Referencing Plugins — `@` Use `@` to reference a specific plugin function. This is useful when you want to call a particular function from a plugin already added to your project. **How to use**
Cover image
Type @ in the prompt box. A list of available plugin functions appears then select the one you want the AI to use./files/44YfD3nwM4KWYeyk2NjM
Click the Plugin icon at the top right of the preview panel. Click Reference on individual functions, or Reference all to include everything in one go./files/UZMnzE68gR7YMHUPKLTP
*** ## Putting it all together You can combine all three in a single prompt when you want to be specific about the file, endpoint, and plugin function involved. {% code title="Example: A prompt using all three context types" %} ``` On the /camera.html page, add a "Take Photo" button that calls @Camera Plugin - takePicture. After the photo is taken, upload it using #POST /uploads and display a success message. ``` {% endcode %} # Tips & Tricks ## External API * **Organize Your APIs**: Group related APIs under meaningful names and descriptions to aid maintainability and troubleshooting * **Secure Endpoints**: Always validate and sanitize input data before sending it to external APIs to prevent injection attacks * **Monitor Performance**: Regularly review API response times and error logs to ensure optimal performance * **Leverage Event Handlers**: Use success and error event handlers to notify users or trigger follow-up actions based on API outcomes * **Use Version Control**: When modifying existing APIs, consider creating duplicates or versions to avoid breaking existing integrations * **Provide Clear API & Auth Instructions**: Defining detailed instructions for how external APIs should be used—including authentication methods—helps the AI make faster, more accurate decisions. This reduces unnecessary request retries, cuts down on debugging, and lowers operational costs by minimizing token usage and compute time {% hint style="info" %} ***Tip**: The more you Instructions you provide, the less the AI guesses — use detailed instructions to unlock smarter automation* {% endhint %} *** ## Inspect Element ### Using Inspect Element in eMOBIQ AI for Generated Apps When working with apps generated by **eMOBIQ AI** , you can use your browser’s built-in **Inspect Element** tool. Even though your app was generated by eMOBIQ AI, it still runs in a browser like any other web application. This will allow you to: * Preview visual changes (colors, fonts, layout) * Debug UI issues * Understand how components are structured and styled This is especially useful during development or when customizing your app’s appearance and behavior. *** ### How to Open Inspect Element
Right-click + Inspect * `Right-click` anywhere inside your running app * Click **`Inspect`** at the bottom of the context menu {% hint style="info" %} *Tip: You can also press `F12` or `Ctrl + Shift + I` in many browsers* {% endhint %} *** ### Key Tabs in Inspect Element Once Inspect Element opens, you’ll see several tabs. Here is an overview of the tabs you may want to pay closer attention to and their use cases with eMOBIQ AI {% tabs %} {% tab title="Elements" %} 1. **Viewing Component Structure** Use the **Elements tab** to explore how your components (like buttons, tables, inputs) are structured in HTML. This helps understand layout issues or styling conflicts 2. **Testing Visual Changes** You can temporarily change: * Colors * Fonts * Sizes * Text content Just double-click the element in the **Elements tab** , make your edits, and see them instantly applied in the browser
{% hint style="warning" %} *Note: These changes are temporary and only visible to you — they won’t affect the actual app* {% endhint %} {% endtab %} {% tab title="Console" %} **Debugging Errors** If something breaks in your app, check the **Console tab** for error messages. Red lines usually indicate: * Failed API calls * Missing variables * JavaScript errors Use this info to trace back to your eMOBIQ AI logic or component configuration
{% endtab %} {% tab title="Network" %} **Check API Responses** In the **Network tab** , filter by `XHR` or `Fetch` to find API calls made by your app. Click a request to see: * The URL it’s calling * The request body * The actual response returned This is helpful if your app isn’t showing the expected data
{% endtab %} {% tab title="Sources" %} **Debug JavaScript and view loaded files** Since eMOBIQ AI auto-generates apps with integrated backend logic and API connections, the **Sources tab** becomes essential when: * Validating that your API responses are correctly structured * Seeing how variables and components are bound to dynamic data * Debugging custom JavaScript/Python logic steps used in your workflows * Ensuring that events like `onSuccess` or `onError` are firing as expected
{% endtab %} {% endtabs %} *** ### Tips for Using Inspect Element in eMOBIQ AI Apps **Search for Components** : Press `Ctrl + F` or `Cmd + F` in the Elements tab and search for component names or variable references like `{{variableName}}`. **Test Mobile View** : Click the phone/tablet icon in DevTools to simulate mobile devices and ensure your app looks good on all screen sizes. **Check Performance** : Use the **Performance tab** to record load times and identify slow components or heavy API calls. *** While eMOBIQ AI generates your app automatically, being able to inspect and debug directly in the browser gives you more control and insight into how everything works behind the scenes. Whether you're tweaking the look of a button or tracking down why an API isn’t returning data, **Inspect Element is your go-to tool** for quick feedback and problem-solving. # Limitations While eMOBIQ AI is designed to streamline app development with powerful AI capabilities, it's important to be aware of certain limitations to ensure optimal usage and avoid potential issues. Understanding the current limitations of eMOBIQ AI helps ensure smooth development and sets realistic expectations. Here are some key limitations to note. ### 1) Token Usage Constraint Each interaction with the Debug Agent consumes tokens, which are used to process prompts and generate responses. The number of tokens consumed depends on the complexity and length of the request. As a result, larger or more intricate tasks may use a significant portion of your available token quota depending on the number of users active on the platform. To manage this effectively and prevent a long waiting time, it is recommended to break down complex tasks into smaller and focused prompts. ### 2) Not a Fully Automated App Builder While eMOBIQ AI significantly accelerates the app creation process, it is not a fully autonomous solution. Some level of human oversight and refinement is often required, especially when dealing with complex logic, custom integrations, or specific design requirements. In many cases, multiple iterations and adjustments may be necessary to achieve the desired outcome. You can refer to our [Debug Agent Prompting Guide](/emobiq-ai/readme/debug-agent) for more information. ### 3) Fact-Checking Required Like any AI system, eMOBIQ AI is not immune to errors. It may occasionally produce incorrect or suboptimal code, misinterpret prompts, or fail to align with expected behavior. Visual components may not always render exactly as intended, and API references might contain inaccuracies. Users should always verify and test the output before considering it final. Fact-checking and validation are essential steps to ensure reliability and correctness. # Support
## How to Submit a Support Request Follow these simple steps to get in touch with our support team and submit a request for assistance ### Step 1: Access the Support Section On the eMOBIQ AI main page, locate and click the `Support` tab at the top of the screen. This will open the support dashboard ### Step 2: Start a New Request Click on the `Get Support` button. A pop-up form will appear, allowing you to describe your issue clearly.
### Step 3: Fill Out the Form Complete the form with the following details: * Your contact information (name, email, etc.) * A clear description of the issue or question * Optional: Attach a screenshot or video to help illustrate the problem Once the form is completed, click `Create` to submit your support ticket {% hint style="info" %} *The more specific you are in your description, the faster we may assist you* :smile: {% endhint %} ### Step 4: Track Your Ticket Your ticket has now been created! You can view its progress and any responses from our team directly on the support page. We’ll work quickly to resolve your issue and keep you updated along the way. *** ### Updating Your Ticket (Optional) If you need to provide additional information after submitting your ticket: 1. Click on your ticket in the support list 2. Share updates or clarify your request 3. Click `Send` to notify the support team
*** ### Need More Help? {% embed url="" %} You can watch our Support Walkthrough Video for a visual step-by-step guide above or on [OrangeKloud's official YouTube Channel](https://www.youtube.com/@orangekloudinc.6099/featured). We’re always here to help — don’t hesitate to reach out! # Getting Started Welcome to eMOBIQ, the platform that empowers you to create and customize mobile apps without writing a single line of code. This quick start guide seeks to provide a condensed understanding of the workflow of a typical app building process in eMOBIQ, and also highlight advanced features you can use to work more efficiently and extend the capabilities of your app. Follow these steps to get started: ## 1. Create Pages Begin by creating the foundation of your app: pages. These are the screens that users will interact with. To create a page: * Log in to your eMOBIQ account. * Navigate to the dashboard. * Click on "Create New Page". * Give your page an appropriate name. ## 2. UI/UX Design Now it's time to design your pages' user interfaces and user experiences. Note that you can also create pages with a page wizard. In this section, we will go with the manual approach for more flexibility. You have two options: ### 2.1 Use Templates eMOBIQ provides a library of pre-designed templates for various app types. To use a template: * Select the page you created. * Click on the template button. * Browse and select a template that fits your app's concept. Drag and drop onto the page editor to apply the template. * Customize the template by adding your content and design elements. ### 2.2 Custom Design If you prefer a more customized approach, you can design your UI/UX from scratch: * Select the page you created. * Use the intuitive drag-and-drop interface to add components like buttons, text fields, images, and more to the page interface. * Configure each component's appearance and behavior with properties and event-triggered actions. ## 3. Component Logic Enhance your app's functionality by assigning logic blocks to component events. This allows you to define what happens when a user interacts with a component. To assign component logic: * Select the component you want to add logic to. * Select the events like button clicks or text input. * Set actions, such as navigation, data retrieval, or data submission. Note that you can also create logic with a function wizard. ## 4. Services If your app requires integration with external systems, eMOBIQ simplifies the process. To connect your app to external systems: * Access the "Services" section in the dashboard. * Choose the service you want to integrate (e.g., databases, APIs). * Follow the provided setup instructions in the Services documentation to establish connections seamlessly. ## 5. Global Configuration Configure your app's global settings to ensure a consistent user experience. This includes: * Setting a default page that users see when they open the app. * Configuring build settings with your ios and android development credentials. * Managing app-wide configurations that apply to all pages, such as global css properties and plugins. ## 6. Language Translation If your app targets a multilingual audience, eMOBIQ simplifies language translation: * Access the "Language" section. * Create mappings for different languages. * Translate your app's text elements, making your app accessible to a global audience. ## 7. Build the App Once you've designed and configured your app, it's time to build it: * Click on the "Build" button. * Select the target platform (iOS, Android). * eMOBIQ will compile your app, and you'll receive a download link or QR code to test it on your device. ## 8. Advanced Features Take your app to the next level with these advanced features: ### 8.1 Using Page and Function Wizards To streamline interactive app development, eMOBIQ offers Page and Function Wizards. These tools help you create complex app functionalities with ease: #### 8.1.1 Page Wizards Page Wizards simplify the creation of dynamic and interactive pages. Here's how to use them: * Navigate to the "Page Wizard" in the dashboard. * Choose an option that fits your app's needs (e.g., Generate Page, Data Listing). * Follow the wizard's step-by-step instructions to configure the page's structure and behavior. #### 8.1.2 Function Wizards Function Wizards enable you to build advanced app logic without coding. Here's how they work: * Access the "Function Wizards" in the dashboard. * Select an option tailored to your requirements (e.g., Login, Process Data, Calculate Data). * Follow the wizard's prompts to define the logic and conditions for your app's functions. ### 8.2 Using Plugins to Import Custom Components and Functions eMOBIQ allows you to import your custom components and functions through plugins. This advanced feature empowers you to extend your app's capabilities: #### 8.2.1 Plugin Integration * Navigate to the "Plugins" section. * Browse the available plugins or upload your custom ones via global configurations. * Integrate plugins seamlessly into your app's UI/UX design and logic. #### 8.2.2 Custom Component Creation * You can use eMOBIQ Service Manager (ESM) to import your own custom plugins. Do visit our [ESM page](https://emsm.emobiq.com/) for more information. * Leverage plugins to create and import custom components like advanced charts, custom form elements, or specialized widgets. * Customize these components to align with your app's unique requirements. ### 8.3 Use of Global Functions and UI/UX Snippets for Modularity and Reusability To promote modularity and reusability in your app development process, eMOBIQ offers Global Functions and UI/UX Snippets: #### 8.3.1 Global Functions * Define global functions that can be reused across multiple pages and components. * Access the "Global Functions" section to create, edit, and manage these functions. * Implement them in component logic to maintain consistency and reduce redundancy. #### 8.3.2 UI/UX Snippets * Save frequently used UI/UX design elements, such as navigation bars, headers, or custom buttons, as snippets. * Access the "Snippets" library to organize and reuse these snippets using the Snippet component. * Enhance app consistency and design efficiency by applying snippets to multiple pages. Congratulations! You've just created your app using eMOBIQ's no-code platform. Start testing and refining your app, and when you're ready, you can publish it to the app stores for the world to enjoy. Happy app building! # Platform Interface Reference ## Introduction Welcome to the eMOBIQ Platform Interface User Guide. This document provides comprehensive information about the eMOBIQ Platform Interface, a user-friendly environment that allows you to manage various aspects of your project such as pages, snippets, layers, screens, and global configurations. This guide is divided into several sections, each dedicated to a specific part of the interface. ## Interface Overview The eMOBIQ Platform Interface is divided into several sections: * **Home**: Manage your project pages, snippets, layers, screens, and global configurations. * **Global Configuration**: Manage your application's global settings. * **Language**: Define translations from English to your preferred language. * **Publish**: Publish your project on the eMOBIQ e-store. * **Lock**: Protect your published application from unauthorized access. * **Services**: Configure your application to connect with external systems. * **Database**: Access a visual interface to external databases. ## Detailed Sections ## eMOBIQ Home ### Page The Page section enables users to manage project pages by adding, duplicating, and deleting them. The selected page is displayed on the interface for easy editing. Users can utilize the Layer section to edit different components of the page. ### Snippets The Snippets section enables users to manage snippets in a project by adding, duplicating, and deleting them. The selected snippet is displayed on the interface for easy editing. Users can utilize the Layer section to edit different components of the snippet. ### Layer The Layer section allows users to manage components within a snippet or page. Users can add, duplicate, and delete components. Components are presented hierarchically, displaying parent-child relationships. Selected components are focused on the interface and editable through the properties and actions tab. ### Screen The Screen section enables users to manage properties and actions of selected components. Users can customize styling properties and behavior under the properties tab, and add event triggers for interactive functionality in the actions tab. #### Properties The Properties section enables users to manage and configure the properties of a selected component. Within this section, users have the ability to customize all styling aspects and define default behavioral properties for the component. Additionally, users can tailor the styling properties to display differently on various types of devices. **Styling Properties in 3 View Modes:** * **Default Mode:** Base styling properties applied to all supported devices. * **Mobile Mode:** Styling properties specific to mobile devices. * **Tablet Mode:** Styling properties specific to tablet devices. #### Action The Action section allows users to add event-driven functionality to components. Here, users configure the app logic and utilize the visual logic interface to build the component logic. By selecting the desired event trigger type and dragging actions from the action list, users can easily define the component's event logic. The section also includes an action inspector, enabling users to customize each action within the visual logic interface. This includes defining parameters to be passed for precise configuration. **Inspector** The Inspector allows users to configure selected actions in the visual logic interface. These configurations serve as inputs for each action, which then produces the corresponding outputs. Actions resemble traditional programming functions and their behavior is specified in the action reference. **Parent (or Item) - Visual Logic Interface** Description for the parent section... **Event - Visual Logic Interface** This selector enables users to select and configure events for the component. Multiple events with distinct behaviors can be assigned to a component. For detailed instructions on physically triggering each event, refer to the event reference documentation. ### Themes Description for the themes section... ### Global This section enables users to create and manage custom global functions within the project. Functions can be created and modified using the visual logic interface, and are readily available within the list of actions for easy integration. #### Global Functions In this interface, users can choose a global function from a list to modify. The selected function's implementation is displayed on the visual logic interface for easy editing. ### Editor interface icons #### Add Page (icon) Allows user to conveniently create a page in the project. #### Page Wizard (icon) The Page Wizard initiates the page wizard interface for generating new pages. It offers a convenient and efficient method to create pages with template UIs tailored to specified requirements. #### Function Wizard (icon) The Function Wizard initiates the function wizard interface for adding event-driven logic to a selected component. It offers a convenient and efficient method to construct commonly used logic flow based on specified requirements. The generated logic for the component can be viewed in the visual logic interface. #### Media Library (icon) The Media Library feature enables users to upload and manage media resources for use within the project. These media files are stored alongside the compiled app file as static resources. #### Copy (icon) Provides a quick way to copy selected components. #### Paste (icon) Provides a quick way to paste copied components. Ensure that the target location is selected in the page layer before pasting. #### Delete (icon) Provides a quick way to delete the selected components or pages. #### Page layout size and orientation (icon) Users can change the size and orientation of the editor interface to visualize the project's appearance on different screen dimensions. This is useful for visualising how the project will look like when running on devices with different screen sizes. *** ## Global Configuration The Global Configuration component is a powerful tool within our app development platform that allows you to manage the global settings of your application. It serves as a centralized location where you can define and modify various configuration options that impact the behavior and appearance of your app. With the Global Configuration component, you have the ability to customize the following settings. ### General * **Package Name**: The name of the application which needs to be unique. This name can be used to set up iOS developer configuration. * **Application Default Page**: Defines the first landing page when the application is opened or running. * **Enable Auto Update**: * **On**: Asks for automatic update when opening the application after upgrading the app version. * **Off**: Does not prompt for update and requires manual update. ### Android ### iOS To set up building iOS apps: * **iOS Code Sign**: Common name of your Apple Developer Certificate. * **iOS Team ID**: User ID of your Apple Developer Certificate. * **iOS Provision File**: Upload the file directory of your Apple profile for the application. * **iOS Private Key File**: Upload the file directory of your Apple Developer Certificate File. ### Third Party This is used to set up the following: * Google API Key (if using Google Service in the application) * Facebook App ID (if using Facebook Service in the application) ### Properties To set up the default CSS properties of the application. All screens within the application will apply this global CSS. * **Dialog Theme**: Default background color of the dialog box. * **Background Image**: Default background image of the application page. * **Background Color**: Default background color of the application page. * **Background Position**: Default position of the background image. * **Background Size**: Default size of the background image. ### Plugins This feature enables users to manage external plugins for integration with the project. Users can create plugins externally and import them through this interface for seamless integration. *** ## Language This functionality allows users to define a list of translations from English to their preferred language. These translations can be utilized with language actions in the visual logic interface to modify the displayed language within specific components. *** ## Publish This feature enables users to publish their project on the eMOBIQ e-store. Publishing can only be performed after the project has been built. *** ## Lock This feature allows users to protect their published application from unauthorized access. Users can set a password for their application, ensuring authentication is required before others can download the application from the e-store. *** ## Services The Services section provides configuration options to connect your application with various external systems (data sources) seamlessly. These systems include ERP, Payment Gateway, Push Notification, and SQL Lite for local storage. For a full list of services, you may refer to the \[Services Reference] ### Available Connectors for ERPs: * NAV Connector * SAP B1 Connector * Accumatica Connector * REST Connector * SOAP Connector ### Available Connector for Push Notification: * Firebase Connector ### Available Connectors for Payment Gateway: * MC Payment Connector * ENets Payment Connector * 2C2P Payment Connector * PayPal Connector *** ## Database This feature provides a visual interface to external databases. Currently, eMOBIQ supports staging databases hosted on eMOBIQ servers and AWS DynamoDB for visual interfacing. Please note that these databases are considered external data sources and need to be configured through the Services layer before they can be utilized. Additional Disclaimer: The eMOBIQ staging database is designed for lightweight testing purposes during app development and should not be relied upon for production-level features. We do not assume responsibility for any issues arising from the use of the eMOBIQ staging database. ## Build The Build feature enables you to generate mobile app versions of your project based on the selected options in the build interface. This includes specifying the build mode (Debug/Development/Release), versioning, and cross-platform build options such as iOS and Android. Before using the iOS and Android build options, make sure to configure the Android and iOS settings within the Global Configuration section. ## Download The download button allows you to download the application after it has been built. ## Tutorial Description for the tutorial section... ## Help The Help section offers a comprehensive reference guide for available actions that can be utilized within the visual logic interface. It serves as a valuable resource for understanding and implementing various actions in your project. ## Save Allows you to save the current state of your project. It is important that you remember to save your project to ensure no progress is lost. ## Preview Preview enables users to visually preview their projects before proceeding with the build process. This valuable feature allows users to assess their app's layout and behavior during the development phase. Previewing can be done in three ways: Scan the QR code and preview on your own device. Directly preview on the editor. Open a www3 page to preview. This functionality facilitates a seamless and efficient development process by providing users with immediate visual feedback on their app's appearance and functionality. # Page Rendering Behaviour ## Overview Page rendering in eMOBIQ refers to the process of organising and displaying the components of mobile app pages to users. Pages in eMOBIQ may consist of various components, including buttons, text boxes, images, and more. ## Hierarchy of Components in eMOBIQ Each page within eMOBIQ's app-building framework contains a hierarchy of components that defines their arrangement and relationship. Components in eMOBIQ can be visualised as individual elements or building blocks that contribute to the overall structure of the page. The hierarchy represents the organization of these components in a structured manner. ## Depth-First Rendering in eMOBIQ eMOBIQ adopts a depth-first rendering approach to ensure an orderly display of components in pages. The rendering process begins with the top-level component and systematically progresses through the hierarchy, rendering each component encountered along the way. To provide a visual representation of the rendering sequence, take a look at the example image below. This image showcases a simplified page hierarchy in eMOBIQ's layer section: ![](/files/WdZSMtRKeVBu602uqkSU) In the image, you can see the expanded hierarchy of components within the layer section. The render sequence in this example will be: 1. Page: pgSplash 2. Panel: pnlMain 3. Panel: pnlMainBody 4. Panel: pnlMainCell 5. Image: imgLogo 6. Panel: pnlFooter 7. Label: lblLicensed 8. Panel: pnlEMobiq 9. Image: img\_logo\_emobiq The rendering process follows a top-to-bottom sequence, where the top-level component is rendered first, followed by its child components, and so on, until reaching the bottom-level components. This sequence ensures that each component is rendered in the correct order, resulting in the desired visual arrangement of the page. ## Analogy Imagine you have a set of nesting dolls, where each doll contains smaller dolls inside. To explore the dolls using a depth-first approach, you start with the outermost doll and open it to reveal the next doll inside. You continue this process, recursively opening each doll until you reach the innermost one. Similarly, in eMOBIQ's depth-first rendering, the top-level component is like the outermost doll. It gets rendered first, and then the rendering engine dives deeper into the hierarchy, rendering each child component encountered along the way. This recursive process continues until all components in the hierarchy have been rendered. ## Conclusion Understanding the depth-first rendering approach in eMOBIQ is essential for building well-organized mobile applications. By envisioning the nesting doll analogy, where components are explored recursively, users can grasp the sequential and systematic nature of the rendering process. This knowledge empowers individuals to design cohesive and visually appealing mobile apps using the eMOBIQ no-code platform. # Ui Components # Basic # Frame The 'Web Frame' component is used to embed and display web content within an interface. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | -------------- | ---------- | ----------------------------------------------------------------------- | | Name | frame1, frame2 | string | Specifies the name or identifier of the web frame component. | | Hide On Print | True, False | boolean | If set to true, hides the web frame component when the page is printed. | | Style Class | frame-style | string | Applies a custom style class to the web frame component. | | URL | web\_url | string | Specifies the URL or web address to be displayed within the frame. | ## Related Actions N/A ## Example Uses N/A # Image The 'Image' component is used to display images within an interface. It allows dynamic navigation and changing of resource files based on the specified name. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | imgPhoto, img | string | Specifies the name or identifier of the image component. | | URL | App/icons/logo.png | string | Specifies the destination of the resource file for the image. | | External URL | | string | Specifies the external URL of the image to be displayed. | | Hide On Print | True, False | boolean | If set to true, hides the image component when the page is printed. | | Style Class | image-class-name | string | Applies a custom style class to the image component. | | ID Prefix | Cart\_, Stock\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | | Zoom | true | boolean | If set to true, enables zoom functionality for the image. | ## Related Actions N/A ## Example Uses N/A # Label The 'label' component is used to display descriptive text in different contexts. It provides a way to visually represent textual information within an interface. ## Icon ![Label Icon](/files/wq17aMitAAkZ1jPBbh6X) ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ---------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | lblName | string | Specifies the name or identifier of the label component. | | Caption | Full Name | string | Displays a descriptive text for the label, providing meaningful context. | | Field | Name | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The value contained within this field of the data source will be assigned to the 'Caption' property of this component. | | Hide On Print | True, False | boolean | If set to true, hides the label component when the page is printed. | | Style Class | image-class-name | string | Applies a custom style class to the image component. | | ID Prefix | Cart\_, Stock\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Panel The 'Panel' component is used to create a container that groups and organizes other components within an interface. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ---------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | panel1, panel2 | string | Specifies the name or identifier of the panel component. | | Hide On Print | True, False | boolean | If set to true, hides the panel component when the page is printed. | | Style Class | panel-class-name | string | Applies a custom style class to the panel component. | | ID Prefix | Panel\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Streamcamera The 'Stream Camera' component is used to stream live camera feeds within an interface. ## Properties | Property | Value Sample | Value Type | Description | | ---------- | ---------------- | ---------- | ------------------------------------------------------------------ | | Name | camera1, camera2 | string | Specifies the name or identifier of the stream camera component. | | Output URL | stream\_url | string | Specifies the URL or endpoint for the camera's live stream output. | ## Related Actions N/A ## Example Uses N/A # Streamplayer The 'Stream Player' component is used to play and display streaming media within an interface. ## Properties | Property | Value Sample | Value Type | Description | | --------- | ---------------- | ---------- | ---------------------------------------------------------------- | | Name | player1, player2 | string | Specifies the name or identifier of the stream player component. | | Input URL | stream\_url | string | Specifies the URL or endpoint for the input stream to be played. | ## Related Actions N/A ## Example Uses N/A # Video The 'Video' component is used to embed and display videos within an interface. ## Properties | Property | Value Sample | Value Type | Description | | -------- | ------------------------------------------- | ---------- | -------------------------------------------------------- | | Name | video1, video2 | string | Specifies the name or identifier of the video component. | | Source | | string | Specifies the source URL of the video to be displayed. | ## Related Actions N/A ## Example Uses N/A # Forms # Button The 'Button' component is used to create interactive buttons that trigger actions when clicked. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | button1 | string | Specifies the name or identifier of the Button component. | | Caption | Click Me | string | The text displayed on the button. | | Hide On Print | false | boolean | If set to true, the Button component will be hidden when printed. | | Style Class | button-style | string | Specifies the style class to be applied to the Button component. | | ID Prefix | checkbox\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a parent 'Datalist' component. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Checkbox The 'Checkbox' component is used to present a binary choice option that can be selected or deselected. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | -------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | checkbox1 | string | Specifies the name or identifier of the Checkbox component. | | Checked | true | boolean | If set to true, the Checkbox will be pre-selected. | | Hide On Print | false | boolean | If set to true, the Checkbox component will be hidden when printed. | | Style Class | checkbox-style | string | Specifies the style class to be applied to the Checkbox component. | | ID Prefix | checkbox\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a parent 'Datalist' component. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Combobox The 'Combo Box' component is used to present a dropdown list of options for selection. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | combo1 | string | Specifies the name or identifier of the Combo Box component. | | Value | option2 | string | The initial value to be selected in the Combo Box component. | | Hide On Print | false | boolean | If set to true, the Combo Box component will be hidden when printed. | | Style Class | combo-style | string | Specifies the style class to be applied to the Combo Box component. | | ID Prefix | combo\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a parent 'Datalist' component. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Datepicker The 'Date Picker' component is used to allow users to select a date from a calendar. ## Properties | Property | Value Sample | Value Type | Description | | ------------ | ---------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | datepicker1 | string | Specifies the name or identifier of the Date Picker component. | | Value | 2023-07-01 | string | The initial date value to be set in the Date Picker component. | | Format | d-m-Y | string | The format in which the selected date will be displayed. Default format is d-m-Y. | | Placeholder | Select date | string | The text to be displayed as a placeholder inside the Date Picker component. | | First Day | Monday | string | Specifies the first day of the week in the Date Picker component. | | Min Date No. | 1 | number | The minimum number of days that can be selected from the current date. | | Max Date No. | 365 | number | The maximum number of days that can be selected from the current date. | | Style Class | datepicker-style | string | Specifies the style class to be applied to the Date Picker component. | | ID Prefix | datepicker\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions ## Example Uses ![Example Use 1](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/datepicker/path/to/screenshot1.png) *Description or caption for example use 1.* ![Example Use 2](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/datepicker/path/to/screenshot2.png) *Description or caption for example use 2.* ![Example Use 3](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/datepicker/path/to/screenshot3.png) *Description or caption for example use 3.* ... # Edit The 'Edit' component is used to capture and display user input. ## Properties | Property | Value Sample | Value Type | Description | | --------------- | ------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | edit1 | string | Specifies the name or identifier of the Edit component. | | Value | John Doe | string | The initial value to be assigned to the Edit component. | | Placeholder | Enter text | string | The text to be displayed as a placeholder inside the Edit component. | | Type | text | string | Specifies the type of input expected in the Edit component (e.g., text, password). | | Pattern | \[A-Za-z]+ | string | Specifies a regular expression pattern to validate the input in the Edit component. | | Min Length | 0 | number | Specifies the minimum number of characters required in the Edit component. | | Max Length | 100 | number | Specifies the maximum number of characters allowed in the Edit component. | | Custom Keyboard | false | boolean | If set to true, enables a custom keyboard layout for the Edit component. | | Hide On Print | false | boolean | If set to true, the Edit component will be hidden when printed. | | Style Class | edit-style | string | Specifies the style class to be applied to the Edit component. | | Read Only | false | boolean | If set to true, the Edit component will be read-only and not editable. | | Disabled | false | boolean | If set to true, the Edit component will be disabled and not interactable. | | ID Prefix | edit\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions ## Example Uses ![Example Use 1](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/edit/path/to/screenshot1.png) *Description or caption for example use 1.* ![Example Use 2](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/edit/path/to/screenshot2.png) *Description or caption for example use 2.* ![Example Use 3](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/edit/path/to/screenshot3.png) *Description or caption for example use 3.* ... # Memo The 'Memo' component is used to capture and display multiline text input. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | memo1 | string | Specifies the name or identifier of the Memo component. | | Value | Lorem ipsum dolor sit amet... | string | The initial value to be assigned to the Memo component. | | Placeholder | Enter text | string | The text to be displayed as a placeholder inside the Memo component. | | Column Size | 3 | number | Specifies the number of columns (width) for the Memo component. | | Row Size | 5 | number | Specifies the number of rows (height) for the Memo component. | | Hide On Print | false | boolean | If set to true, the Memo component will be hidden when printed. | | Style Class | memo-style | string | Specifies the style class to be applied to the Memo component. | | Read Only | false | boolean | If set to true, the Memo component will be read-only and not editable. | | Disabled | false | boolean | If set to true, the Memo component will be disabled and not interactable. | | ID Prefix | memo\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Radiobutton The 'Radio Button' component is used to present a single option for selection. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | radio1 | string | Specifies the name or identifier of the Radio Button component. | | Checked | true | boolean | If set to true, the Radio Button will be pre-selected. | | Hide On Print | false | boolean | If set to true, the Radio Button component will be hidden when printed. | | Style Class | radio-style | string | Specifies the style class to be applied to the Radio Button component. | | ID Prefix | radio\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a parent 'Datalist' component. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Timepicker The 'Time Picker' component is used to allow users to select a time. ## Properties | Property | Value Sample | Value Type | Description | | -------- | ------------ | ---------- | --------------------------------------------------------------------------------- | | Name | timepicker1 | string | Specifies the name or identifier of the Time Picker component. | | Value | 12:00 PM | string | The initial value to be displayed in the Time Picker component. | | Format | h:i A | string | The format in which the selected time will be displayed. Default format is h:i A. | h Hour in 12-hour format 1 – 12 hh Hour in 12-hour format with a leading zero 01 – 12 H Hour in 24-hour format 0 – 23 HH Hour in 24-hour format with a leading zero 00 – 23 i Minutes 00 – 59 a Day time period a.m. / p.m. A Day time period in uppercase AM / PM | | Placeholder | Select time | string | The text to be displayed as a placeholder inside the Time Picker component. | | Interval | 15 | number | The interval in minutes for the time. Default interval is 60 (in minutes). selection. | | Min Length | 5 | number | The minimum length of the time input field. | | Max Length | 10 | number | The maximum length of the time input field. | | Style Class | timepicker-style | string | Specifies the style class to be applied to the Time Picker component. | | ID Prefix | timepicker\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and the value in the data source referenced by the ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions ## Example Uses ![Example Use 1](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/timepicker/path/to/screenshot1.png) *Description or caption for example use 1.* ![Example Use 2](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/forms/timepicker/path/to/screenshot2.png) *Description or caption for example use 2.* # General # Barcode The 'Bar Code' component is used to generate and display barcodes based on the provided value. ## Properties | Property | Value Sample | Value Type | Description | | ------------ | ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | barcode1 | string | Specifies the name or identifier of the Bar Code component. | | Value | 1234567890 | string | The value to encode into the barcode. | | Field | data\_field | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The value contained within this field of the data source will be assigned to the 'Value' property of this component. | | Type | CODE128 | string | Specifies the type or format of the barcode. | | Display Text | True | boolean | If set to true, displays the text below the barcode with the encoded value. | | Style Class | barcode-style | string | Specifies the style class to be applied to the Bar Code component. | | ID Prefix | barcode\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Chart The 'Chart' component is used to display data in a visual format using charts. ## Properties | Property | Value Sample | Value Type | Description | | ----------- | -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | chart1, chart2 | string | Specifies the name or identifier of the chart component. | | Style Class | chart-style | string | Specifies the style class to be applied to the chart component. | | ID Prefix | chart\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions * [chartPopulateLineData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateLineData/README.md) - Description of action for populating line data. * [chartPopulateStepData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateStepData/README.md) - Description of action for populating step data. * [chartPopulateStepAreaData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateStepAreaData/README.md) - Description of action for populating step area data. * [chartPopulateBarData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateBarData/README.md) - Description of action for populating bar data. * [chartPopulatePieData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulatePieData/README.md) - Description of action for populating pie data. * [chartPopulateDonutData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateDonutData/README.md) - Description of action for populating donut data. * [chartPopulateSplineData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateSplineData/README.md) - Description of action for populating spline data. * [chartPopulateAreaData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateAreaData/README.md) - Description of action for populating area data. * [chartPopulateAreaSplineData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateAreaSplineData/README.md) - Description of action for populating area spline data. * [chartPopulateScatterPlotData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateScatterPlotData/README.md) - Description of action for populating scatter plot data. * [chartPopulateGaugeData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/chart/link_to_chartPopulateGaugeData/README.md) - Description of action for populating gauge data. ## Example Uses N/A # Datalist # Datalist The 'Datalist' component is used to display data from a given array, list or data sources from connectors. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | dataList1 | string | Specifies the name or identifier of the Datalist component. | | Dataset | LocalTable1 | string | Specifies identifier of the dataset containing the tabular data to be displayed. | | Auto Load | true | boolean | If set to true, the Datalist component will automatically load the dataset once. | | Hide On Print | false | boolean | If set to true, the Datalist component will be hidden when printed. | | Style Class | dataList-style | string | Specifies the style class to be applied to the Datalist component. | | ID Prefix | dataList\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | | Sortable | true | boolean | If set to true, the Datalist component allows sorting of the table columns. | ## Related Actions * [loadData](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/datalist/datalist/link_to_loadData/README.md) - Loads the data from local storage, staging database or 3rd party connector. * [loadNext](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/datalist/datalist/link_to_loadNext/README.md) - Loads the following next records of the table or dataset. ## Example Uses ![Example Use 1](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/datalist/datalist/path/to/screenshot1.png) *Description or caption for example use 1.* ![Example Use 2](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/datalist/datalist/path/to/screenshot2.png) *Description or caption for example use 2.* ![Example Use 3](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/datalist/datalist/path/to/screenshot3.png) *Description or caption for example use 3.* ... # Using Datalist The **Datalist** component in eMOBIQ comes with a unique behaviour that affects child components – it dynamically replicates child components for each record within a given array or data source. This dynamic replication feature empowers our users to craft personalized layouts for every individual record, adding a layer of customization that enhances the overall data presentation. ## Unleashing Creativity: Tailored Layouts for Each Record With the **Datalist** component, the possibilities for data presentation are endless. Users have the freedom to design distinct layouts for different records, tailoring the arrangement and styling of components to suit their specific needs. This flexibility allows for a more engaging and user-friendly display of information. For instance, if your dataset contains a list of products, each product's unique attributes can be showcased through dedicated child components, making the information more relevant and impactful. ## Intelligent Component Identification In this dynamic environment where components are replicated at runtime, traditional fixed variable names won't cut it for component identification. This is where the power of the **Datalist** component's identification mechanism comes into play. Components within the replicated records are identified using a combination of the **ID Prefix** and the **ID Field**. The **ID Prefix** serves as a constant prefix value that ensures component uniqueness. The real magic lies in the **ID Field**, which is a value that is unique for each record. Typically, this would be an identification number or code associated with the record itself. By combining the **ID Prefix** and the **ID Field**, our platform ensures that each replicated component within a record has a distinct identifier. This intelligent identification strategy facilitates seamless interaction and manipulation of individual components within the **Datalist** records. In a nutshell, the **Datalist** component's dynamic replication and ingenious identification mechanism grant our users the ability to fashion tailor-made layouts for each record in their dataset. This groundbreaking functionality opens up a world of opportunities for innovative and diverse data representation. # Map The 'Map' component is used to display a location on a map within an interface. ## Properties | Property | Value Sample | Value Type | Description | | ------------------------ | ----------------- | ---------- | ----------------------------------------------------------------- | | Name | map1, map2 | string | Specifies the name or identifier of the map component. | | Lat, Long | 1.35531,103.86776 | string | Specifies the latitude and longitude coordinates of the location. | | Zoom | 10 | number | Specifies the initial zoom level of the map. | | Title | Orangekloud | string | Specifies the title or label for the map location. | | Show Zoom Control | True, False | boolean | If set to true, shows the zoom control on the map. | | Show Map Type Control | True, False | boolean | If set to true, shows the map type control on the map. | | Show Street View Control | True, False | boolean | If set to true, shows the street view control on the map. | | Show Full Screen Control | True, False | boolean | If set to true, shows the full screen control on the map. | | Show Route Markers | True, False | boolean | If set to true, shows markers for the route on the map. | ## Related Actions * [mapSetCenter](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapSetCenter/README.md) - Sets the center of the map to the specified latitude and longitude coordinates. * [mapSetZoom](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapSetZoom/README.md) - Sets the zoom level of the map to the specified value. * [MapFitBounds](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_MapFitBounds/README.md) - Fits the map to contain the specified bounds. * [mapAddMarker](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapAddMarker/README.md) - Adds a marker to the map at the specified latitude and longitude coordinates. * [mapDeleteMarker](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapDeleteMarker/README.md) - Deletes the marker with the specified ID from the map. * [mapClearMarker](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapClearMarker/README.md) - Removes all markers from the map. * [mapRoute](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapRoute/README.md) - Calculates and displays a route on the map from the starting coordinates to the ending coordinates. * [mapSetClickListener](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapSetClickListener/README.md) - Sets a callback function to be executed when the user clicks on the map. * [mapGetZoom](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_mapGetZoom/README.md) - Retrieves the current zoom level of the map. * [intentMaps](https://github.com/OrangeKloud/emobiq-documentation/blob/master/document/client/004-ui-components/general/map/link_to_intentMaps/README.md) - Opens the default maps application with a marker at the specified latitude and longitude coordinates and the given title. ## Example Uses N/A # Pdf The 'PDF' component is used to display PDF documents. ## Properties | Property | Value Sample | Value Type | Description | | --------- | -------------------- | ---------- | ------------------------------------------------------------------------------ | | Name | pdf1, pdf2 | string | Specifies the name or identifier of the PDF component. | | Path | path/to/document.pdf | string | Specifies the path or location of the PDF document. | | Path Type | base64 | string | Specifies the PDF path type: n/a, URL, base64, temporaryFile, permanentFile. | | Zoom | 1, 2, 3 | number | Specifies the initial zoom level of the PDF document. | | Scale By | auto | string | Specifies the type of scale for the PDF document: n/a, auto, height, width | | Page | single | string | Specifies the type of page display for the PDF document: n/a, single, multiple | | Page No. | 3 | number | Specifies the starting page number to display in the PDF document. | ## Related Actions N/A ## Example Uses N/A # Qrcode The 'QR Code' component is used to generate and display QR codes based on the provided value. ## Properties | Property | Value Sample | Value Type | Description | | ----------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | qrCode1, qrCode2 | string | Specifies the name or identifier of the QR code component. | | Value | | string | The value to encode into the QR code. | | Logo | path/to/logo.png | string | Specifies the path to the logo image to be displayed in the QR code. | | Field | data\_url | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The value contained within this field of the data source will be assigned to the 'Value' property of this component. | | Style Class | qr-style | string | Specifies the style class to be applied to the QR code component. | | ID Prefix | qr\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | ## Related Actions N/A ## Example Uses N/A # Signature The 'Signature' component allows users to capture and display signatures. ## Properties | Property | Value Sample | Value Type | Description | | ------------- | --------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | signature1 | string | Specifies the name or identifier of the Signature component. | | Value | | string | The captured signature value. | | Field | data\_field | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The value contained within this field of the data source will be assigned to the 'Value' property of this component. | | Read Only | false | boolean | If set to true, the Signature component will be read-only and not editable. | | Line Width | 2 | number | Specifies the line width for drawing the signature. | | Hide On Print | false | boolean | If set to true, the Signature component will be hidden when printed. | | ID Prefix | signature\_ | string | \[Only used when placed inside a 'Datalist' component] Specifies the prefix used for the unique identification of this component inside a datalist. The name identifier of this component will be overwritten with the concatenation of ID Prefix and ID Field. | | ID Field | data\_id | string | \[Only used when placed inside a 'Datalist' component] Specifies the field name from a data source bound to the parent 'Datalist' component. The name identifier of this component will be overwritten by concatenating the ID Prefix and the value in the data source referenced by the ID Field. | | Style Class | signature-style | string | Specifies the style class to be applied to the Signature component. | ## Related Actions N/A ## Example Uses N/A # Snippet The 'Snippet' component is used to display a snippet created in the 'Snippets' tab. This component is mainly used for ## Properties | Property | Value Sample | Value Type | Description | | ------------- | ------------------ | ---------- | ------------------------------------------------------------------ | | Name | snippet1, snippet2 | string | Specifies the name or identifier of the snippet component. | | Snippet | snippet\_id | string | Specifies the identifier of the assigned snippet to be displayed. | | Hide On Print | true | boolean | If set to true, the snippet component will be hidden when printed. | ## Related Actions N/A ## Example Uses N/A # Payment # Paypal The 'Paypal' component is used to integrate Paypal payment functionality. ## Properties | Property | Value Sample | Value Type | Description | | ----------------------- | ------------ | ---------- | ----------------------------------------------------------------------- | | Name | paypal1 | string | Specifies the name or identifier of the Paypal component. | | Connector | sandbox | string | The Paypal connector to use for payment transactions. | | Currency | SGD | string | The currency code to use for the payment. | | Enable Shipping Address | false | boolean | If set to true, enables the option to collect shipping address details. | | Hide On Print | false | boolean | If set to true, the Paypal component will be hidden when printed. | ## Related Actions N/A ## Example Uses N/A # Events Reference In eMOBIQ, a component or page event capture user or system interactions. Logic can be binded to the different events, enabling you to define how your application responds when such events are triggered. This documentation provides an overview of the events that can be utilized within eMOBIQ components. Understanding these events will help you effectively manage user interactions and enhance the functionality of your application. Also note that custom events can be defined in a plugin component. For custom events, the publisher of the plugin has to provide information or documentation about its usage. ## Event Types ### **click** * **Description:** Triggered when a user clicks on a component. * **Use Case:** This event is useful for capturing user interactions such as button clicks, link selections, or general component activation. ### **load** * **Description:** Fired when a target page or component, along with all its child components, completes loading. This event signifies that the UI properties of the page or component are fully loaded and ready for interaction. Note that functional properties configured in the actions may not be fully ready at this point. * **Use Case:** Use this event to execute actions upon the successful loading of a target page or component. It's suitable for scenarios where you want to ensure that all UI elements are present and accessible before performing further interactions or operations. Keep in mind that while the UI is loaded, certain functional aspects, such as data fetching or dynamic content initialization, might still be in progress. ### **onResume** * **Description:** Triggered when a user returns to the application after exiting it or switching back to it from another app. * **Use Case:** This event is suitable for scenarios where a user resumes interaction with the application after a period of absence. You can refresh data, restore the application's state, or resume any paused activities. ### **scrollTop** * **Description:** Triggered when a user scrolls to the top of the target page or component. * **Use Case:** Use this event to create behaviors triggered when a user reaches the top of a scrollable component, like displaying a "scroll-to-top" button. ### **onScroll** * **Description:** Triggered during scrolling within a target page or component. * **Use Case:** This event is ideal for implementing features that respond to scrolling, such as parallax effects or dynamic headers that change appearance as the user scrolls. ### **scrollBottom** * **Description:** Triggered when a user scrolls to the bottom of the target page or component. * **Use Case:** Use this event to load additional content or trigger actions when the user reaches the end of a scrollable area. ### **press** * **Description:** Occurs when a user physically presses down on the target page or component. This event only works with a touch screen device. * **Use Case:** This event is useful for capturing initial touch interactions, like selecting an item or holding down a button. ### **receiveMessage** * **Description:** Triggered when a page or component receives a message or communication from an external url defined in a web frame component. This only works when the web frame component is used within the page. * **Use Case:** Use this event to enable communication between an external webframe url. You can use it to update components based on messages from the external sources. ### **longPress** * **Description:** Triggered by a user's extended press of 1 second on a component. This only works with a touchscreen device. * **Use Case:** This event is suitable for creating actions that require the user to press and hold on a component, such as displaying contextual menus or initiating drag-and-drop interactions. ### **item\_click** * **Description:** Similar to the **click** event, specific to individual items within a component. * **Use Case:** Use this event to capture clicks on individual items within a larger component, like selecting a specific item from a list. ### **item\_press** * **Description:** Similar to the **press** event, specific to individual items within a component. * **Use Case:** This event is similar to **press**, but it's targeted at individual items within a component. It's useful for capturing touch interactions on specific list items, for example. ### **item\_longPress** * **Description:** Similar to the **longPress** event, specific to individual items within a component. * **Use Case:** Similar to **longPress**, but designed for individual items within a component. It can be used for capturing extended presses on specific items, triggering contextual actions. ### **item\_sortRelease** * **Description:** Triggered when an item within a datalist component is released after being sorted. Sorting must be enabled in the component's properties for this event to work. * **Use Case:** Use this event to respond to sorting interactions within a list or sortable component. You can update the order of items or save changes to the backend. ### **change** * **Description:** Triggered when the value of an input or selection (e.g. radio button) within a component changes. * **Use Case:** Use this event to capture user input changes, such as text input, checkbox selections, or dropdown menu selections. It's useful for real-time validation or updating dependent components. ### **focus** * **Description:** Triggered when a component gains focus or becomes the active element.This is used specifically for edit component. * **Use Case:** This event is helpful for scenarios where you want to perform actions when a user navigates to or interacts with a specific component, such as showing a keyboard for input fields. ### **lostFocus** * **Description:** Triggered when a component loses focus or is no longer the active element. This is only available for edit component. * **Use Case:** Use this event to capture when a user navigates away from a component or input field. It's useful for triggering validation or saving input data. ### **afterLoad** * **Description:** Triggered after a page or component has finished loading. This is only available for pdf component. * **Use Case:** Similar to the **load** event, this event occurs after the initial loading of content. It's useful for executing actions that require the complete rendering of the component. ### **error** * **Description:** Triggered when an error occurs within a component or during a specific action. This is only available for pdf component. * **Use Case:** This event is essential for capturing and handling errors gracefully. You can display error messages to users, log errors for debugging, or trigger error recovery processes. ### **changing** * **Description:** Triggered while a user is actively making changes to a component, typically an input. This is only available for edit component. * **Use Case:** This event is suitable for capturing user input changes as they happen, which can be helpful for real-time feedback or updates. ### **enter** * **Description:** Triggered when a user presses the "Enter" key while interacting with an edit component. This is only available for pdf component. * **Use Case:** This event is useful for capturing when a user confirms their input in an edit field by pressing the "Enter" key. It's commonly used for search bars, chat input, or form submissions. # Actions And Visual Logic # Action Reference # Cordova # App # animate ## Description An animation lets a component gradually change from one style to another. Currently, this function only animates an image downward and slowly fades away. Note: Only applicable for image component. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | -------------- | ------------------------------------------ | --------- | ------- | ------- | ---------------------------------- | | component | The name of the component to animate. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component to animate. | Text | - | - | Partial (Yes if no 'component'.) | | type | Not applicable for now. | Text | - | - | No | | startPositionY | Starting y-axis position of the animation. | Number | 0 | - | No | | endPositionY | Ending y-axis position of the animation. | Number | 0 | - | No | | rotationDegree | Rotation degree of the animation. | Number | 0 | - | No | ## Output Note: The component will be updated to show the changes. ## Example In this example, the image would move downward and slowly fade away upon clicking on it. ### Steps 1. Drag a new `image` component to the page, under it's properties, update the name to `imgAnimate`. 2. Click the action tab. Select the `click` event of the `image` component. 3. In the event flow, drag the `animate` function. 4. Update the parameters in the inspector of the `animate` function. ```js component: imgAnimate startPositionY: 0 endPositionY: 20 rotationDegree: 45 ``` ### Result ![](/files/iEbBhITUQIfPJBtANhvN) # bbCodeToCanvas ## Description Generates a canvas by following a specific format, canvas are mainly used for printing. This does not include images, to include please refer to [bbCodeToCanvasSync](/emobiq-client/006-actions-and-visual-logic/action-reference/cordova/app/bbcodetocanvassync). ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------------ | ---------------------------------------------------------------------------------------------- | --------- | --------- | --------------- | -------- | | text | The text with a specific format to be drawn in the canvas. See `Text Format` after this table. | Text | - | - | Yes | | font | The name of the font to be used. | Text | monospace | monospace, ocrb | No | | size | The size of the font to be used with the suffix 'px' for pixel. | Text | 23px | - | No | | canvasWidth | The width of the canvas. | Number | 576 | - | No | | marginTop | The margin top value of the canvas. | Number | 0 | - | No | | marginLeft | The margin left value of the canvas. | Number | 0 | - | No | | marginRight | The margin right value of the canvas. | Number | 0 | - | No | | marginBottom | The margin bottom value of the canvas. | Number | 0 | - | No | Text Format * Bold: `[b]`The text to apply bold.`[/b]` * Italic: `[i]`The text to apply italic.`[/i]` * Font: `[font={monospace|ocrb}]`The text to apply the font.`[/font]` * Size: `[size={number}]`The text to apply the size.`[/size]` * Linespace: `[linespace={number}]`The text to apply the linespace.`[/linespace]` * Alignment: `[alignment={left|right}]`The text to apply the alignment, where it will start.`[/alignment]` * Underline: `[u]`The text to apply underline.`[/u]` * Strikethrough: `[s]`The text to apply strikethrough.`[/s]` ## Output | Description | Output Type | | ------------------------ | ------------------------------------------------------------------------------------- | | Returns the html canvas. | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | ## Links ### Related Information See also: * [Printer.canvasToCPCL](/emobiq-client/006-actions-and-visual-logic/action-reference/cordova/printer/canvastocpcl) ### Alternative Implementation * [App.bbCodeToCanvasSync](/emobiq-client/006-actions-and-visual-logic/action-reference/cordova/app/bbcodetocanvassync) # bbCodeToCanvasSync ## Description Generates a canvas by following a specific format including images, canvas are mainly used for printing. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------------ | ---------------------------------------------------------------------------------------------- | --------- | --------- | --------------- | -------- | | text | The text with a specific format to be drawn in the canvas. See `Text Format` after this table. | Text | - | - | Yes | | font | The name of the font to be used. | Text | monospace | monospace, ocrb | No | | size | The size of the font to be used with the suffix 'px' for pixel. | Text | 23px | - | No | | canvasWidth | The width of the canvas. | Number | 576 | - | No | | marginTop | The margin top value of the canvas. | Number | 0 | - | No | | marginLeft | The margin left value of the canvas. | Number | 0 | - | No | | marginRight | The margin right value of the canvas. | Number | 0 | - | No | | marginBottom | The margin bottom value of the canvas. | Number | 0 | - | No | | rotateDegree | The degree of rotation of the canvas. | Number | 0 | - | No | Text Format * Bold: `[b]`The text to apply bold.`[/b]` * Italic: `[i]`The text to apply italic.`[/i]` * Image: `[img|x={number}|y={number}|width={number}|height={number}]`The image to be rendered, a base64 or url. The image url must not block [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).`[/img]` * Font: The text to apply the font.`[/font]` * Size: `[size={number}]`The text to apply the size.`[/size]` * Linespace: `[linespace={number}]`The text to apply the linespace.`[/linespace]` * Alignment: `[alignment={left|right}]`The text to apply the alignment, where it will start.`[/alignment]` * Underline: `[u]`The text to apply underline.`[/u]` * Strikethrough: `[s]`The text to apply strikethrough.`[/s]` ## Output N/A ## Callback ### callback The function to be executed when the canvas is generated successfully. | Description | Output Type | | ------------------------ | ------------------------------------------------------------------------------------- | | Returns the html canvas. | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | ### errCallback The function to be executed when the canvas is not generated. | Description | Output Type | | ------------------ | ----------- | | Returns the error. | Text | # canvasGenerate ## Description Generate base64 from an existing canvas, ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------------ | ------------------------------------------------------- | --------- | ------- | ------- | -------- | | canvas | An existing canvas to be copied over to the new canvas. | Text | - | - | Yes | | canvasWidth | Width of the new canvas. | Number | 300 | - | No | | canvasHeight | Height of the new canvas. | Number | 300 | - | No | | extra | Additional data to be used in the callbacks. | Any | - | - | No | ## Output N/A ## Callback ### callback The function to be executed when converting the canvas to base64 was successful. | Description | Output Type | | --------------------------------- | ----------- | | Returns the base64 of the canvas. | Text | ### errCallback The function to be executed when converting the canvas to base64 was not successful. | Description | Output Type | | ------------------ | ----------- | | Returns the error. | Text | # canvasGenerateFrom ## Description Converts a file data to a canvas, canvas are mainly used for printing. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------------ | ------------------------------------------------------------------------------------------ | -------------- | ------- | ---------------- | -------- | | type | The data type of the file to be converted, basically what is the data type of the 'value'. | Text | base64 | base64 | No | | value | The data of the file to be converted. | Any | - | - | Yes | | fileType | The file type of the file to be converted, basically what is the file type of the 'value'. | Text | image | image, pdf | No | | documentSize | If the 'fileType' is 'pdf', this parameter is used to scale the size appropriately. | Text or Number | - | a4, {Any Number} | No | ## Output | Description | Output Type | | --------------------------------------------------------- | ----------- | | Returns 'true' or 'false', based on the execution status. | Boolean | ## Callback ### callback The function to be executed when the canvas is generated successfully. | Description | Output Type | | ------------------------ | ------------------------------------------------------------------------------------- | | Returns the html canvas. | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | ### errCallback The function to be executed when the canvas is not generated. | Description | Output Type | | ------------------ | ----------- | | Returns the error. | Text/Object | # canvasHeight ## Description Retrieve the height of the canvas. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------ | ------------------------------------- | ------------------------------------------------------------------------------------- | ------- | ------- | -------- | | canvas | The canvas to retrieve the height of. | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | - | - | Yes | ## Output | Description | Output Type | | --------------------------------- | ----------- | | Returns the height of the canvas. | Number | # canvasResize ## Description Resize an existing canvas, canvas are mainly used for printing. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------------ | ------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- | ------- | -------- | | canvas | An existing canvas to be copied over to the new canvas. | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | - | - | Yes | | canvasWidth | Width of the new resized canvas. | Number | - | - | No | | canvasHeight | Height of the new resized canvas. | Number | - | - | No | | extra | Additional data to be used in the callbacks. | Any | - | - | No | ## Output | Description | Output Type | | ----------------------------------------------------------- | ----------- | | Returns 'true' or 'false', if it was executed successfully. | Boolean | ## Callback ### callback The function to be executed when the canvas is resized successfully. | Description | Output Type | | ------------------------ | ------------------------------------------------------------------------------------- | | Returns the html canvas. | [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | ### errorCallback The function to be executed when the canvas is not resized successfully. | Description | Output Type | | ------------------ | ----------- | | Returns the error. | Text | # canvasToDataURL ## Description Converts a component to base64. Note: Not all components are supported, as of now only the following are supported: * Signature * Barcode * QRCode ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | -------------------------- | ---------- | ------- | ------- | ---------------------------------- | | canvas | The name of the component. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component. | Text | - | - | Partial (Yes if no 'canvas'.) | ## Output | Description | Output Type | | -------------------------------------------------------- | ------------ | | The base64 if it is converted, if it fails then 'false'. | Text/Boolean | # canvasToImage ## Description Copies the component content to an image component. Note: Not all components are supported, as of now only the following are supported: * Signature * Barcode * QRCode ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Data Type | Default | Options | Required | | ------ | --------------------------------------------------- | --------- | ------- | ------- | -------- | | canvas | The name of the component to be copied. | Text | - | - | Yes | | image | The name of the image component to put the data to. | Text | - | - | Yes | ## Output | Description | Output Type | | --------------------------------------------------------------------- | ----------- | | Returns 'true' or 'false', if the function was executed successfully. | Boolean | # clearAllVar ## Description Removes all global variables data in the app excluding the variables specified. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ------ | ------------------------------------------- | ---------- | ------- | ------- | -------- | | except | The variable(s) that should not be cleared. | Text/List | - | - | No | ## Output | Description | Output Type | | --------------------- | ----------- | | Always return 'true'. | Boolean | Note: The global variables will be updated to remove all of them. # comment ## Description Provides a note for developers to refer to inside the event flow. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----- | ------------------------------- | ---------- | ------- | ------- | -------- | | value | The comment or note to be made. | Text | - | - | No | ## Output Note: The comment function node will be updated to show the value specified by the user. # componentAttr ## Description Returns the attribute value of a component, such as its name, dimensions etc. The component mentioned in this function refers to both page components and services. To know the attributes available, please check the specific component documentation. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | ---------------------------------------------------- | ---------- | ------- | ------- | ---------------------------------- | | component | The name of the component to get the attribute from. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component to get the attribute from. | Text | - | - | Partial (Yes if no 'component'.) | | attr | The attribute of the component. | Text | - | - | Yes | ## Output | Description | Output Type | | -------------------------------------------------------------------------------------------------- | ------------ | | Returns the attribute value of the component, if the attribute is not entered will return 'false'. | Text/Boolean | # componentElAttr ## Description Returns the attribute value of a component's element, such as its value, width, height, and etc. The attributes are based on [html components](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). To know the specific component element type, please check the specific component documentation. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | -------------------------------------------------------------- | ----------- | ------- | ------- | ---------------------------------- | | component | The name of the component to get the element's attribute from. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component to get the element's attribute from. | Text | - | - | Partial (Yes if no 'component'.) | | attr | The attribute of the component's element. | String/Text | - | - | Yes | ## Output | Description | Output Type | | ------------------------------------------------------------------------------------------------------------ | ------------ | | Returns the attribute value of the component's element, if the attribute is not entered will return 'false'. | Text/Boolean | # ComponentElement ## Description Retrieve the [html element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) of the component. To know the specific component element type, please check the specific component documentation. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | -------------------------------------------------------- | ---------- | ------- | ------- | ---------------------------------- | | component | The name of the component to retrieve html element from. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component to retrieve html element from. | Text | - | - | Partial (Yes if no 'component'.) | ## Output | Description | Output Type | | ------------------------------------------ | ------------------------------------------------------------------------ | | Returns the html element of the component. | [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | # componentMethod ## Description To trigger a built an method/function within the component. The component mentioned in this function refers to both page components and services. To know the methods available for the component, please check the specific component documentation. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | ----------------------------------------------------- | ---------- | ------- | ------- | ---------------------------------- | | component | The name of the component to trigger the method from. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component to trigger the method from. | Text | - | - | Partial (Yes if no 'component'.) | | method | The method to be triggered from the component. | Text | - | - | Yes | | arguments | The arguments/paramters to be used for the method. | Array/List | - | - | No | ## Output | Description | Output Type | | ------------------------------------------------------------------------------------------------ | ----------- | | Returns the result based on the method called, if the component is not found it returns 'false'. | Any | Note: This can also have side effects to the components, depending on the method called. # componentValue ## Description Retrieves the value of the component. ### Platform Supported * Web * Mobile ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | ----------------------------------------------------------- | ---------- | ------- | ------- | ---------------------------------- | | component | The name of the component that the value is retrieved from. | Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component that the value is retrieved from. | Text | - | - | Partial (Yes if no 'component'.) | ## Output | Description | Output Type | | ----------------------------------------------------------------- | ------------ | | Returns the value of the component, if unable to returns 'false'. | Text/Boolean | # console ## Description Display the value passed in the [browser console](https://developer.chrome.com/docs/devtools/console). This is usually used for debugging or checking the error in the application. ### Platform Supported * Mobile * Web ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----- | ----------------------------------------------------------------------------------- | ---------- | ------- | ------- | -------- | | value | The value to be shown in the browser console, such as characters, numbers or words. | Any | - | - | Yes | ## Output | Description | Output Type | | ------------------------- | ----------- | | Returns the value passed. | Any | Note: The value would also be logged in the [browser console](https://developer.chrome.com/docs/devtools/console). # convertImageToBase64 ## Description Converts an image to base64 format. ### Platform Supported * Mobile * Web ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ------- | ------- | -------- | | image | The image to be converted, it can be a asset icon name, local file path or url. If the image is a url must not block [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). | Text/List | - | - | Yes | | extra | Extra parameters stored and passed to callback. | Any | - | - | No | ## Output | Description | Output Type | | ------------------------------------------------------------------------- | ----------- | | Returns 'true' if the image was passed and if not it will return 'false'. | Boolean | ## Callback ### callback The function to be executed when the image is successfully converted to base64 format. #### Scenario 1 There is no parameter 'extra'. | Description | Output Type | | ------------------------------------------------------------------------------------------- | ----------- | | The base64 of the image, it will return text or list based on the parameter 'image' passed. | Text/List | #### Scenario 2 There is a parameter 'extra'. | Description | Output Type | | ---------------------------------------------- | ----------- | | Contains the result and extra of the function. | Object | **Object** | Key | Description | Output Type | | ----- | ------------------------------------------------------------------------------------------- | ----------- | | data | The base64 of the image, it will return text or list based on the parameter 'image' passed. | Text/List | | extra | The extra value. | Any | # disablePage ## Description Disable the ability to click on the application. ### Platform Supported * Mobile * Web ## Input / Parameter N/A ## Output | Description | Output Type | | --------------- | ----------- | | Returns 'true'. | Boolean | Note: The application would be disabled, which means you won't be able to click anywhere in the app. ## Links ### Related Information See also: * [App.enablePage](/emobiq-client/006-actions-and-visual-logic/action-reference/cordova/app/enablepage) # displaySnippet ## Description Displays or hides a snippet component in the application. ### Platform Supported * Mobile * Web ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- | ----------- | -------- | | snippet | The snippet component name to be used. | Text | - | - | Yes | | show | To show or hide snippet. | Boolean | false | true, false | Yes | | overlay | To make sure that it precedes the current page. It works like [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). | Boolean | true | true, false | Yes | ## Output Note: The snippet will be displayed or hidden based on the action chosen. # enablePage ## Description Enable the ability to click on the application. ### Platform Supported * Mobile * Web ## Input / Parameter N/A ## Output | Description | Output Type | | --------------- | ----------- | | Returns 'true'. | Boolean | Note: The application would be enabled, which means you will be able to click anywhere in the app. ## Links ### Related Information See also: * [App.disablePage](/emobiq-client/006-actions-and-visual-logic/action-reference/cordova/app/disablepage) # getAppVersion ## Description Retrieves the build version of the app. ### Platform Supported * Mobile * Web ## Input / Parameters N/A ## Output | Description | Output Type | | ------------------------ | ----------- | | Returns the app version. | Number | ## Callback N/A ## Video Coming Soon. ## Example The user wants get version of the App. ### Step 1. Call the function. ![](/files/Z0qxXveyWNlm5dzrP3fU) ![](/files/sVLVBVRDZpZCWPsgiEcv) ### Result App version number eg 1.0 ### Notes * the app version will only increased if user click on relase build. * user can use functions: console -> getAppVersion to get the version of the app ## Links # getComponent ## Description Retrieves the details of a component. ## Input / Parameter | Name | Description | Input Type | Default | Options | Required | | ----------- | -------------------------- | ----------- | ------- | ------- | ---------------------------------- | | component | The name of the component. | String/Text | - | - | Partial (Yes if no 'componentId'.) | | componentId | The id of the component. | String/Text | - | - | Partial (Yes if no 'component'.) | **\* Note:** Either component or componentId must have value in order for this function to work. ## Output | Description | Output Type | | ------------------------------------- | ----------- | | Returns the details of the component. | Array/List | ## Callback N/A ## Video Coming Soon. ## Example The user view all the attribute/ details of a component. ### Step 1. Draw a button "ButtonGetCom". ![](/files/Ge5ba96dMy3VtppIYUp5) 2. Call the function. ![](/files/kCiHY9T4HiUz5n9ZVMkw) ![](/files/o61EOWovCm4MJ2m9RRJV) ### Result In the console, the details of component: ![](/files/bCQMUu0rgtWV9HGXepu7) ## Links --- [Next Page](/llms-full.txt/1)