* **Phone/video conference:**[ https://calendly.com/team\_acho/30min?](https://calendly.com/team_acho/30min?) For sales inquiries, and important service issues, please schedule a phone/video chat session with one of our team members. The Acho team is based in Boston, MA USA. Normal business hours in the Eastern Time Zone usually work for us. The following pages will explain how you can best utilize Acho's products for your benefit.
# What is Acho? Learn about what Acho is and how it can streamline your data journey. ### **Why do you need Acho?** Connecting, warehousing, cleaning, orchestrating, and productizing data can be very time-consuming and expensive. Without the right IT infrastructure and efficient interface, one may not be able to realize the full potential of their valuable data assets. * Acho is a data application development platform that can help you turn business data into mission-critical applications in automation, business intelligence, data science, internal tool, and client-facing products. * Start from integrating different databases and third-party apps -- all in one place. You can then make endless changes to your database and share access with your teammates. * As your analytics get more complex and sophisticated, Acho can help you run queries and manipulate the data tables in a low-code environment. * Turn your data into an interactive business app to extract more value and insights. You can build both internal and client-facing applications, allowing users to interact directly with your data. ### **The origin of Acho** The name for Acho is an acronym for ***A**I-driven, **C**ustom software with **H**igh-scalability, and **O**ptimized performance.* The idea behind Acho was incepted during our batch at Y Combinator in 2020. Since day one, our goal has always been to help teams build amazing applications that can drive results. The technology behind Acho is defined as ASSEMBLE, which stands for ***A**I-powered, **S**erverless, **S**calable, **E**vent-driven, **B**usiness **L**ogics **E**ngine*. We designed this system to help non-technical users build complex business applications at scale. In fact, Acho started building a Modern Data Stack for teams that needed to connect, transform, and orchestrate data. After the first year, however, we learned from many of our customers that traditional Business Intelligence dashboards are insufficient for delivering mission-critical services. In the following two years, we started investing in the ASSEMBLE project and aimed to help our customers scale beyond BI dashboards with custom applications. ### **How AI helps you build apps on Acho** To provide the most frictionless, and intuitive experience. Acho incorporates GPT's large language model to help users construct components needed for their applications. By interacting with Acho's App Builder via natural language, complex data feeds, business logic, and visual components can be generated within seconds. It drastically improves the efficiency of writing SQL, and backend/front codes, and therefore helps users of different backgrounds realize their vision faster than ever. ### **What're Acho's product offerings?** Acho is a platform for developing business applications in several different verticals Here're some examples for what Acho can do. 1. **Automation** Automating business processes and workflows is one of the main capacities of Acho. By connecting data from your product systems (e.g. csv, xlsx files, relational/non-relational databases, application APIs, remote folder, etc), you can construct a data pipeline for activating events via a third-party system. For example, many Acho customers use Acho to pull data from various systems and send it to their CRM application so their employees in sales, marketing, and customer support can receive fresh new data records of a source without manual entries. Another example is using a full-productized custom application to " activate" operational events. An accounting team for example can benefit from a "finance reconciliation" application that helps them approve, and reject payment by going through lengthy processes. Beyond automating data, and events, Acho's also very good at RPA. Within the App Builder, the "interaction" console is where digital workflows can be designed, deployed, and automated. You can do data scraping, email automation, interactive alerts, and many other applications with it. 2. **Business Intelligence & Data Science** Being a data application development platform, Acho's primary focus is to productize data into interactive applications that can provide valuable services to the entire company. Business Intelligence is one space where Acho can add more value against the incumbent. Beyond just charts, visualizations, and simple reporting, you can use Acho to build highly sophisticated self-serve BI services with interactive filters, natural-language search systems, dynamic paging, real-time streaming services, access controls/privilege separation, and other advanced features. If you have an existing Python model, Acho can help you productize it within a few hours. No need to write complex API services or build a backend to host, tweak file configuration, and deploy your application on the cloud. Acho can host any Python model directly on top of the connected data resources on Acho. 3. **Internal tool** Building internal tools on Acho is easy. Whether it's a searchable database, customized CRM, ticket tracking system, APM, or something very complex, Acho can provide all the toolkits to help you develop a tool that can yield a high return on investment. There are many categories of internal tools Acho can deliver. The main value Acho can deliver is highly scalable customization. If you're unhappy with some of the off-the-shelf solutions in CRM, ERP, CMS, and HR, you can leverage Acho's App Builder to completely customize it to cater your own business needs. The customization may take much quicker than you think because of the hundreds of templates, and AI assistance on Acho. 3. **Client-facing Product** A client-facing product can be very complex and demanding. To fulfill ever-changing clients' requirements, a low-code system can be beneficial in terms of agility, flexibility, extendability, scalability, and affordability. It's hard to commit to a full-code project without a well-defined design, prototypes, and infrastructure. On Acho, client-facing products can be developed at a fraction of the cost of a full-code project while not sacrificing a lot in terms of flexibility, and scalability. Some notable client-facing products we've built include data terminals, SaaS platforms, progressive web apps (PWA), E-Commerce stores, Customer portals, Customer feedback & surveys, event registration, and management systems, Job listing & Applicant Tracking Systems, and more. # How does Acho work? {% embed url="
Sign up for Acho
Resourses
Data App
Create App
The blank app you will generate if you choose blank app
Add elements to the page
Previewing the app
### Data Store [Data Store](/app-builder/app-construction/data-store) is a place where you can create variables to store data and flexibly use it anywhere. These variables can be accessed via [**accessors**](/app-builder/app-construction/accessors). The variables can also receive data via interactions within a specific scope. There are three levels of data in the Data Store: 1. **App Data:** Data is stored at the app level. All the elements, or pages in the app can access it or send an interaction to it. 2. **Page Data:** Data is stored at the page level. Only the elements on the same page can access or send an interaction to it. 3. **Element Data:** Data is stored at the element level. It can only be accessed by the element that stores the data. For some elements, such as Lists, their child elements (that is, elements placed within them) can get parent element data directly by declaring specific keys, such as `${$item}`. ## ## App Builder The App Builder provides users with the **low code** tools to easily build custom web applications to streamline business operations. Web pages are built using a variety of drag-and-drop elements, each with highly customizable settings, so you can build the most relevant app for your purpose. ### App An app is an application software that is stored on a remote server and runs in a web browser. They can be designed for a wide variety of use cases and functions. ### Collaboration The app builder is designed for collaboration. #### Comment #### Share #### Collaborator You can see who is collaborating with you at the real time. ### Page [Pages](/app-builder/app-construction/pages) are just like a webpages of a website. An app is usually composed of several pages. For example, it can contain a sign-in page, home page, and profile page. #### Device The app builder accommodates three distinct layout options designed for various devices: **Desktop**, **Tablet**, and **Mobile**, all available at the same time for your convenience. When designing layouts for tablets and mobile devices, the styling is exclusively applied within their respective scopes. As a result, each of the three devices can have its unique view without interfering with the others. This allows for best adaptation and optimization of your content for different screen sizes and devices.
Drag a table in the default mode
Data Nodes
(Without Condition) Action after enter input
(Without Condition) Action after enter input
Test in preview
Click to use transformer
Set destination page path
Set action page path
A query with parameter and A action to set SQL parameter
Load CSV to Postgres in action flow
Two ways to create a metric
Editing query
At present, it's recommended to use only SELECT queries in such queries. Any data modifications made using DML (UPDATE, INSERT, DELETE) or DDL (CREATE, DROP) may be overwritten when the data source is synced, resulting in the loss of those changes.
2. **Direct Connector**: Query against your database directly. It allows you to query all data stored in your database and supports DQL (SELECT), DML (UPDATE, INSERT, DELETE) or DDL(CREATE, DROP). Different databases have their own SQL dialects and syntax. Currently, we support the following databases for direct access:\ \- PostgreSQL\ \- MySQL\ \- Snowflake\ \- MongoDB ## Set SQL Parameters Parameters are used for creating dynamic queries. They are like variables that can store any value and be inserted into queries. Their values can be changed via event actions **Set SQL Parameters.** See detailed example in [Create a filter](/app-builder/popular-use-cases/create-a-filter). #### **1. Add new parameter** Click the plus icon at the **Parameter Panel to** add new parameter. You need to specify name and datatype and Default value(optional but recommended).  #### **2. Insert parameters in SQL query** All parameters can be inserted anywhere in the query. The parameter replaces `{{parameter_name}}` with the value specified in the parameter. Here are some examples: Pass a string: (need quotes to represent it as string) ``` SELECT * FROM customers WHERE customer_id = '{{customer_id}}' ``` Pass an integer or a number: (doesn't require quotes) ``` SELECT * FROM customers WHERE age = {{customer_id}} ``` Pass a column name: (doesn't require quotes) ``` SELECT {{category}}, COUNT(DISTINCT customer_id) AS n_customers FROM customers GROUP BY {{category}} ``` #### **3. Deal with arrays or objects** If your parameter is an array, you have to use "macro" to turn the array or object into a format that the database can ingest. Use an array to specify values in the IN statement Suppose you have a parameter called `categories`. It's an array and contains three values. ```sql { categories: ["New", "Repeat", "Royal"] } ``` Now, we want to create a query to filter the `customer` table and get all the customers in these three categories via the `IN` statement as shown below. ```sql SELECT * FROM customers WHERE category IN ("New", "Repeat", "Royal") ``` However, the array cannot be passed to the query directly since the query doesn't need the square brackets. In this situation, we need to use "[macro](#macros)" to do some transformation to the array parameter. [Macro](#macros) is a templating language that can help you generate queries. It supports various functionalities, such as for loop, or conditional statement (if and else). In this example, we want to use the for loop to pass all the values in the array one by one and use `joiner()` the function in macro to concatenate all the values with a comma. ```sql {% set comma = joiner() %} SELECT * FROM customers WHERE category IN ( {% for category in categories} {{comma}} '{{category}}' {% endfor %}) ``` You can also use an array to select multiple columns. Suppose you have a parameter called `columns`, which you can dynamically set by [**Set SQL parameters**](#set-sql-parameters). By default, `columns` is an array that contains four column names. ```sql { categories: [ "first_name", "last_name", "type", "last_login" ] } ``` ```sql SELECT {{ columns|join(',') }} FROM customers ``` ## Macros Macro is a templating language that enhances queries to make them dynamic. It supports various functionalities, including for loops and conditional statements (if and else). See available macros template at
A text accessing the query 'car_datebase'
Create a variable called customer_id
| Name | Description |
|---|---|
| Data source | Select a data source to display its data. |
| Columns | Columns to display in the table. |
| Default value | Default searching value |
| Current page | Default page to display |
| Event | Description |
|---|---|
| Search | Triggered when a search is performed. |
| Page change | Triggered when go to a page. |
| Page Size Change | Triggered when set a new page size. |
| Sort Change | Triggered when sort buttons on the header is clicked. |
| Row Click | Triggered when a row in the table is clicked. |
| Get Data Error | Triggered when get table data API on table node is failed. |
| Event | Description |
|---|---|
| Triggered when a search is performed. | |
| Trigger | |
| Triggered when set a new page size. | |
| Triggered when sort buttons on the header is clicked. | |
| Triggered when a row in the table is clicked. |
Use interaction to show a message
Hi there 
, glad that you found us!
Example of a list of integrations
Code Block Properties
Here's an example of how you can use `calc()` to calculate the width of an element as 100 pixel plus 20% of its parent element's width: ```css calc(100px + 20%); ``` 2. Using [accessor](/app-builder/app-construction/accessors) : If you need to perform more complex calculations that are not possible with `calc()`, you can use JavaScript expressions inside CSS. To do this, you can use the `${}` syntax in a template literal. Here's an example of how you can use a JavaScript expression to set the element size ```css ${960-2*30}px; ``` This will evaluate the JavaScript expression `960-2*30` to `900`, and then append the "px" unit to the end, resulting in size of 900 pixels.\ \ Further more, you can conbine other data with it together. You may add custom variables in Data and use them here. ```css ${#page.custom_width-2*#page.custom_margin}px; ``` This will evaluate `#page.custom_width-2*#page.custom_margin`, and then append the "px" unit to the end. By using custom variables like this, you can easily change the CSS properties of a set of elements together by modifying the values of your data. ## Interactive styling example Here is a example to use the techniques above to highlight number of interest. 1. Create data node  2. Create a list element and drag a text element inside, set text to ${$item.n} 3. Create a page variable called number in Data Store 4. Create a input element to set page variable 1. Set Config -> Property -> Input type to 'number' 2. Add interactions, attention: Set Action Parameters as the image do.
# Position The position property is used to specify the type of positioning method used for an element. It determines how an element is positioned within a document, and it can affect the behavior of other elements as well. There are five values of position: static, relative, absolute, fixed, and sticky. 1. `Static` (default value): This sets the position of an element to its default, which means the element will flow into the page as it normally would, without any special positioning. 2. `Fixed`: This sets the position of an element to a fixed position relative to the viewport, meaning it will remain in the same place even if the page is scrolled. 3. `Relative`: This sets the position of an element relative to its default position, allowing you to offset it from that default position with `top`, `right`, `bottom`, and `left` properties. 4. `Absolute`: This sets the position of an element relative to the nearest positioned ancestor element, or the viewport if there is no positioned ancestor. 5. `Sticky`: This sets the position of an element to `fixed` within its parent container, but only after a certain threshold has been met. For example, an element with a `position: sticky` value will remain within its parent container until the user scrolls to a certain point, at which point it becomes `fixed` and stays in the same place on the screen as the user continues to scroll. # Typography ## Font size This property sets the size of the text. The size can be specified in various units such as pixels (px), ems (em), or percentages (%). The default font size is 16 pixels. ## Line height This property sets the height of each line of text, and it determines the vertical space between the lines. The line height can be specified in various units such as pixels (px), ems (em), or percentages (%). ## Text color This property sets the color of the text. The color can be specified using various color models such as RGB, HEX, HSL. Default color is black. ## Font weight This property sets the thickness of the text. The value can be specified using keywords such as bold, normal, or a numeric value between 100 and 900. ## Font style This property sets the style of the text. The value can be specified using keywords such as italic or normal. ## Text decoration This property sets the decoration of the text. The value can be specified using keywords such as underline, overline, line-through, or none. ## Text align This property sets the horizontal alignment of the text. The value can be specified using keywords such as left, right, center, justify, or inherit. # Background ## Background type ### Background Color: The background-color property sets the background color of an element. It can be specified using a color name (e.g. "red"), a hexadecimal value (e.g. "#ff0000"), or an RGB value (e.g. "RGB(255, 0, 0)") or RGBA (e.g. "RGBA(255,0,0,0.5)") ### Background Image(bglmg): The background-image property sets an image as the background of an element. The URL of the image can be specified in the value of the property. # Border ## Radius Border radius is a property that is used to create rounded corners on an HTML element. It can be used to add a more organic and visually appealing look to designs. You can set different values for each corner. ## Borders Border is a CSS property used to create a visible boundary around an element. It can be used to create simple or complex designs depending on the border width, style, and color. * Border width: Specifies the width of the border. It can be set using a length value. * Border style: Specifies the style of the border. It can be set using a variety of values, including "solid", "dashed", "dotted". The default value is "none". * Border color: Specifies the color of the border. It can be set to a color name, a hexadecimal value, an RGB value, or an HSL value. The default value is the current color of the element. # Effect ## Cursor `cursor` is a property that sets the type of cursor to be displayed when the mouse pointer is over an element. It is used to specify the mouse cursor's appearance when it is over an element. There are several pre-defined cursor types that can be used, including pointer, crosshair, help, and move, among others. ## Color Scheme `color-scheme` is a property that specifies the preferred color scheme for the user interface of the web page. # Form Check Form elements have a Form Check section to validate user inputs. By default, it comes with a validator for required fields. By toggling Required, you can require the user to enter an input. If no input is entered, the error prompt will be shown.  You can also add validators, such as checking if the input is an email.  Select the check type. When Check Value is toggled on, the validator will be on. Type in what text to display when there's an error into Error prompt. # Tooltip Tooltips display text labels when a user hovers over an element.
Four plugins listed in plugin store
Add a "Send a email" Plugin API to a button
Upload csv data to resource
Drag a chart
Drag an image element in the product_image cell
### Set your table style Set the size of your table under **Config -> CSS -> Size**. Set the header color under **Config -> Element Styles -> Header Background Color**  This is what our final table will look like:
Flex + Row
Gird + 1fr 1fr 1fr
company_daily_stock_price
Create the query node from company_daily_stock_price table node
company_daily_stock_price
Create the query node from company_daily_stock_price table node
```sql WITH RankedObservations AS ( SELECT *, ROW_NUMBER() OVER (PARTITION BY ticker ORDER BY date DESC) AS row_number FROM company_daily_stock_price ) SELECT ticker, name, close as stock_price, volume, website, industry, subindustry FROM RankedObservations WHERE row_number = 1 ``` ## Create your chart On the same page, drag a [Chart](/app-builder/app-construction/elements/table-and-chart/chart) element. As the chart's data source, select the query node with the SQL parameters. Then configure the chart as desired. For example, set `date` for x dimension and `stock_price` for y metric.
Loading animation after Search begins
CREATE TABLE new_table (
customer_id SERIAL PRIMARY KEY,
first_name VARCHAR(255) NOT NULL,
last_name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
uploaded_time TIMESTAMP
);