diff --git a/blog/2019-05-28-first-blog-post.md b/blog/2019-05-28-first-blog-post.md deleted file mode 100644 index 02f3f81..0000000 --- a/blog/2019-05-28-first-blog-post.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -slug: first-blog-post -title: First Blog Post -authors: - name: Gao Wei - title: Docusaurus Core Team - url: https://github.com/wgao19 - image_url: https://github.com/wgao19.png -tags: [hola, docusaurus] ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2019-05-29-long-blog-post.md b/blog/2019-05-29-long-blog-post.md deleted file mode 100644 index 26ffb1b..0000000 --- a/blog/2019-05-29-long-blog-post.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -slug: long-blog-post -title: Long Blog Post -authors: endi -tags: [hello, docusaurus] ---- - -This is the summary of a very long blog post, - -Use a `` comment to limit blog post size in the list view. - - - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx deleted file mode 100644 index c04ebe3..0000000 --- a/blog/2021-08-01-mdx-blog-post.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -slug: mdx-blog-post -title: MDX Blog Post -authors: [slorber] -tags: [docusaurus] ---- - -Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). - -:::tip - -Use the power of React to create interactive blog posts. - -```js - -``` - - - -::: diff --git a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg deleted file mode 100644 index 11bda09..0000000 Binary files a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg and /dev/null differ diff --git a/blog/2021-08-26-welcome/index.md b/blog/2021-08-26-welcome/index.md deleted file mode 100644 index 9455168..0000000 --- a/blog/2021-08-26-welcome/index.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -slug: welcome -title: Welcome -authors: [slorber, yangshun] -tags: [facebook, hello, docusaurus] ---- - -[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). - -Simply add Markdown files (or folders) to the `blog` directory. - -Regular blog authors can be added to `authors.yml`. - -The blog post date can be extracted from filenames, such as: - -- `2019-05-30-welcome.md` -- `2019-05-30-welcome/index.md` - -A blog post folder can be convenient to co-locate blog post images: - -![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg) - -The blog supports tags as well! - -**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. diff --git a/blog/authors.yml b/blog/authors.yml deleted file mode 100644 index bcb2991..0000000 --- a/blog/authors.yml +++ /dev/null @@ -1,17 +0,0 @@ -endi: - name: Endilie Yacop Sucipto - title: Maintainer of Docusaurus - url: https://github.com/endiliey - image_url: https://github.com/endiliey.png - -yangshun: - name: Yangshun Tay - title: Front End Engineer @ Facebook - url: https://github.com/yangshun - image_url: https://github.com/yangshun.png - -slorber: - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png diff --git a/docs/projects/8basehome/8basehome-index.md b/docs/projects/8basehome/8basehome-index.md index 2a99cf3..b6b7f60 100644 --- a/docs/projects/8basehome/8basehome-index.md +++ b/docs/projects/8basehome/8basehome-index.md @@ -5,7 +5,7 @@ slug: '/8basehome' --- # 8base Home -8base Home is the hub for your 8base projects and organizations. It provides an overview of your applications, resources, and configurations. You can create and manage projects, teams, users, payment information, and other settings. +8base Home is the hub for your 8base projects and organizations. It provides an overview of your resources and configurations. You can create and manage projects, teams, users, payment information, and other settings. - [Projects](./projects/projects-index.md): Learn how to create projects and frontends, manage teams, edit payment information, and more. - [Organizations](./organizations/organizations-index.md): Learn about team management, organization settings, and organizational billing. diff --git a/docs/projects/8basehome/projects/creating-projects.md b/docs/projects/8basehome/projects/creating-projects.md index 7ea05e3..e301623 100644 --- a/docs/projects/8basehome/projects/creating-projects.md +++ b/docs/projects/8basehome/projects/creating-projects.md @@ -5,21 +5,17 @@ slug: '/8basehome/creating-projects' --- # Creating a New Project -A project is the container or workspace where you can develop and manage your applications. You can set up Full-Stack or Backend-Only project. +A project is the container or workspace where you can develop and manage your work. ## Overview A project is where you: -- **Access your applications**: Define your data models, create business logic, and design user interfaces within the project. - **Define your data**: Set structures, relationships, and access control rules within your project. You can manage and interact with your data through the project's data management capabilities. - **Set user access**: Define user roles and permissions for your applications. - **Deploy serverless functions**: Create and deploy serverless functions that run within your project, allowing you to add custom server-side logic to your applications. - **Define API endpoints**: Define and expose API endpoints for your applications, making it easy to integrate with external services or create custom APIs. - **Control authentication and authorization**: Projects offer built-in authentication and authorization features to secure your applications. -- **Deploy and host applications**: Publish your applications and make them available to users. - -For more information about projects, see [Projects](../../introduction/04-projects.md). ## Creating a Project @@ -33,14 +29,11 @@ Before creating your first project, you should set up your payment details. Othe To create a new project: 1. Click **Create Project** in the upper left corner of the **My Projects** page. -2. A dialog box opens. -![Create new project dialog box](_images/ui-creating-projects-create-dialog.png) -3. Enter a unique name for your project. +2. A dialog box opens. Enter a unique name for your project. 4. Choose your AWS region, either East or West. It is a best practice to choose a region that is geographically close to your users. This reduces latency, because data reaches the users more quickly. 5. Choose a project type: - - **Jumpstart with Accelerators**: Your project will have pre-built services and components such as authentication, user management, and notifications. - **Build from Scratch**: Your project will be empty. -6. If you choose **Build from Scratch**, you need to select an authentication method: +6. Select an authentication method: - **In-App Authentication**: Your application will control and manage the entire authentication process. This option is ideal for tailored experiences. - **Hosted Authentication**: Your application will have a cloud-hosted authentication interface, maintained and secured by 8base. - **DIY Authentication**: You will design your authentication process from the ground up. You can also choose to have no authentication. @@ -56,5 +49,4 @@ To learn about the Project Dashboard interface, see [Project Dashboard Walkthrou ## Related Articles -- [Authentication](../../backend/8base-console-authentication.md) -- [Jumpstart with Accelerators](../../gettingstarted/jumpstart/jumpstart.md) \ No newline at end of file +- [Authentication](../../backend/app-services/authentication-index.md) diff --git a/docs/projects/8basehome/projects/projects-dashboard-walkthrough.md b/docs/projects/8basehome/projects/projects-dashboard-walkthrough.md index f5f4450..c6383e8 100644 --- a/docs/projects/8basehome/projects/projects-dashboard-walkthrough.md +++ b/docs/projects/8basehome/projects/projects-dashboard-walkthrough.md @@ -7,7 +7,7 @@ slug: '/8basehome/projects/projects-dashboard-walkthrough' The **Project Dashboard** is where you access everything related to your project. The screen is divided into a main page and a left-hand menu. -The main page consists of your project's name, project information, project settings, and your backend and frontend applications. +The main page consists of your project's name, project information, project settings, and your backend applications. ![Project Dashboard page](./_images/projects-provisioning-projects-project-dashboard.png) @@ -18,27 +18,11 @@ To launch your backend, click the **Open** button on the Project Dashboard next ![Backend Application](./_images/projects-project-ui-walkthrough-backend-application.png) -### Frontend -To launch a frontend, click the **Open** button on the Project Dashboard next to the frontend name. The App Builder opens in a new browser tab. - -![App Builder](./_images/projects-project-ui-walkthrough-app-builder.png) - -If you have more than one frontend, click the down arrow next to the current frontend name. This displays a list of all your frontends. - -![Frontend List](./_images/projects-project-ui-walkthrough-dashboard-frontend-list2.png) - -Select the frontend you want to work with and click the **Open** button. The App Builder opens in a new browser tab. - ### All Environments The **All Environments** area provides information about your project roles, authorization profiles, file storage size, and database information for your backend application. You will only see this area if you have a backend application. ![All Environments](./_images/projects-project-ui-walkthrough-all-environments.png) -### Frontends Utilization -The **Frontends Utilization** area provides information about the assets, layouts, libraries, pages, etc., used by your frontend applications. - -![Frontend Utilization](./_images/projects-project-ui-walkthrough-frontend-utilization.png) - ### Quotas The **Quotas** area provides usage data and limits on different aspects of your project, such as the environment limit, number of team members, client user apps, and database rows. You can also access your **Billing** information. @@ -49,11 +33,6 @@ To manage your **Billing** information, click the **Manage** link next to the qu ### Team To manage your project Team, click the **Manage** link next to the team heading. A page opens with information about your current project's team members. -### Latest Deployments -The **Latest Deployments** area provides information about your frontend deployments over the last week. The date and time of deployment, the current application version, and the project name are all displayed. - -![Deployments](./_images/projects-project-ui-walkthrough-deployments.png) - ### Current Plan If you want to change your current plan, click on the **Change** link next to the **Current Plan** heading. A dialog box opens and displays available plans and your existing plan. @@ -77,11 +56,6 @@ The **Backend** link opens a page with information about your backend, such as t For more information, see [Backend](projects-backend-ui.md). -### Frontends -The **Frontends** link opens a page listing your frontends and deployment information for each frontend. - -For more information, see [Frontend](projects-frontend-ui.md). - ### Team The **Team** link opens a page with information on your project's team members. diff --git a/docs/projects/8basehome/projects/projects-frontend-creation.md b/docs/projects/8basehome/projects/projects-frontend-creation.md deleted file mode 100644 index 010037e..0000000 --- a/docs/projects/8basehome/projects/projects-frontend-creation.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: 'projects-frontend-creation' -sidebar_label: 'Creating a New Frontend' -slug: '/8basehome/projects/projects-frontend-creation' ---- -# Creating a New Frontend - -You can add a new frontend to your project in the **Project Dashboard** or the **Frontends** page. - -1. There are two ways to get started: - - In the Project Dashboard, go to the Frontends list. Click the down arrow next to the current frontend name. A list of all your frontends displays. Click **Add New Frontend** at the bottom of the list. - ![Add Frontend](_images/ui_dashboard_newfrontend_dash.png) - - On the Frontends page, click the **Add Frontend** button in the upper left corner of the page. - ![Add Frontend](_images/ui_dashboard_newfrontend_list.png) -2. A dialog box opens. Type in a name for your frontend. -3. Choose one of the following options: - - **Jumpstart with Accelerators**: Your Frontend will have pre-built services and components such as authentication, user management, and notifications. - - **Build from Scratch**: Your Frontend will be empty. -4. If you choose **Build from Scratch**, you need to select an authentication method: - - **In-App Authentication**: Your application will control and manage the entire authentication process. This option is ideal for tailored experiences. - - **Hosted Authentication**: Your application will have a cloud-hosted authentication interface, maintained and secured by 8base. - - **DIY Authentication**: You will design your authentication process from the ground up. You can also choose to have no authentication. - ![Frontend creation dialog box](_images/ui_dashboard_newfrontend_dialogbox.png) -5. Click **Create**. A dialog box opens, showing Frontend creation progress. -6. The dialog box closes once your new frontend is ready. - -Your new frontend displays in the frontend drop-down list on the **Project Dashboard** -and the **Frontend Listing** page. - -## Related Articles - -- [Authentication](../../backend/8base-console-authentication.md) -- [Jumpstart with Accelerators](../../gettingstarted/jumpstart/jumpstart.md) - - diff --git a/docs/projects/8basehome/projects/projects-frontend-ui.md b/docs/projects/8basehome/projects/projects-frontend-ui.md deleted file mode 100644 index 2430b38..0000000 --- a/docs/projects/8basehome/projects/projects-frontend-ui.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: 'projects-frontend-ui' -sidebar_label: 'Frontend' -slug: '/8basehome/projects/projects-frontend-ui' ---- -# Frontend - -The **Frontend** page shows your different frontend applications. - -![Frontend Details](./_images/projects-project-ui-frontendpage.png) - -Each frontend table will list pages, layouts, resources, requests, functions, custom states, assets, and CDN. You can also see when the frontend was deployed. - -Click **Open Frontend** to open a specific frontend in a new browser tab. - -To learn about creating new frontends, see [Creating a New Frontend](projects-frontend-creation.md). - diff --git a/docs/projects/8basehome/projects/projects-index.md b/docs/projects/8basehome/projects/projects-index.md index 6193609..e6861dc 100644 --- a/docs/projects/8basehome/projects/projects-index.md +++ b/docs/projects/8basehome/projects/projects-index.md @@ -4,14 +4,16 @@ sidebar_label: 'Projects' slug: '/8basehome/projects' --- # Projects -Projects are the container or workspace where you can develop and manage your applications. This section explains the differnet elements of your projects. + +Projects are the container or workspace where you can develop and manage your work. All 8base projects are managed via the 8base Management Console, a secure web portal requiring an 8base account and a modern web browser. + +Projects benefit from scalable server-less GraphQL API, fully managed MySQL Database hosted on AWS. You can leverage additional services like authentication, authorization, and file storage, all supported by the 8base team and community. This section contains: -- [Creating a New Project](creating-projects.md): Learn how to create your first Backend-Only or Full-Stack project. -- [Project Dashboard Walkthrough](projects-dashboard-walkthrough.md): Learn about different parts of the Project Dashboard, where you can find information about your quotas, team members, payment plans, frontends, and backends. +- [Creating a New Project](creating-projects.md): Learn how to create your first project. +- [Project Dashboard Walkthrough](projects-dashboard-walkthrough.md): Learn about different parts of the Project Dashboard, where you can find information about your quotas, team members, payment plans, and backends. - [Backend](projects-backend-ui.md): Learn about the Backend details page. -- [Frontend](projects-frontend-ui.md): Learn about the Frontend details page. - [Project Team Management](projects-team-management.md): Learn about inviting and managing team members. - [Project Billing](projects-billing.md): Learn how to view and manage your payment details and plans. - [Settings](projects-settings.md): Learn about your project settings, such as name, description, and icon. \ No newline at end of file diff --git a/docs/projects/8basehome/projects/projects-team-management.md b/docs/projects/8basehome/projects/projects-team-management.md index c4e26c4..b6ff0a2 100644 --- a/docs/projects/8basehome/projects/projects-team-management.md +++ b/docs/projects/8basehome/projects/projects-team-management.md @@ -36,7 +36,7 @@ Deleting a team member will **only** disassociate a developer from the current p ## Team Member Roles and Permissions -For information about creating new roles and managing permissions, see [Roles and Permissions](../../backend/8base-console-roles-and-permissions.md). +For information about creating new roles and managing permissions, see [Roles and Permissions](../../backend/app-services/roles-and-permissions.md). ## Differences between Team Members and App Users diff --git a/docs/projects/backend/_images/relaxed-coder.png b/docs/projects/_images/relaxed-coder.png similarity index 100% rename from docs/projects/backend/_images/relaxed-coder.png rename to docs/projects/_images/relaxed-coder.png diff --git a/docs/projects/backend/8base-console-authentication.md b/docs/projects/backend/8base-console-authentication.md deleted file mode 100644 index cd1bf11..0000000 --- a/docs/projects/backend/8base-console-authentication.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: '8base-console-authentication' -sidebar_label: 'Authentication' -redirect_from: '/backend/authentication' -slug: '/projects/backend/authentication' ---- - -# Authentication - -Every 8base workspace initializes with native support for signing up, managing, and authorizing your application's Users. This feature eliminates the requirement of managing emails and passwords or social sign-on providers without compromising on access to your user data. - -## Understanding Authentication - -![Authentication flow diagram](./_images/authorization_graphic.svg) - -While 8base simplifies the process of setting up authentication, it's important to still have a basic understanding of what's going on under the hood! Using the diagram above, we can get a clear picture of how the authentication flow works. - -### 1. Login / Signup - -It's important to understand that 8base does **not** store or manage passwords. All login credentials get stored with an auth provider, which means that only an auth provider can login or register a user! Therefore, 8base allows you to use GraphQL Mutations or a _Hosted Login Page_ to send a user's credentials to auth providers, However, it's the auth provider's system that will validate a user's credentials and identity. - -### 2. Issuance - -When an auth provider authenticates a user, it issues an `idToken`. Think of the `idToken` as a temporary passport that contains information about the user that authenticated. This `idToken` get's returned to the front-end application. It can be stored and used to authenticate API requests made to an 8base workspace. - -_To dive deeper into idTokens (JSON Web Tokens), please visit [https://jwt.io/](https://jwt.io/)_ - -### 3. User Query - -**Simply authenticating a user doesn't add them to a workspace's _Users_ table in 8base**. However, using the `idToken`, an authenticated request can be sent to the workspace API and check whether the token's user exists. To authenticate that request, the token only needs to be added as a _Bearer_ token in the authorization header. - -For example, if you're using JavaScript `fetch` to handle the request, your script might look something like the following. - -```javascript -fetch('8BASE_WORKSPACE_API_ENDPOINT', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${idToken}`, - }, - body: JSON.stringify({ query: '{ user { id } }' }), -}) - .then(userExistsCallback) - .catch(userDoesntExistCallback); -``` - -### 4. Verification - -When 8base receives an authorized API request (a request containing an `idToken`) it validates that token with the issuing auth provider. 8base handles this step using data that's encoded in the `idToken`. This way, a fraudulent token is detected and discarded before any sensitive data is accessed. - -### 5. Validation - -Once the auth provider validates that the `idToken` – and the user claiming the token – are authentic, it let's 8base know. 8base now can confidently extract the user's primary identifier from the token (for example, email address) and query an existing record in the _Users_ table. - -### 6. Query Response - -If the query runs successfully and a user record is returned, great! Just ensure to continue sending the `idToken` in the authorization header on future API calls. - -If the query **fails and a user record is not found**, we simply need to create a record for the new user. This can be accomplished using the [`userSignUpWithToken`](#mutation-usersignupwithtoken), as seen below. - -```javascript -mutation { - userSignUpWithToken( - authProfileId: "8BASE_AUTHENTICATION_PROFILE_ID" - /* if not specified - will be executed with the - first auth profile in authenticationProfilesList */ - user: { - email: "my@email.co" - // ...any other user data - } - ) { - id - } -} -``` - -## Authentication Types - -Under the hood, 8base utilizes [Amazon Cognito](https://aws.amazon.com/cognito/) by default to manage your user's identities and ensure the best security standards. All user accounts are by default stored in an AWS account that's managed by 8base. For upgraded workspace plans, the option of connecting one's Auth0 account or an OpenID provider is available. - -### 8base Authentication - -To create an _Authentication Profile_, navigate to the `App Services > Authentication` and press the `+` button. The form that appears can be completed using the following fields. - -- **Name**: A name that describes what this profile does. In this sample case, you can replace My Auth in the screen shot above with a name like Guest User Auth. - -- **Type**: Select `8base Authentication` - -- **Self Signup**: `Open to all` allows users to self-register. Otherwise, you can restrict access to only invited users (`Off`) or users within a specific domain (`Specific Email Domain Only` i.e., '@company.com'). - -- **Roles**: Roles can be either Guest, Administrator, or any custom role. Multiple-roles can be selected. - -#### Client information - -An authentication profile's corresponding client-side information is generated once created. Client-side information allows for connecting client applications to the 8base back-end and any corresponding authentication settings. - -`Client ID` and `Domain` are **not** sensitive strings and are added to one or more client apps. - -`Login URL` is the auto-generated URL template leading to the Hosted Login Page. You should fill this with one of the `Allowed Callbacks URLs`. - -#### Configure Callback URLs - -A callback URL is an endpoint that is invoked after a user authenticates. Users are not able to log into an application and will receive an error if this field is left empty. By default, the callback URL `http://localhost:3000/auth/callback` is set. Keep it, or replace it with an existing URL from your application. - -#### Configure Logout URLs - -The logout URL is where a user is sent after logging out. Specify it in the Allowed Logout URLs field. The default logout URL is `http://localhost:3000/logout` and attempting to log out when no logout URL was provided displays an error. - -### Your Own Auth0 Account - -There are only a few steps required to set up your Auth0 account on 8base. First, navigate to the `App Services > Authentication` of your workspace and create a new _Authentication Profile_. In the form that appears, select _Your Auth0 Account_. - -All required information is in the settings of your Auth0 account. - -![Connecting your Auth0 account](./_images/auth-own-auth0.png) - -### OpenID Connect - -The ability to set up an authentication provider that supports the OpenID specification is available for workspaces with a paid plan. - -In the 8base Management Console, you're able to configure one or more authentication providers under `App Services > Authentication`. Click the "+" button and fill out the provider form, select _OpenID_ as the type and add an OpenID Provider URL. Once completed, the record is saved to your _Authentication Profiles_. - -![Adding an OpenID Authentication Provider in 8base](./_images/openid-settings.png) - -#### getToken Resolver - -A custom _getToken_ resolver mutation function must be deployed to the workspace. This can be done by installing the [8base CLI](./development-tools/cli). - -In the provided _getToken_ function, the relevant environment variables are accessed - if set in the Management Console - to provide the required credentials and configurations. A request is then made to the authentication provider to query or create the authenticating user from the database and return the user's token. - -```yaml -functions: - getToken: - handler: - code: src/getToken.ts - type: resolver - schema: src/getToken.graphql -``` - -```javascript -const { URLSearchParams } = require('url'); -const fetch = require('node-fetch'); -const gql = require('graphql-tag'); -const jwtDecode = require('jwt-decode'); - -const APP_ID_CLIENT_ID = process.env.APP_ID_CLIENT_ID; -const APP_ID_TENANT_ID = process.env.APP_ID_TENANT_ID; -const APP_ID_SECRET = process.env.APP_ID_SECRET; -const APP_ID_URL = process.env.APP_ID_URL; -const TOKEN_PATH = '/token'; - -const CLIENT_REDIRECT_URI = process.env.CLIENT_REDIRECT_URI; - -const CURRENT_USER_QUERY = gql` - query CurrentUser { - user { - id - email - } - } -`; - -const USER_SIGN_UP_MUTATION = gql` - mutation UserSignUp($user: UserCreateInput!, $authProfileId: ID) { - userSignUpWithToken(user: $user, authProfileId: $authProfileId) { - id - email - } - } -`; - -export default async (event: any, context: any) => { - const body = new URLSearchParams(); - - body.append('grant_type', 'authorization_code'); - body.append('code', event.data.code); - body.append('client_id', APP_ID_CLIENT_ID); - body.append('redirect_uri', CLIENT_REDIRECT_URI); - - let token; - let email; - - try { - let tokenResponse = await fetch(`${APP_ID_URL}${APP_ID_TENANT_ID}/${TOKEN_PATH}`, { - body, - headers: { - 'Authorization': 'Basic ' + Buffer.from(`${APP_ID_CLIENT_ID}:${APP_ID_SECRET}`).toString('base64'), - 'Content-Type': 'application/x-www-form-urlencoded' - 'Accept': 'application/json', - }, - method: 'post', - }); - - ({ id_token: token } = await tokenResponse.json()); - - try { - await context.api.gqlRequest(CURRENT_USER_QUERY, {}, { - authorization: token, - }); - } catch (e) { - ({ email } = jwtDecode(token)); - - await context.api.gqlRequest(USER_SIGN_UP_MUTATION, { - user: { - email, - }, - authProfileId: event.data.authProfileId, - }, { - authorization: token, - }); - } - } catch (e) { - console.log(e); - throw Error('Authorization Error'); - } - - return { - data: { - token, - }, - }; -}; -``` - -```javascript -type TokenResult { - token: String! -} - -extend type Mutation { - getToken(code: String!, authProfileId: ID!): TokenResult -} - -``` - -#### Setting Environment Variables - -To set environment variables that can be accessed from within custom functions, open up your workspace, and navigate to `Settings > Environment Variables`. Here, any key-value pair may be securely stored and accessed from within your functions at `process.env.`. - -![Environment variables manager in the 8base Management Console](./_images/openid-env-variables.png) - -## Troubleshooting - -### 1: 'Not Authorized' error - -If you're unable to get the authentication provider to work and are receiving a `Not Authorized` error message, you may need to update the associated role and its API permissions. You can do this by first ensuring that the configured provider has an associated role, like _Guest_. Next, navigate to `App Services > Roles > [ROLE_NAME] > Data` and ensure that the role is enabled for the _Get Token_ function call. - -### 2: Mismatch between auth provider user pool and 8base Users table - -Make sure you keep _Users_ table records in 8base up to date with records in your authentication provider user pool. Let's say you are using Custom Auth0 and have manually changed the email for some _User_ record in 8base. This will lead to an authentication error because the email (primary identifier) from the Auth0 token and email from the existing _User_ record are different. diff --git a/docs/projects/backend/8base-console-graphql-api-queries-related-record-query.md b/docs/projects/backend/8base-console-graphql-api-queries-related-record-query.md deleted file mode 100644 index 8af3f19..0000000 --- a/docs/projects/backend/8base-console-graphql-api-queries-related-record-query.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: '8base-console-graphql-api-queries-related-record-query' -sidebar_label: 'Related Record Query' -redirect_from: '/backend/graphql-api/queries/related-record-query' -slug: '/projects/backend/graphql-api/queries/related-record-query' ---- - -# Related Record Query - -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ - -## Fetching related table records - -Query a single record and return data from related tables in the response. - -
-
- - -```javascript -query { - post(title: "Awesome Possum") { - title - author { - name - avatar { - downloadUrl - } - } - } -} -``` - -
-
- - -```json -{ - "data": { - "post": { - "title": "Awesome Possum", - "author": { - "name": "Huxley", - "avatar": { - "downloadUrl": "https://linktomy.downloadUrl/forA/amazingAvatar.jpg" - } - } - } - } -} -``` - -
-
diff --git a/docs/projects/backend/8base-console-platform-tools-advanced-advanced-introspection.md b/docs/projects/backend/8base-console-platform-tools-advanced-advanced-introspection.md index 31ab098..53fec49 100644 --- a/docs/projects/backend/8base-console-platform-tools-advanced-advanced-introspection.md +++ b/docs/projects/backend/8base-console-platform-tools-advanced-advanced-introspection.md @@ -1,8 +1,8 @@ --- id: '8base-console-platform-tools-advanced-advanced-introspection' sidebar_label: 'Advanced Introspection' -redirect_from: '/backend/console/advanced-introspection' -slug: '/projects/backend/console/advanced-introspection' +redirect_from: '/projects/backend/console/advanced-introspection' +slug: '/backend/console/advanced-introspection' --- # Advanced Introspection @@ -17,9 +17,7 @@ Retrieving your schema is a two-step process. **Step 1.** Paste the following query into the left pane of the API Explorer to retrieve introspection information about your schema. -
-
- +**Request** ```javascript query Introspection { @@ -31,9 +29,7 @@ query Introspection { } ``` -
-
- +**Result** ```json { @@ -48,13 +44,14 @@ query Introspection { } ``` -
-
+ The response returns a very long URL. -_Note: The URL provided in this example is truncated and is for demonstration purposes only._ -

+:::note +The URL provided in this example is truncated and is for demonstration purposes only. +::: + **Step 2.** Copy the URL returned in the response and paste it into a browser window; this will download a JSON file. @@ -68,9 +65,7 @@ You can query your schema interactively to learn more about the data types and o Running the following query returns the kind and name of the different data types. -
-
- +**Request** ```javascript query qSchema { @@ -83,9 +78,7 @@ query qSchema { } ``` -
-
- +**Result** ```json { @@ -126,16 +119,13 @@ query qSchema { } ``` -
-
+ You can query for multiple type properties such as name, kind, and description. Running the following query returns the kind, name, and description of the different data types. -
-
- +**Request** ```javascript query qSchema { @@ -149,9 +139,7 @@ query qSchema { } ``` -
-
- +**Result** ```json { @@ -199,16 +187,13 @@ query qSchema { } ``` -
-
+ You can also query for the available fields in your schema. Running the following query returns a list of fields, which includes the field name and type properties. -
-
- +**Request** ```javascript query qSchema { @@ -228,9 +213,7 @@ query qSchema { } ``` -
-
- +**Result** ```json { @@ -281,8 +264,7 @@ query qSchema { } ``` -
-
+ ## Managing Introspection Settings @@ -294,9 +276,7 @@ Running the following query will check the environment settings for your introsp The response returns a null value if your environment settings are not set up. -
-
- +**Request** ```javascript query ReadSettings { @@ -308,9 +288,7 @@ query ReadSettings { } ``` -
-
- +**Result** ```json { @@ -324,8 +302,7 @@ query ReadSettings { } ``` -
-
+ ### Turning Introspection Off and On @@ -337,9 +314,7 @@ The mutation name can be anything, but it should be something that describes wha Running the following mutation will turn off introspection. -
-
- +**Request** ```javascript mutation mName { @@ -355,9 +330,7 @@ mutation mName { } ``` -
-
- +**Result** ```json { @@ -371,14 +344,11 @@ mutation mName { } ``` -
-
+ Attempting to query the schema after introspection has been turned off will display an error. -
-
- +**Request** ```javascript query qSchema { @@ -391,9 +361,7 @@ query qSchema { } ``` -
-
- +**Result** ```json { @@ -410,16 +378,13 @@ query qSchema { } ``` -
-
+ #### Turning Introspection On Running the following mutation will turn introspection on. -
-
- +**Request** ```javascript mutation mutationName { @@ -435,9 +400,7 @@ mutation mutationName { } ``` -
-
- +**Result** ```json { @@ -451,5 +414,4 @@ mutation mutationName { } ``` -
-
+ diff --git a/docs/projects/backend/8base-console-platform-tools-advanced.md b/docs/projects/backend/8base-console-platform-tools-advanced.md index a61e858..5d0785a 100644 --- a/docs/projects/backend/8base-console-platform-tools-advanced.md +++ b/docs/projects/backend/8base-console-platform-tools-advanced.md @@ -1,12 +1,20 @@ --- id: '8base-console-platform-tools-advanced' sidebar_label: 'Advanced' -redirect_from: '/backend/console/advanced' -slug: '/projects/backend/console/advanced' +slug: '/advanced' --- - # Advanced -8base offers advanced backend features that help developers interact with their schemas. +8base offers advanced features that help developers interact with their schemas and functions. + +The Command-line Interface \(CLI\) allows you to develop and deploy custom backend logic in JavaScript or TypeScript. Need to run a custom algorithm, connect to a 3rd-party API, or execute a task on schedule? The CLI lets you deploy this logic in seconds to 8base serverless environment where it is executed and scaled automatically. + +![8base CLI](./_images/c890144-screenshot_2019-05-12_09.23.51.png) + +The 8base SDK and Boost UI Kit provide a set of open-source libraries and UI components that simplify and accelerate front-end development. Libraries and UI components are pre-integrated with the 8base API to enable useful features, such as automatically applying client-side validation to form fields based on your data schema, seamless file uploads and more. + +Here's a brief overview of the subsections you will find: +- [Command Line Interface (CLI)](development-tools-cli-readme.md): Learn how to use the terminal to develop and deploy custom backend logic in JavaScript or TypeScript. +- [JavaScript SDK](development-tools-sdk-readme.md): Learn about the tools and libraries designed to simplify the integration of 8base services into your application. - [Advanced Introspection](8base-console-platform-tools-advanced-advanced-introspection.md): Learn about how GraphQL Introspection allows you to query the database system to understand the operations you can perform on your schema. diff --git a/docs/projects/backend/8base-console-platform-tools-api-explorer.md b/docs/projects/backend/8base-console-platform-tools-api-explorer.md index e759a48..7a8411b 100644 --- a/docs/projects/backend/8base-console-platform-tools-api-explorer.md +++ b/docs/projects/backend/8base-console-platform-tools-api-explorer.md @@ -1,15 +1,15 @@ --- id: '8base-console-platform-tools-api-explorer' sidebar_label: 'API Explorer' -redirect_from: '/backend/console/api-explorer' -slug: '/projects/backend/console/api-explorer' +slug: '/backend/api-explorer/' --- - # API Explorer The API Explorer is an in-browser IDE for exploring a workspace's GraphQL API. It allows 8base developers to easily build and execute GraphQL queries from within the workspace. -The API Explorer makes use of your **real, live production data!** +The API Explorer makes use of your real, live production data. + +![API Explorer](_images/ui_API_Explorer.png) ## Introspection @@ -17,7 +17,7 @@ A GraphQL schema has a built-in introspection system that publishes the schema To try this for yourself, copy and paste the following code into the textarea in the API Explorer. -```javascript +```graphql query { user } diff --git a/docs/projects/backend/8base-console-platform-tools-ci-cd.md b/docs/projects/backend/8base-console-platform-tools-ci-cd.md index e3846c1..d7e8531 100644 --- a/docs/projects/backend/8base-console-platform-tools-ci-cd.md +++ b/docs/projects/backend/8base-console-platform-tools-ci-cd.md @@ -1,7 +1,7 @@ --- id: '8base-console-platform-tools-ci-cd' sidebar_label: 'Continuous Integration and Continuous Deployment (CI/CD)' -redirect_from: '/backend/console/ci-cd' +redirect_from: '/projects/backend/console/ci-cd' slug: '/backend/console/ci-cd' --- # Continuous Integration and Continuous Deployment (CI/CD) @@ -50,7 +50,9 @@ To delete an environment, run the following command - keeping in mind the _Maste 8base environment delete -n [BRANCH_NAME] ``` -_**Note: For a list of all environment commands with their associated options, run `8base environment --help` in your terminal.**_ +:::note +For a list of all environment commands with their associated options, run `8base environment --help` in your terminal. +::: ## Generating Migrations @@ -86,7 +88,9 @@ Once a migration has been generated, you'll be able to commit it so that the cha If you are committing changes to the master branch, you will be prompted to confirm the changes. Otherwise, the commit will take place without any confirmation. -_**Note: For a list of all migration commands with their associated options, run `8base migration --help` in your terminal.**_ +:::note +For a list of all migration commands with their associated options, run `8base migration --help` in your terminal. +::: ## Handling Backups diff --git a/docs/projects/backend/8base-console-platform-tools-readme.md b/docs/projects/backend/8base-console-platform-tools-readme.md index e7997db..3575eab 100644 --- a/docs/projects/backend/8base-console-platform-tools-readme.md +++ b/docs/projects/backend/8base-console-platform-tools-readme.md @@ -1,41 +1,5 @@ --- id: '8base-console-platform-tools-readme' -redirect_from: '/projects/backend/tools' -slug: '/projects/backend/tools' +# redirect_from: '/projects/backend/tools' +# slug: '/projects/backend/tools' --- - -# Platform Tools - -8base allows developers to easily launch and manage scalable cloud infrastructures. The platform runs in a serverless, scalable and secure cloud environment powered by AWS and makes it trivial to manage data, files, users, permissions and other features commonly required by modern web and mobile applications. - -The 8base platform consists of the following high-level components. - -## Data Builder - -The Data Builder lets you define an applications data model: tables, fields and relationships between tables. It is packed with cool features. For example, `File` fields allow you to seamlessly attach files to data objects, while `Smart` fields make it easy to implement complex validations for addresses and phone numbers. - -## Data Viewer - -The Data Viewer lets you view and modify data in an table inspired interface. This is useful for admins needing to browse and modify the data, or enter sample content while in development. - -## [Role-based Security](/projects/backend/authentication) - -![Role-based security manager](./_images/2b505e4-fireshot_capture_010_-_8base_-_app.8base.com.png) - -Role-based security lets you define custom roles with granular access controls. You can specify which tables and fields a role can read, modify or delete. You can even apply custom filters, such as giving users access only to records they created. - -## [GraphQL API](/projects/backend/graphql-api) - -![8base GraphQL Explorer](./_images/51fbda9-fireshot_capture_009_-_8base_-_app.8base.com.png) - -The GraphQL API is generated automatically from the data model you define. It gives power to front-end developers to query and modify the data in ways that were traditionally available only to back-end developers. It comes with robust filters, sorting, pagination, full-text search and is secured using the role-based security. - -## [CLI](/projects/backend/development-tools/cli) - -![8base CLI](./_images/c890144-screenshot_2019-05-12_09.23.51.png) - -The Command-line Interface \(CLI\) allows you to develop and deploy custom backend logic in JavaScript or TypeScript. Need to run a custom algorithm, connect to a 3rd-party API, or execute a task on schedule? The CLI lets you deploy this logic in seconds to 8base serverless environment where it is executed and scaled automatically. - -## [Client Tools](/projects/backend/development-tools/sdk) - -The 8base SDK and Boost UI Kit provide a set of open-source libraries and UI components that simplify and accelerate front-end development. Libraries and UI components are pre-integrated with the 8base API to enable useful features, such as automatically applying client-side validation to form fields based on your data schema, seamless file uploads and more. diff --git a/docs/projects/backend/8base-console-readme.md b/docs/projects/backend/8base-console-readme.md index 1de56f5..bf441cd 100644 --- a/docs/projects/backend/8base-console-readme.md +++ b/docs/projects/backend/8base-console-readme.md @@ -1,15 +1,12 @@ --- id: '8base-console-readme' -sidebar_label: 'Management Console' -redirect_from: '/backend/backend' -slug: '/projects/backend/backend' +# sidebar_label: 'Management Console' +# slug: '/projects/backend/backend' --- # Management Console -The 8base Management Console is where you manage all backend resources, like Data Models, Roles and Permissions, Users, API Tokens, and more. It's a secure, easy-to-access and beautifully designed web portal that can be accessed from any computer, allowing teams to collaborate and build all types of applications. -To get started quickly with the 8base Management Console, all you'll need is [an 8base account](https://app.8base.com) and a modern web browser. -![ ](./_images/relaxed-coder.png) + diff --git a/docs/projects/backend/_images/create-api-token.png b/docs/projects/backend/_images/create-api-token.png deleted file mode 100644 index 630bc08..0000000 Binary files a/docs/projects/backend/_images/create-api-token.png and /dev/null differ diff --git a/docs/projects/backend/_images/role-permissions-apps.png b/docs/projects/backend/_images/role-permissions-apps.png deleted file mode 100644 index 5eba769..0000000 Binary files a/docs/projects/backend/_images/role-permissions-apps.png and /dev/null differ diff --git a/docs/projects/backend/_images/role-permissions-data.png b/docs/projects/backend/_images/role-permissions-data.png deleted file mode 100644 index 9e4bda5..0000000 Binary files a/docs/projects/backend/_images/role-permissions-data.png and /dev/null differ diff --git a/docs/projects/backend/_images/roles-and-permissions-custom-filter-create.png b/docs/projects/backend/_images/roles-and-permissions-custom-filter-create.png deleted file mode 100644 index d1fa94e..0000000 Binary files a/docs/projects/backend/_images/roles-and-permissions-custom-filter-create.png and /dev/null differ diff --git a/docs/projects/backend/_images/51fbda9-fireshot_capture_009_-_8base_-_app.8base.com.png b/docs/projects/backend/_images/ui_API_Explorer.png similarity index 100% rename from docs/projects/backend/_images/51fbda9-fireshot_capture_009_-_8base_-_app.8base.com.png rename to docs/projects/backend/_images/ui_API_Explorer.png diff --git a/docs/projects/backend/_images/user-admin-1.png b/docs/projects/backend/_images/user-admin-1.png deleted file mode 100644 index 68b2b55..0000000 Binary files a/docs/projects/backend/_images/user-admin-1.png and /dev/null differ diff --git a/docs/projects/backend/app-services/_images/authentication-dashboard.png b/docs/projects/backend/app-services/_images/authentication-dashboard.png new file mode 100644 index 0000000..c68dfe6 Binary files /dev/null and b/docs/projects/backend/app-services/_images/authentication-dashboard.png differ diff --git a/docs/projects/backend/app-services/_images/create-api-token.png b/docs/projects/backend/app-services/_images/create-api-token.png new file mode 100644 index 0000000..08e0b60 Binary files /dev/null and b/docs/projects/backend/app-services/_images/create-api-token.png differ diff --git a/docs/projects/backend/_images/create-role.png b/docs/projects/backend/app-services/_images/create-role.png similarity index 100% rename from docs/projects/backend/_images/create-role.png rename to docs/projects/backend/app-services/_images/create-role.png diff --git a/docs/projects/backend/_images/delete-role.png b/docs/projects/backend/app-services/_images/delete-role.png similarity index 100% rename from docs/projects/backend/_images/delete-role.png rename to docs/projects/backend/app-services/_images/delete-role.png diff --git a/docs/projects/backend/app-services/_images/role-permissions-apps.png b/docs/projects/backend/app-services/_images/role-permissions-apps.png new file mode 100644 index 0000000..4abb190 Binary files /dev/null and b/docs/projects/backend/app-services/_images/role-permissions-apps.png differ diff --git a/docs/projects/backend/app-services/_images/role-permissions-data.png b/docs/projects/backend/app-services/_images/role-permissions-data.png new file mode 100644 index 0000000..768e22b Binary files /dev/null and b/docs/projects/backend/app-services/_images/role-permissions-data.png differ diff --git a/docs/projects/backend/_images/role-permissions-users.png b/docs/projects/backend/app-services/_images/role-permissions-users.png similarity index 100% rename from docs/projects/backend/_images/role-permissions-users.png rename to docs/projects/backend/app-services/_images/role-permissions-users.png diff --git a/docs/projects/backend/_images/roles-index.png b/docs/projects/backend/app-services/_images/roles-index.png similarity index 100% rename from docs/projects/backend/_images/roles-index.png rename to docs/projects/backend/app-services/_images/roles-index.png diff --git a/docs/projects/backend/app-services/_images/team-admin-1.png b/docs/projects/backend/app-services/_images/team-admin-1.png new file mode 100644 index 0000000..40b4973 Binary files /dev/null and b/docs/projects/backend/app-services/_images/team-admin-1.png differ diff --git a/docs/projects/backend/_images/ua-edit-user.png b/docs/projects/backend/app-services/_images/ua-edit-user.png similarity index 100% rename from docs/projects/backend/_images/ua-edit-user.png rename to docs/projects/backend/app-services/_images/ua-edit-user.png diff --git a/docs/projects/backend/app-services/_images/user-admin-1.png b/docs/projects/backend/app-services/_images/user-admin-1.png new file mode 100644 index 0000000..7e26537 Binary files /dev/null and b/docs/projects/backend/app-services/_images/user-admin-1.png differ diff --git a/docs/projects/backend/8base-console-platform-tools-users.md b/docs/projects/backend/app-services/administer-users.md similarity index 69% rename from docs/projects/backend/8base-console-platform-tools-users.md rename to docs/projects/backend/app-services/administer-users.md index c5294af..4468bfa 100644 --- a/docs/projects/backend/8base-console-platform-tools-users.md +++ b/docs/projects/backend/app-services/administer-users.md @@ -1,15 +1,13 @@ --- -id: '8base-console-platform-tools-users' -sidebar_label: 'Users' -redirect_from: '/backend/console/users' -slug: '/projects/backend/console/users' +id: 'administer-users' +sidebar_label: 'Team and User Administration' +slug: '/backend/app-services/administer-users' --- +# Team and User Administration -# Users +You can view and manage both app users and team members. You can also find insights into how app users are engaging with your application. -8base's [User Administration](https://app.8base.com/users/app-users) provides the ability to easily view and manage both App User's and Team Members. It also provides some basic insights into how App Users are engaging with your application. - -![User administration screen](./_images/user-admin-1.png) +![Team administration screen](./_images/team-admin-1.png) ## Users @@ -46,7 +44,7 @@ By default, the Users table has the following fields defined. When a Team Member gets invited to a workspace, two separate user records are created for them. The first record is their _Team Member Record_ and the second is their _App User Record_. -This is an important distinction to be understood. The roles that get added to the _Team Member User_ record determine which permissions the developer has within the Management Console. The permissions that get added to the _App User Record_ determine which permissions the developer has within the **application being built**. +This is an important distinction. The roles that get added to the _Team Member User_ record determine which permissions the developer has within the Management Console. The permissions that get added to the _App User Record_ determine which permissions the developer has within the **application being built**. If the developer wants to test the application as if their account only had the "Guest" role, they can do so by updating their _App User Record_ with the desired role. However, only the workspace administrator is able to update and edit roles belonging to _Team Member Users_. @@ -56,11 +54,11 @@ When a user signs up for your application (or is added manually), a role can be Currently, it is required that users sign up with a valid email address. When using 8base Authentication, a confirmation email will be sent to the user. -### Updating User +### Updating Users When inside the [User Administration](https://app.8base.com/users/app-users) user's `firstName`, `lastName`, `email`, and `roles` can be updated. This can be accomplished by clicking `Edit` in the row drop-down and using the popover form as needed. -![User administration screen](./_images/ua-edit-user.png) +![User administration screen](_images/ua-edit-user.png) Many other data points are stored about a user. If you need to update other information about the user, you can do so using the [Data Viewer](https://app.8base.com/data/) where you will have access to all user fields. @@ -68,9 +66,9 @@ Many other data points are stored about a user. If you need to update other info Deleting a user can be done by clicking `delete` in the row drop-down. This action will delete the user record, along with any of its dependent records. -When using [8base Authentication](/projects/backend/authentication#8base-authentication) the user's record will be deleted in both 8base and the authentication provider. When using another authentication provider the user record will **only** be deleted in 8base. +When using [8base Authentication](/backend//app-services/authentication#8base-authentication) the user's record will be deleted in both 8base and the authentication provider. When using another authentication provider the user record will **only** be deleted in 8base. -Please refer to the [Authentication docs](/projects/backend/authentication) to learn more about this. +Please refer to the [Authentication docs](/backend//app-services/authentication) to learn more about this. ## Passwords diff --git a/docs/projects/backend/app-services/app-services-apps.md b/docs/projects/backend/app-services/app-services-apps.md new file mode 100644 index 0000000..9dc3c24 --- /dev/null +++ b/docs/projects/backend/app-services/app-services-apps.md @@ -0,0 +1,8 @@ +--- +id: 'app-services-apps' +# sidebar_label: 'Apps' +# slug: '/backend/app-services/apps' +--- +# Apps + +Write something cool. diff --git a/docs/projects/backend/app-services/app-services-data-permissions.md b/docs/projects/backend/app-services/app-services-data-permissions.md new file mode 100644 index 0000000..9e21543 --- /dev/null +++ b/docs/projects/backend/app-services/app-services-data-permissions.md @@ -0,0 +1,8 @@ +--- +id: 'app-services-data-permissions' +# sidebar_label: 'Data Permissions' +# slug: '/backend/app-services/data-permissions' +--- +# Data Permissions + +Write something cool. diff --git a/docs/projects/backend/app-services/app-services-index.md b/docs/projects/backend/app-services/app-services-index.md new file mode 100644 index 0000000..d20c358 --- /dev/null +++ b/docs/projects/backend/app-services/app-services-index.md @@ -0,0 +1,18 @@ +--- +id: 'app-services-index' +sidebar_label: 'App Services' +slug: '/backend/app-services' +--- +# App Services + +The App Services dashboard is where you control your roles, permissions, and authentication types. + +Role-based security lets you define custom roles with granular access controls. You can specify which tables and fields a role can read, modify or delete. You can even apply custom filters, such as giving users access only to records they created. + +Every 8base workspace initializes with native support for signing up, managing, and authorizing your application's users. This eliminates the need to manage emails and passwords or social sign-on providers without compromising on access to your user data. + +![Roles Management Screen in 8base Console](./_images/user-admin-1.png) + + + + diff --git a/docs/projects/backend/app-services/authentication-8base.md b/docs/projects/backend/app-services/authentication-8base.md new file mode 100644 index 0000000..68dac5f --- /dev/null +++ b/docs/projects/backend/app-services/authentication-8base.md @@ -0,0 +1,36 @@ +--- +id: 'authentication-8base' +sidebar_label: '8base Authentication' +slug: '/backend/app-services/8base-authentication' +--- +# 8base Authentication + +8base authentication is the default option to manage your user's identities and ensure the best security standards. All user accounts are stored in an AWS account that is managed by 8base. + +To create an authentication profile, navigate to `App Services > Authentication` and press the `+` button. The form that appears can be completed using the following fields. + +- **Name**: A name that describes what this profile does. In this sample case, you can replace My Auth in the screen shot above with a name like Guest User Auth. + +- **Type**: Select `8base Authentication` + +- **Self Signup**: `Open to all` allows users to self-register. Otherwise, you can restrict access to only invited users (`Off`) or users within a specific domain (`Specific Email Domain Only` i.e., '@company.com'). + +- **Roles**: Roles can be either Guest, Administrator, or any custom role. Multiple-roles can be selected. + +## Client information + +An authentication profile's corresponding client-side information is generated once created. Client-side information allows for connecting client applications to the 8base back-end and any corresponding authentication settings. + +`Client ID` and `Domain` are **not** sensitive strings and are added to one or more client apps. + +`Login URL` is the auto-generated URL template leading to the Hosted Login Page. You should fill this with one of the `Allowed Callbacks URLs`. + +## Configure Callback URLs + +A callback URL is an endpoint that is invoked after a user authenticates. Users are not able to log into an application and will receive an error if this field is left empty. By default, the callback URL `http://localhost:3000/auth/callback` is set. Keep it, or replace it with an existing URL from your application. + +## Configure Logout URLs + +The logout URL is where a user is sent after logging out. Specify it in the Allowed Logout URLs field. The default logout URL is `http://localhost:3000/logout` and attempting to log out when no logout URL was provided displays an error. + + diff --git a/docs/projects/backend/app-services/authentication-auth0.md b/docs/projects/backend/app-services/authentication-auth0.md new file mode 100644 index 0000000..722637b --- /dev/null +++ b/docs/projects/backend/app-services/authentication-auth0.md @@ -0,0 +1,12 @@ +--- +id: 'authentication-auth0' +sidebar_label: 'Auth0 Integration' +slug: '/backend/app-services/authentication/auth0' +--- +# Auth0 Integration + +There are only a few steps required to set up your Auth0 account on 8base. First, navigate to the `App Services > Authentication` of your workspace and create a new _Authentication Profile_. In the form that appears, select _Your Auth0 Account_. + +All required information is in the settings of your Auth0 account. + +![Connecting your Auth0 account](../_images/auth-own-auth0.png) \ No newline at end of file diff --git a/docs/projects/backend/app-services/authentication-index.md b/docs/projects/backend/app-services/authentication-index.md new file mode 100644 index 0000000..037de1e --- /dev/null +++ b/docs/projects/backend/app-services/authentication-index.md @@ -0,0 +1,91 @@ +--- +id: 'authentication-index' +sidebar_label: 'Authentication' +slug: '/backend/app-services/authentication' +--- +# Authentication + +8base authentication is the default option for all workspaces. Upgraded workspace plans have the option to connect Auth0 accounts or an OpenID provider. + +- **[8base Authentication](authentication-8base.md)**: Running on AWS Cognito, this provides an integrated experience within 8base without additional services. +- **[Auth0](authentication-auth0.md)**: If you have existing authentication schemes with Auth0, you can integrate it into your 8base backend. +- **[OpenID](authentication-openID.md)**: For developers leveraging a compliant service to manage their users' authentication needs. + +![Authentication dashboard](_images/authentication-dashboard.png) + + + +## Login / Signup + +8base does **not** store or manage passwords. All login credentials are stored with an auth provider. This means that only an auth provider can login or register a user! Therefore, 8base allows you to use GraphQL mutations or a _Hosted Login Page_ to send a user's credentials to auth providers. However, it's the auth provider's system that will validate a user's credentials and identity. + +## Issuance + +When an auth provider authenticates a user, it issues an `idToken`. Think of the `idToken` as a temporary passport that contains information about the user that authenticated. This `idToken` get's returned to the front-end application. It can be stored and used to authenticate API requests made to an 8base workspace. + +_To dive deeper into idTokens (JSON Web Tokens), please visit [https://jwt.io/](https://jwt.io/)_ + +## User Query + +**Simply authenticating a user doesn't add them to a workspace's _Users_ table in 8base**. However, using the `idToken`, an authenticated request can be sent to the workspace API and check whether the token's user exists. To authenticate that request, the token only needs to be added as a _Bearer_ token in the authorization header. + +For example, if you're using JavaScript `fetch` to handle the request, your script might look something like the following. + +```javascript +fetch('8BASE_WORKSPACE_API_ENDPOINT', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${idToken}`, + }, + body: JSON.stringify({ query: '{ user { id } }' }), +}) + .then(userExistsCallback) + .catch(userDoesntExistCallback); +``` + +## Verification + +When 8base receives an authorized API request (a request containing an `idToken`) it validates that token with the issuing auth provider. 8base handles this step using data that's encoded in the `idToken`. This way, a fraudulent token is detected and discarded before any sensitive data is accessed. + +## Validation + +Once the auth provider validates that the `idToken` – and the user claiming the token – are authentic, it let's 8base know. 8base now can confidently extract the user's primary identifier from the token (for example, email address) and query an existing record in the _Users_ table. + +## Query Response + +If the query runs successfully and a user record is returned, great! Just ensure to continue sending the `idToken` in the authorization header on future API calls. + +If the query **fails and a user record is not found**, we simply need to create a record for the new user. This can be accomplished using the [`userSignUpWithToken`](#mutation-usersignupwithtoken), as seen below. + +```graphql +mutation { + userSignUpWithToken( + authProfileId: "8BASE_AUTHENTICATION_PROFILE_ID" + /* if not specified - will be executed with the + first auth profile in authenticationProfilesList */ + user: { + email: "my@email.co" + // ...any other user data + } + ) { + id + } +} +``` +## Troubleshooting + +### 'Not Authorized' error + +If you're unable to get the authentication provider to work and are receiving a `Not Authorized` error message, you may need to update the associated role and its API permissions. You can do this by first ensuring that the configured provider has an associated role, like _Guest_. Next, navigate to `App Services > Roles > [ROLE_NAME] > Data` and ensure that the role is enabled for the _Get Token_ function call. + +### Mismatch between auth provider user pool and 8base Users table + +Make sure you keep _Users_ table records in 8base up to date with records in your authentication provider user pool. Let's say you are using Custom Auth0 and have manually changed the email for some _User_ record in 8base. This will lead to an authentication error because the email (primary identifier) from the Auth0 token and email from the existing _User_ record are different. + + + diff --git a/docs/projects/backend/app-services/authentication-openID.md b/docs/projects/backend/app-services/authentication-openID.md new file mode 100644 index 0000000..a3a6cb2 --- /dev/null +++ b/docs/projects/backend/app-services/authentication-openID.md @@ -0,0 +1,129 @@ +--- +id: 'authentication-openID' +sidebar_label: 'OpenID' +slug: '/backend/app-services/authentication/openID' +--- +# OpenID + +The ability to set up an authentication provider that supports the OpenID specification is available for workspaces with a paid plan. + +In the 8base Management Console, you're able to configure one or more authentication providers under `App Services > Authentication`. Click the "+" button and fill out the provider form, select _OpenID_ as the type and add an OpenID Provider URL. Once completed, the record is saved to your _Authentication Profiles_. + +![Adding an OpenID Authentication Provider in 8base](../_images/openid-settings.png) + +## getToken Resolver + +A custom _getToken_ resolver mutation function must be deployed to the workspace. This can be done by installing the [8base CLI](/projects/backend/development-tools/cli). + +In the provided _getToken_ function, the relevant environment variables are accessed - if set in the Management Console - to provide the required credentials and configurations. A request is then made to the authentication provider to query or create the authenticating user from the database and return the user's token. + +```yaml +functions: + getToken: + handler: + code: src/getToken.ts + type: resolver + schema: src/getToken.graphql +``` + +```javascript +const { URLSearchParams } = require('url'); +const fetch = require('node-fetch'); +const gql = require('graphql-tag'); +const jwtDecode = require('jwt-decode'); + +const APP_ID_CLIENT_ID = process.env.APP_ID_CLIENT_ID; +const APP_ID_TENANT_ID = process.env.APP_ID_TENANT_ID; +const APP_ID_SECRET = process.env.APP_ID_SECRET; +const APP_ID_URL = process.env.APP_ID_URL; +const TOKEN_PATH = '/token'; + +const CLIENT_REDIRECT_URI = process.env.CLIENT_REDIRECT_URI; + +const CURRENT_USER_QUERY = gql` + query CurrentUser { + user { + id + email + } + } +`; + +const USER_SIGN_UP_MUTATION = gql` + mutation UserSignUp($user: UserCreateInput!, $authProfileId: ID) { + userSignUpWithToken(user: $user, authProfileId: $authProfileId) { + id + email + } + } +`; + +export default async (event: any, context: any) => { + const body = new URLSearchParams(); + + body.append('grant_type', 'authorization_code'); + body.append('code', event.data.code); + body.append('client_id', APP_ID_CLIENT_ID); + body.append('redirect_uri', CLIENT_REDIRECT_URI); + + let token; + let email; + + try { + let tokenResponse = await fetch(`${APP_ID_URL}${APP_ID_TENANT_ID}/${TOKEN_PATH}`, { + body, + headers: { + 'Authorization': 'Basic ' + Buffer.from(`${APP_ID_CLIENT_ID}:${APP_ID_SECRET}`).toString('base64'), + 'Content-Type': 'application/x-www-form-urlencoded' + 'Accept': 'application/json', + }, + method: 'post', + }); + + ({ id_token: token } = await tokenResponse.json()); + + try { + await context.api.gqlRequest(CURRENT_USER_QUERY, {}, { + authorization: token, + }); + } catch (e) { + ({ email } = jwtDecode(token)); + + await context.api.gqlRequest(USER_SIGN_UP_MUTATION, { + user: { + email, + }, + authProfileId: event.data.authProfileId, + }, { + authorization: token, + }); + } + } catch (e) { + console.log(e); + throw Error('Authorization Error'); + } + + return { + data: { + token, + }, + }; +}; +``` + +```javascript +type TokenResult { + token: String! +} + +extend type Mutation { + getToken(code: String!, authProfileId: ID!): TokenResult +} + +``` + +## Setting Environment Variables + +To set environment variables that can be accessed from within custom functions, open up your workspace, and navigate to `Settings > Environment Variables`. Here, any key-value pair may be securely stored and accessed from within your functions at `process.env.`. + +![Environment variables manager in the 8base Management Console](../_images/openid-env-variables.png) diff --git a/docs/projects/backend/8base-console-roles-and-permissions.md b/docs/projects/backend/app-services/roles-and-permissions.md similarity index 79% rename from docs/projects/backend/8base-console-roles-and-permissions.md rename to docs/projects/backend/app-services/roles-and-permissions.md index 95dfd9b..1a2ae02 100644 --- a/docs/projects/backend/8base-console-roles-and-permissions.md +++ b/docs/projects/backend/app-services/roles-and-permissions.md @@ -1,10 +1,9 @@ --- -id: '8base-console-roles-and-permissions' -sidebar_label: 'Roles And Permissions' -redirect_from: '/backend/roles-and-permissions' -slug: '/projects/backend/roles-and-permissions' +id: 'roles-and-permissions' +sidebar_label: 'Roles and Permissions' +slug: '/backend/app-services/roles-and-permissions' --- -# Roles And Permissions +# Roles and Permissions Authorization in 8base uses a robust roles and permissions system that lets you securely control access to any data resources in a workspace. You use the roles and authorization system to control what users (with roles) are able to access and who is authorized (has permission) to do what. @@ -12,28 +11,30 @@ Authorization in 8base uses a robust roles and permissions system that lets you _Roles_ in 8base are best described as a single identifier for a collection of _permissions_. A user can have one or more _roles_ associated with their account, each of which may allow them to perform zero or more actions. -### View all Roles +### Viewing Roles The _Roles_ Manager can be found in a given workspace by navigating to `App Services > Roles`. In this view, you can find all 8base and customer defined roles associated with the current workspace. By default, all workspaces are created with two default roles; _Administrator_ and _Guest_. - **Administrator** has all permissions enabled by default - **Guest** has no permissions enabled by default -_Note: all roles are fully editable._ +:::note +All roles are fully editable. +::: -![Roles Management Screen in 8base Console](./_images/roles-index.png) +![Roles Management Screen in 8base Console](./_images/user-admin-1.png) -### Create new Role +### Creating Roles Creating a new custom Role is simple. In the Roles Manager view (`App Services > Roles`), click the `+ New Role` button at the bottom of the screen. Add a unique name (required) and a simple description before clicking `Add Role`. You may optionally assign users to the new role in the create form. However, this may also be done at anytime in the future once permissions have been specified. -![Create a new role in the 8base Console](./_images/create-role.png) +![Create a new role in the 8base Console](_images/create-role.png) -### Deleting a Role +### Deleting Roles To delete a role, toggle the ellipsis toggle located at the end of the roles table row. Click the `Delete` option and then confirm your action in the modal. -![Delete a role in the 8base Console](./_images/delete-role.png) +![Delete a role in the 8base Console](_images/delete-role.png) ## Managing Permissions @@ -45,29 +46,35 @@ In the Roles Manager view (`App Services > Roles`), click on the name of a _Role Lists all the data tables in the current workspace. Each table exposes the ability to set Create, Read, Update, Delete (CRUD) and Field permissions using simple controls. If fine-tuned permissions beyond CRUD actions are required, `Custom Filters` on tables and `Custom Access` on fields can be implemented. -![Data permissions in Roles Manager](./_images/role-permissions-data.png) +![Data permissions in Roles Manager](_images/role-permissions-data.png) ### Apps Allows toggling of role permissions for 8base Management Console administration, such as Schema Management, Workspace Settings, Team Administration and more. -![Apps permissions in Roles Manager](./_images/role-permissions-apps.png) +![Apps permissions in Roles Manager](_images/role-permissions-apps.png) + +### Team Members + +Lists all team members that hold the selected role and allows for easy role assignment and de-assignment to specific users. ### Users Lists all users that hold the selected role and allows for easy role assignment and de-assignment to specific users. -_Note: By default, all users are granted the **Guest** role. You may change the name of the Guest role in the edit form._ +:::note +By default, all users are granted the **Guest** role. You may change the name of the Guest role in the edit form. +::: -![Apps permissions in Roles Manager](./_images/role-permissions-users.png) +To learn more about team members and users, see[Team and User Administration](administer-users.md). ## API Tokens While roles can be assigned to users, they can also be assigned to API Tokens. Unlike an `idToken` that is received when a user authenticates and authorizes requests made to the API, API Tokens are static and often used to authorize server-to-server or app-to-server requests. Simply put, API Tokens authorize requests made to the API **without any user context**. -API Tokens can be created in [`Settings > API Tokens`](https://app.8base.com/settings/api-tokens). Note that you can only copy the token on create! So make sure to copy the value and store it securely. The roles associated with the token will enforce which permissions the token has. API Tokens by default have no permissions. +API Tokens can be created in **Settings > API Tokens**. Note that you can only copy the token on create! So make sure to copy the value and store it securely. The roles associated with the token will enforce which permissions the token has. API Tokens by default have no permissions. -![Creating an API Token](./_images/create-api-token.png) +![Creating an API Token](_images/create-api-token.png) ## Advanced @@ -133,7 +140,7 @@ There are 3 dynamic variables that can be used when creating Roles. They are: ### Custom Filters -The best way to write custom filters is by using the API Explorer in conjunction with [Variables](/projects/backend/graphql-api/variables/). The filtered result of any GraphQL query is the scoped record set that can be expected by using the same filter as a role's _Custom Filter_. +The best way to write custom filters is by using the API Explorer in conjunction with [Variables](/backend/graphql-api/variables/). The filtered result of any GraphQL query is the scoped record set that can be expected by using the same filter as a role's _Custom Filter_. For example, imagine that a workspace has both _Posts_ and _Authors_ tables. In the API Explorer, an 8base user wants to query all _Posts_ that belong to _Authors_ under the following criteria: @@ -180,5 +187,3 @@ Query Variable After successfully running this query, the user decides that the filter should be utilized as a custom filter for post updates. That way, only _editors_ would be able to update posts that belong to authors from their own company. To accomplish this, the value of the `filter` key can be pasted into the _Custom Filter_ section of the desired role's update permission. - -![Adding custom filters to roles](./_images/roles-and-permissions-custom-filter-create.png) diff --git a/docs/projects/backend/backend-index.md b/docs/projects/backend/backend-index.md index c5dce33..70e3b7a 100644 --- a/docs/projects/backend/backend-index.md +++ b/docs/projects/backend/backend-index.md @@ -13,12 +13,16 @@ When using 8base, your project benefits from having: - A fully managed MySQL Database that's hosted on AWS ([Aurora MySQL](https://aws.amazon.com/rds/aurora/)). - Ready-to-use app services (Authentication, Authorization, File Storage, and more) +The 8base Management Console is where you manage all backend resources, like Data Models, Roles and Permissions, Users, API Tokens, and more. It's a secure, easy-to-access and beautifully designed web portal that can be accessed from any computer, allowing teams to collaborate and build all types of applications. + +To get started quickly with the 8base Management Console, all you'll need is [an 8base account](https://app.8base.com) and a web browser. + This section provides information about 8base's backend and data capabilities: - [Getting Started](getting-started-readme.md): Learn backend fundamentals such as application structure and workspaces. -- [Management Console](8base-console-readme.md): Learn how to manage backend resources, such as data models, roles and permissions, users, and API tokens, -- [GraphQL API Overview](8base-console-graphql-api-readme.md): Learn how all workspaces in 8base are assigned unique API endpoints. These endpoints handle GraphQL queries, mutations and subscriptions for every data table. +- [Data](data/data-index.md): Learn how to manage backend resources, such as data models, roles and permissions, users, and API tokens. - [Custom Functions](custom-functions/custom-functions-readme.md): Learn about the four types of backend custom functions: resolvers, webhooks, triggers, and tasks. -- [Plugins and Integrations](8base-console-plugins-integrations-readme.md): Learn how to extend 8base using plugins and integrations. -- [Local Development Environment](development-tools-dev-readme.md): Learn about the local development environment, CLI, and JavaScript SDK. +- [GraphQL API Overview](graphql/graphql-api-readme.md): Learn about GraphQL queries, mutations and subscriptions. +- [App Services](app-services/app-services-index.md): Learn how to extend 8base using plugins and integrations. +- [Continuous Integration and Continuous Deployment (CI/CD)](8base-console-platform-tools-ci-cd.md): Learn about creating environments within a backend to manage different stages of development, such as production, staging, and development.managing professional software quality controls when developing applications. diff --git a/docs/projects/backend/custom-functions/custom-functions-debugging.md b/docs/projects/backend/custom-functions/custom-functions-debugging.md index b22bcf1..a724863 100644 --- a/docs/projects/backend/custom-functions/custom-functions-debugging.md +++ b/docs/projects/backend/custom-functions/custom-functions-debugging.md @@ -1,7 +1,7 @@ --- id: 'custom-functions-debugging' sidebar_label: 'Debugging' -redirect_from: '/backend/custom-functions/debugging' +redirect_from: '/projects/backend/custom-functions/debugging' slug: '/backend/custom-functions/debugging' --- # Debugging diff --git a/docs/projects/backend/custom-functions/custom-functions-deployment.md b/docs/projects/backend/custom-functions/custom-functions-deployment.md index 3e49054..2b6eab8 100644 --- a/docs/projects/backend/custom-functions/custom-functions-deployment.md +++ b/docs/projects/backend/custom-functions/custom-functions-deployment.md @@ -1,8 +1,7 @@ --- id: 'custom-functions-deployment' sidebar_label: 'Deployment' -redirect_from: '/backend/custom-functions/custom-functions-deployment' -slug: '/backend/custom-functions/custom-functions-deployment' +slug: '/backend/custom-functions/deployment' --- # Deployment diff --git a/docs/projects/backend/custom-functions/custom-functions-executing-functions.md b/docs/projects/backend/custom-functions/custom-functions-executing-functions.md index 59613b1..7ef1628 100644 --- a/docs/projects/backend/custom-functions/custom-functions-executing-functions.md +++ b/docs/projects/backend/custom-functions/custom-functions-executing-functions.md @@ -1,8 +1,7 @@ --- id: 'custom-functions-executing-functions' sidebar_label: 'Executing Custom Functions' -redirect_from: '/backend/custom-functions/custom-functions-executing-functions' -slug: '/backend/custom-functions/custom-functions-executing-functions' +slug: '/backend/custom-functions/executing-functions' --- # Executing Custom Functions diff --git a/docs/projects/backend/custom-functions/custom-functions-logs.md b/docs/projects/backend/custom-functions/custom-functions-logs.md index 9d07595..54eee28 100644 --- a/docs/projects/backend/custom-functions/custom-functions-logs.md +++ b/docs/projects/backend/custom-functions/custom-functions-logs.md @@ -1,8 +1,7 @@ --- id: 'custom-functions-logs' sidebar_label: 'Logs' -redirect_from: '/backend/custom-functions/custom-functions-logs' -slug: '/backend/custom-functions/custom-functions-logs' +slug: '/backend/custom-functions/logs' --- # Logs diff --git a/docs/projects/backend/custom-functions/custom-functions-readme.md b/docs/projects/backend/custom-functions/custom-functions-readme.md index c785f8d..d8151b3 100644 --- a/docs/projects/backend/custom-functions/custom-functions-readme.md +++ b/docs/projects/backend/custom-functions/custom-functions-readme.md @@ -1,7 +1,7 @@ --- id: 'custom-functions-readme' sidebar_label: 'Custom Functions' -redirect_from: '/backend/custom-functions' +redirect_from: '/project/backend/custom-functions' slug: '/backend/custom-functions' --- # Custom Functions diff --git a/docs/projects/backend/custom-functions/custom-functions-resolvers.md b/docs/projects/backend/custom-functions/custom-functions-resolvers.md index 893bc0c..f0bea7a 100644 --- a/docs/projects/backend/custom-functions/custom-functions-resolvers.md +++ b/docs/projects/backend/custom-functions/custom-functions-resolvers.md @@ -1,7 +1,7 @@ --- id: 'custom-functions-resolvers' sidebar_label: 'Resolvers' -redirect_from: '/backend/custom-functions/resolvers' +redirect_from: '/projects/backend/custom-functions/resolvers' slug: '/backend/custom-functions/resolvers' --- # Resolvers diff --git a/docs/projects/backend/custom-functions/custom-functions-tasks.md b/docs/projects/backend/custom-functions/custom-functions-tasks.md index d029efc..ae5e872 100644 --- a/docs/projects/backend/custom-functions/custom-functions-tasks.md +++ b/docs/projects/backend/custom-functions/custom-functions-tasks.md @@ -1,7 +1,7 @@ --- id: 'custom-functions-tasks' sidebar_label: 'Tasks' -redirect_from: '/backend/custom-functions/tasks' +redirect_from: '/projects/backend/custom-functions/tasks' slug: '/backend/custom-functions/tasks' --- # Tasks diff --git a/docs/projects/backend/custom-functions/custom-functions-triggers.md b/docs/projects/backend/custom-functions/custom-functions-triggers.md index 72d5030..708557c 100644 --- a/docs/projects/backend/custom-functions/custom-functions-triggers.md +++ b/docs/projects/backend/custom-functions/custom-functions-triggers.md @@ -1,7 +1,7 @@ --- id: 'custom-functions-triggers' sidebar_label: 'Triggers' -redirect_from: '/backend/custom-functions/triggers' +redirect_from: '/projects/backend/custom-functions/triggers' slug: '/backend/custom-functions/triggers' --- # Triggers @@ -102,7 +102,7 @@ A `trigger.after` type function receives the output of a mutation in the `event. } ``` -To learn more about the arguments that are passed to triggers, see [custom function arguments](/backend/custom-functions/custom-functions-types#custom-function-arguments). +To learn more about the arguments that are passed to triggers, see [custom function arguments](/backend/custom-functions/types#custom-function-arguments). ## Trigger Responses diff --git a/docs/projects/backend/custom-functions/custom-functions-types.md b/docs/projects/backend/custom-functions/custom-functions-types.md index a39365e..d9ef3f7 100644 --- a/docs/projects/backend/custom-functions/custom-functions-types.md +++ b/docs/projects/backend/custom-functions/custom-functions-types.md @@ -1,10 +1,10 @@ --- id: 'custom-functions-types' -sidebar_label: 'Custom Functions Types' +sidebar_label: 'Working with Custom Functions' redirect_from: '/backend/custom-functions-types' -slug: '/backend/custom-functions-types' +slug: '/backend/custom-functions/types' --- -# Custom Function Types +# Working with Custom Functions Custom functions are developed in a local development environment and then deployed to a given workspace using the [8base CLI](/backend/development-tools/cli/). All custom functions must be declared in your projects 8base.yml file. @@ -60,7 +60,7 @@ if (runWithRolesEnforced) { For security reasons, `checkPermissions` is ONLY available from within custom functions. It cannot be used when making requests from client applications. -As opposed to using the `checkPermissions` option, [API Tokens](/backend/roles-and-permissions/#api-tokens) associated with defined roles can be used to permission `gqlRequest` calls. This ability accommodates situations where permissions are required, but not in the context of the requesting user. To accomplish this, the API Token can be added as a bearer token to the call. +As opposed to using the `checkPermissions` option, [API Tokens](/backend/app-services/roles-and-permissions#api-tokens) associated with defined roles can be used to permission `gqlRequest` calls. This ability accommodates situations where permissions are required, but not in the context of the requesting user. To accomplish this, the API Token can be added as a bearer token to the call. ```javascript await ctx.api.gqlRequest(QUERY, VARIABLES, { diff --git a/docs/projects/backend/custom-functions/custom-functions-webhooks.md b/docs/projects/backend/custom-functions/custom-functions-webhooks.md index 729cdfe..49f53e1 100644 --- a/docs/projects/backend/custom-functions/custom-functions-webhooks.md +++ b/docs/projects/backend/custom-functions/custom-functions-webhooks.md @@ -48,7 +48,7 @@ functions: ## Webhook Arguments -To learn about the arguments that are passed to webhooks, see [custom function arguments](/backend/custom-functions/custom-functions-types#custom-function-arguments). +To learn about the arguments that are passed to webhooks, see [custom function arguments](/backend/custom-functions/types#custom-function-arguments). ## Path Parameters diff --git a/docs/projects/backend/data/8base-console-platform-tools-data-viewer.md b/docs/projects/backend/data/8base-console-platform-tools-data-viewer.md index ed45e13..1f61b34 100644 --- a/docs/projects/backend/data/8base-console-platform-tools-data-viewer.md +++ b/docs/projects/backend/data/8base-console-platform-tools-data-viewer.md @@ -4,7 +4,6 @@ sidebar_label: 'Data Viewer' redirect_from: '/projects/backend/data/data-viewer' slug: '/backend/data/data-viewer' --- - # Data Viewer The **8base Data Viewer** lets you search and manage table records. You can sort, filter, and search your tables. You can also edit table rows and import data from CSV files. diff --git a/docs/projects/backend/data/data-index.md b/docs/projects/backend/data/data-index.md index 99d2d87..d8cb556 100644 --- a/docs/projects/backend/data/data-index.md +++ b/docs/projects/backend/data/data-index.md @@ -10,7 +10,7 @@ The **Data** section of the 8base Console is the interface where you design, con The [**Data Builder**](8base-console-platform-tools-data-builder.md) is a visual database schema designer. You can access it on the ![schema](../../_images/_icons/ic_schema.svg) Schema tab. This is where you can add or remove fields, and set data validation. -The [**Data Viewer**](8base-console-platform-tools-data-viewer.md) is a spreadsheet-like data view and management interface. You can access it on the ![data](../../_images/_icons/ic_data_table.svg) tab. You can create and edit table records, and sort table data. You can also import data from CSV files. +The [**Data Viewer**](8base-console-platform-tools-data-viewer.md) is a spreadsheet-like data view and management interface. You can access it on the ![data](../../_images/_icons/ic_data_table.svg) tab. You can create and edit table records, and sort table data. You can also import data from CSV files. This is useful for admins needing to browse and modify the data, or enter sample content while in development. Under [**Settings**](data-settings.md) you can change the name of a data table and create an indexes. You can access settings on the tab with the ![gear](../../_images/_icons/ic_gear_disabled.svg) tab. diff --git a/docs/projects/backend/development-tools-cli-commands.md b/docs/projects/backend/development-tools-cli-commands.md index 87f12e9..a3be435 100644 --- a/docs/projects/backend/development-tools-cli-commands.md +++ b/docs/projects/backend/development-tools-cli-commands.md @@ -145,14 +145,14 @@ OPTIONS: - `-n`, `--num` Number of lines to display - type: sting, default: 10, max: 100 - `-t`, `--tail` Continually stream logs - type: boolean -##### package + ##### version Output 8base CLI version. diff --git a/docs/projects/backend/development-tools-cli-generators.md b/docs/projects/backend/development-tools-cli-generators.md index 3796f42..602e154 100644 --- a/docs/projects/backend/development-tools-cli-generators.md +++ b/docs/projects/backend/development-tools-cli-generators.md @@ -7,9 +7,9 @@ slug: '/projects/backend/development-tools/cli/generators' # Generators -Generators are awesome. Essentially, they can be used to reliably scaffold application resources – like custom functions – that can then get customized. Relying on generators will also help ensure that your project directories stay organized. +Generators are used to reliably scaffold application resources – like custom functions – that can then get customized. Relying on generators will also help ensure that your project directories stay organized. -### Commands +## Commands When running `8base generate [COMMAND]`, certain option flags are always available. Currently, they are: @@ -21,11 +21,11 @@ OPTIONS: Let's walk through a few examples of using generators. -### Custom Functions +## Custom Functions Custom function generators will add all the files required for a given type, along with boiler-plate code. -##### Resolvers +### Resolvers Generate a custom resolver function. @@ -54,7 +54,7 @@ Boom! Your new myNewResolver function has been successfully generated. To add an generate done. Time: 18 ms. ``` -##### Webhooks +### Webhooks Generate a custom webhook function. @@ -84,7 +84,7 @@ Boom! Your new myNewWebhook function has been successfully generated. To add any generate done. Time: 12 ms. ``` -##### Trigger +### Trigger Generate a custom trigger function. @@ -114,7 +114,7 @@ Boom! Your new myNewTrigger function has been successfully generated. To add any generate done. Time: 14 ms. ``` -##### Task +### Task Generate a custom task function. @@ -143,7 +143,7 @@ Boom! Your new myNewTask function has been successfully generated. To add any re generate done. Time: 11 ms. ``` -##### Mock +### Mock Generate a mock for a custom function. @@ -170,7 +170,7 @@ Boom! Your new success request mock has been successfully generated. generate done. Time: 10 ms. ``` -### Client Side + \ No newline at end of file diff --git a/docs/projects/backend/development-tools-dev-env-runtime-environment.md b/docs/projects/backend/development-tools-dev-env-runtime-environment.md index a36c6e0..bb30963 100644 --- a/docs/projects/backend/development-tools-dev-env-runtime-environment.md +++ b/docs/projects/backend/development-tools-dev-env-runtime-environment.md @@ -4,8 +4,8 @@ sidebar_label: 'Runtime Environment' redirect_from: '/backend/development-tools/dev-env/runtime-environment' slug: '/backend/custom-functions/dev-environment/runtime-environment' --- - # Runtime Environment + The 8base runtime environment is a secure and isolated environment where 8base invokes your custom functions. ## Function Arguments diff --git a/docs/projects/backend/development-tools-dev-readme.md b/docs/projects/backend/development-tools-dev-readme.md index b65ed11..639a428 100644 --- a/docs/projects/backend/development-tools-dev-readme.md +++ b/docs/projects/backend/development-tools-dev-readme.md @@ -1,18 +1,11 @@ --- id: 'development-tools-dev-readme' -sidebar_label: 'Local Development Environment' -redirect_from: '/backend/development-tools' -slug: '/backend/development-tools' +# sidebar_label: 'Local Development Environment' +# slug: '/backend/development-tools' --- # Local Development Environment -8base provides a local development environment. This is a suite of software applications that you store locally, meaning they live on your computer or device. -Here's a brief overview of the subsections you will find: - -- [Development Environment](development-tools-dev-env-readme.md) -- [Command Line Interface (CLI)](development-tools-cli-readme.md) -- [JavaScript SDK](development-tools-sdk-readme.md) diff --git a/docs/projects/backend/development-tools-sdk-auth-readme.md b/docs/projects/backend/development-tools-sdk-auth-readme.md index 3a1b01a..c963c67 100644 --- a/docs/projects/backend/development-tools-sdk-auth-readme.md +++ b/docs/projects/backend/development-tools-sdk-auth-readme.md @@ -9,7 +9,9 @@ slug: '/projects/backend/development-tools/sdk/auth' The `Auth` module is used to quickly enable user authentication and sign-up in 8base developer's client applications. -_Note: Before setting up Auth using the SDK, you must have first created an [Authentication Profile](/projects/backend/authentication)_ +:::note +Before setting up Auth using the SDK, you must have first created an [Authentication Profile](/backend//app-services/authentication). +::: ## Usage @@ -19,7 +21,7 @@ When initializing the `Auth` module, an auth strategy needs to be specified. ### Auth Strategies -All required settings values for initializing the Auth module can be collected from an [Authentication Profile](/projects/backend/authentication#authorization) created in the 8base console. +All required settings values for initializing the Auth module can be collected from an [Authentication Profile](/backend//app-services/authentication#authorization) created in the 8base console. #### AUTH0_AUTH diff --git a/docs/projects/backend/development-tools-sdk-filestack-uploader.md b/docs/projects/backend/development-tools-sdk-filestack-uploader.md index 6050280..1b4affc 100644 --- a/docs/projects/backend/development-tools-sdk-filestack-uploader.md +++ b/docs/projects/backend/development-tools-sdk-filestack-uploader.md @@ -38,7 +38,7 @@ The workflow of creating a file consists of the following steps: 3. **Create file in 8base** Create file in 8base by passing the Filestack `handle` from step 2. You can either create a `File` object directly so you can later connect it to other tables: -```javascript +```graphql mutation { fileCreate(data: { fileId: "" # Filestack handle here @@ -51,7 +51,7 @@ mutation { or you can create and connect file at the same time: -```javascript +```graphql mutation { customerCreate(data: { picture: { @@ -68,7 +68,7 @@ mutation { ### Filestack API -Filestack has API clients, Pickers and Framework integrations that make it easy to upload your files using a variety of different languages and frameworks. See the full list [here](https://www.filestack.com/docs/api/#api-clients). You will need to use the [security credentials](/projects/backend/roles-and-permissions) from the 8base GraphQL API to upload files to Filestack. This is how to upload a file to the API using a basic `CURL` request: +Filestack has API clients, Pickers and Framework integrations that make it easy to upload your files using a variety of different languages and frameworks. See the full list [here](https://www.filestack.com/docs/api/#api-clients). You will need to use the [security credentials](../backend/app-services/roles-and-permissions.md) from the 8base GraphQL API to upload files to Filestack. This is how to upload a file to the API using a basic `CURL` request: ```sh curl -X POST \ diff --git a/docs/projects/backend/development-tools-sdk-readme.md b/docs/projects/backend/development-tools-sdk-readme.md index a813f03..b4403e7 100644 --- a/docs/projects/backend/development-tools-sdk-readme.md +++ b/docs/projects/backend/development-tools-sdk-readme.md @@ -1,8 +1,7 @@ --- id: 'development-tools-sdk-readme' sidebar_label: 'JavaScript SDK' -redirect_from: '/backend/development-tools/sdk' -slug: '/projects/backend/development-tools/sdk' +slug: '/backend/development-tools/sdk' --- # JavaScript SDK diff --git a/docs/projects/backend/development-tools-sdk-vs-code-plugin.md b/docs/projects/backend/development-tools-sdk-vs-code-plugin.md index 4fade05..1498280 100644 --- a/docs/projects/backend/development-tools-sdk-vs-code-plugin.md +++ b/docs/projects/backend/development-tools-sdk-vs-code-plugin.md @@ -1,6 +1,6 @@ --- id: 'development-tools-sdk-vs-code-plugin' -sidebar_label: 'Vs Code Plugin' +sidebar_label: 'VS Code Plugin' redirect_from: '/backend/development-tools/sdk/vs-code-plugin' slug: '/projects/backend/development-tools/sdk/vs-code-plugin' --- diff --git a/docs/projects/backend/getting-started-connecting-to-api.md b/docs/projects/backend/getting-started-connecting-to-api.md index 2ec33b0..d01f22b 100644 --- a/docs/projects/backend/getting-started-connecting-to-api.md +++ b/docs/projects/backend/getting-started-connecting-to-api.md @@ -1,15 +1,15 @@ --- id: 'getting-started-connecting-to-api' -sidebar_label: 'Connecting To API' -redirect_from: '/backend/getting-started/connecting-to-api' -slug: '/projects/backend/getting-started/connecting-to-api' +sidebar_label: 'Connecting to the API' +redirect_from: '/projects/backend/getting-started/connecting-to-api' +slug: '/backend/getting-started/connecting-to-api' --- # Connecting to the API An 8base Workspace API is a single endpoint from which **all** data sources can be queried. Simply put, it's the single source of truth for an application's data. -**Workspace Endpoint Anatomy** +## Workspace Endpoint Anatomy ``` https://api.8base.com/ diff --git a/docs/projects/backend/getting-started-quick-start.md b/docs/projects/backend/getting-started-quick-start.md index e93eb8a..4bfc2ad 100644 --- a/docs/projects/backend/getting-started-quick-start.md +++ b/docs/projects/backend/getting-started-quick-start.md @@ -50,7 +50,7 @@ Once the tables is created, we're going to establish a relationship between it a Before moving on, lets also add several dummy records to our database. You can do this manually by navigating to the `data` tab. However, lets just run the following GraphQL mutation in the [API Explorer](https://app.8base.com/api-explorer). Make sure to swap `` with your email address! -```javascript +```graphql mutation { userUpdate( filter: { @@ -81,8 +81,8 @@ GraphQL mutations (like the one above) handle record creates, updates, and delet This is a great example of how 8base supports relational queries and mutations! -- _[GraphQL API docs](/projects/backend/graphql-api)_ -- _[API Explorer docs](/projects/backend/console/api-explorer)_ +- _[GraphQL API docs](/backend/graphql-api)_ +- _[API Explorer docs](/backend/api-explorer/)_ ### 2.2. Roles and Permissions @@ -100,7 +100,7 @@ Now, all users with the _Reviewer_ role who call the workspace API endpoint will ![8base roles and permissions](./_images/qs-roles-and-permissions.png) -- _[Roles and Permissions docs](/projects/backend/roles-and-permissions)_ +- _[Roles and Permissions docs](../backend/app-services/roles-and-permissions.md)_ ### 2.3. Authentication Profiles @@ -111,7 +111,7 @@ Navigate to the [Authentication page](https://app.8base.com/app-services/authent | Option | Value | Notes | | ------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------- | | `Name` | "Default Guest Auth" | Choose any descriptive name | -| `Type` | 8base authentication | Find more auth info in the [docs](/projects/backend/authentication#8base-authentication) | +| `Type` | 8base authentication | Find more auth info in the [docs](/backend//app-services/authentication#8base-authentication) | | `Self Signup` | Open to all | Leave `Off` if using a free workspace | | `Roles` | Reviewer | Multiple roles can be assigned to user on sign up | @@ -121,7 +121,7 @@ Add the new authentication profile. The information that’s now displayed will Scroll down to where you see `Custom Domains`. This is where you can provide routes that’ll be used during authentication. Make sure the `localhost:port` number matches that which your app will run on in development - or other redirect URLs for native apps! -- _[Authentication Profile docs](/projects/backend/authentication#8base-authentication)_ +- _[Authentication Profile docs](/backend//app-services/authentication#8base-authentication)_ ### 2.4. Getting the Workspace API Endpoint @@ -302,7 +302,7 @@ Go back to the [API Explorer](https://app.8base.com/api-explorer) and click on t It could look something like this: -```javascript +```graphql query { notesList(first: 10, filter: { title: { diff --git a/docs/projects/backend/getting-started-readme.md b/docs/projects/backend/getting-started-readme.md index ce22776..64257b8 100644 --- a/docs/projects/backend/getting-started-readme.md +++ b/docs/projects/backend/getting-started-readme.md @@ -10,9 +10,9 @@ slug: '/backend/getting-started' Every 8base Workspace contains the following components: 1. **Schema**: A Schema represents the shape of your application data and specifies what data a client application can query from your API, as well as how to manipulate it. -2. **System Data**: Data resources that are pre-defined by default for every 8base application, such as: [Project Team Management](../8basehome/projects/projects-team-management.md), Users, [Roles & Permissions](/projects/backend/roles-and-permissions), and [Files](data/8base-console-handling-files.md). +2. **System Data**: Data resources that are pre-defined by default for every 8base application, such as: [Project Team Management](../8basehome/projects/projects-team-management.md), Users, [Roles & Permissions](../backend/app-services/roles-and-permissions.md), and [Files](data/8base-console-handling-files.md). 3. **User Data**: All the unique data resources (tables, records, etc) that are specific to your application. -4. **Authentication and Authorization System**: Sign-up/Sign-in, manage, and authorization flows of your application. [Authentication](/projects/backend/authentication) is implemented through [Authentication Profiles](/projects/backend/authentication#authentication-types), while [Authorization](/projects/backend/roles-and-permissions) uses the roles and permissions system. +4. **Authentication and Authorization System**: Sign-up/Sign-in, manage, and authorization flows of your application. [Authentication](/backend//app-services/authentication) is implemented through [Authentication Profiles](/backend//app-services/authentication#authentication-types), while [Authorization](../backend/app-services/roles-and-permissions.md) uses the roles and permissions system. 5. **Workspace Users**: 8base users with access to your Workspace through the console. 6. [Custom Functions](/backend/custom-functions): For building and extending your application's server-side functionality. 7. **Integrations**: Data and functionalities from 3rd party sources. @@ -48,7 +48,7 @@ An awesome way to get more familiar with the true power of 8base is to complete > [Connect to your API](/projects/backend/getting-started-connecting-to-api.md) > Explore ways to connect to the 8base GraphQL API. > -> [GraphQL API](/projects/backend/8base-console-graphql-api-readme.md) +> [GraphQL API](/projects/backend/graphql/graphql-api-readme.md) > Dive deeper into API concepts like authentication, queries, mutations, subscriptions and files. > > [Custom Functions](/backend/custom-functions/custom-functions diff --git a/docs/projects/backend/graphql/graphql-api-code-samples.md b/docs/projects/backend/graphql/graphql-api-code-samples.md new file mode 100644 index 0000000..92e0515 --- /dev/null +++ b/docs/projects/backend/graphql/graphql-api-code-samples.md @@ -0,0 +1,8 @@ +--- +id: 'graphql-api-code-samples' +sidebar_label: 'GraphQL Code Samples' +slug: '/backend/graphql-api/code-samples' +--- +# GraphQL Code Samples + +To be filled \ No newline at end of file diff --git a/docs/projects/backend/8base-console-graphql-api-error-handling.md b/docs/projects/backend/graphql/graphql-api-error-handling.md similarity index 75% rename from docs/projects/backend/8base-console-graphql-api-error-handling.md rename to docs/projects/backend/graphql/graphql-api-error-handling.md index cc93523..5ff915f 100644 --- a/docs/projects/backend/8base-console-graphql-api-error-handling.md +++ b/docs/projects/backend/graphql/graphql-api-error-handling.md @@ -1,15 +1,14 @@ --- -id: '8base-console-graphql-api-error-handling' +id: 'graphql-api-error-handling' sidebar_label: 'Error Handling' -redirect_from: '/backend/graphql-api/error-handling' -slug: '/projects/backend/graphql-api/error-handling' +slug: '/backend/graphql-api/error-handling' --- # Error Handling In order to return an error or a list of errors from a custom function you can always manually set the `errors` property of the returned object. 8base also has a convenient mechanism that allows you to use `throw`. Throwing an error is equivalent to returning the following object: -- For resolvers and triggers: +## For resolvers and triggers ```javascript // throw new Error("Error message") => @@ -24,7 +23,7 @@ return { }; ``` -- For webhooks: +## For webhooks ```javascript // throw new Error("Error message") => diff --git a/docs/projects/backend/8base-console-graphql-api-geo-fields-readme.md b/docs/projects/backend/graphql/graphql-api-geo-fields-readme.md similarity index 96% rename from docs/projects/backend/8base-console-graphql-api-geo-fields-readme.md rename to docs/projects/backend/graphql/graphql-api-geo-fields-readme.md index 35195ad..6358dd0 100644 --- a/docs/projects/backend/8base-console-graphql-api-geo-fields-readme.md +++ b/docs/projects/backend/graphql/graphql-api-geo-fields-readme.md @@ -1,11 +1,10 @@ --- -id: '8base-console-graphql-api-geo-fields-readme' +id: 'graphql-api-geo-fields-readme' sidebar_label: 'Geo JSON Fields' -redirect_from: '/backend/graphql-api/geo-fields' -slug: '/projects/backend/graphql-api/geo-fields' +slug: '/backend/graphql-api/geo-fields' --- -# Geo Fields +# Geo JSON Fields With GeoFields, developers are able to filter records based on geo-coordinates. This opens up a ton of possibilities for map and location based applications. For example, apartment listing services, dating apps, delivery apps, and more. @@ -25,7 +24,7 @@ The current implementation of geo filtering querying and works with _Point_ type Descriptions of these different types are as follows: -**GeoJSONCoordinates** +### GeoJSONCoordinates A (multidimensional) set of coordinates following x, y, z order. @@ -48,7 +47,7 @@ query($latitude: Float, $longitude: Float){ } ``` -**GeometryInput** +### GeometryInput Object describing a single geographical Geometry input. It is comprised of a GeoJSONType and a GeoJsonCoordinates. Supported types include `Point`, `MultiPoint`, `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon`, `GeometryCollection`, `Feature`, `FeatureCollection`. @@ -111,7 +110,7 @@ query($sw: GeoJSONCoordinates, $ne: GeoJSONCoordinates){ } ``` -**GeometeryDistanceFilterInput** +### GeometeryDistanceFilterInput Object describing a single geographical Geometry distance filter input. The FloatPredicate determines how the distance operation will handle inclusion (i.e. less than, greater than, equals, etc.), while the unit is a string and can be either `meters`, `km`, or `miles`. diff --git a/docs/projects/backend/8base-console-graphql-api-grouping-and-aggregations-readme.md b/docs/projects/backend/graphql/graphql-api-grouping-and-aggregations-readme.md similarity index 96% rename from docs/projects/backend/8base-console-graphql-api-grouping-and-aggregations-readme.md rename to docs/projects/backend/graphql/graphql-api-grouping-and-aggregations-readme.md index 042f4c0..c67753c 100644 --- a/docs/projects/backend/8base-console-graphql-api-grouping-and-aggregations-readme.md +++ b/docs/projects/backend/graphql/graphql-api-grouping-and-aggregations-readme.md @@ -1,8 +1,7 @@ --- -id: '8base-console-graphql-api-grouping-and-aggregations-readme' +id: 'graphql-api-grouping-and-aggregations-readme' sidebar_label: 'Grouping and Aggregations' -redirect_from: '/backend/graphql-api/grouping-and-aggregations' -slug: '/projects/backend/graphql-api/grouping-and-aggregations' +slug: '/backend/graphql-api/grouping-and-aggregations' --- # Grouping and Aggregations @@ -19,7 +18,7 @@ Any _group_ gets defined in the `groupBy` argument of any tables list query (for **Example** -```javascript +```graphql /** * Group articles by their author's name, count how many articles belong to * each author, and return each groups article IDs while excluding any @@ -131,7 +130,7 @@ Every group defined has an additional `fn` property, where you can specify an ar **Example** -```javascript +```graphql /** * Create a single group that returns the oldest authors age * out of N many authors (sampleSize). @@ -181,11 +180,13 @@ query { Simple sorting can be achieved at the _groups_ level using ascending and descending order. Specifying the alias(es) for which the groups should be sorted by, `ASC` or `DESC` arguments can then get used. -**Group by sort is not the same as the sort and orderBy for the list queries** and gets specified inside the groupBy query definition object. Group sorting only applies to the result set of groups, not to the original records themselves. +:::note +Group by sort is not the same as the sort and orderBy for the list queries and gets specified inside the groupBy query definition object. Group sorting only applies to the result set of groups, not to the original records themselves. +::: **Example** -```javascript +```graphql /** * Group articles by their author's name, count how many articles belong to * each author, and sort in descending ording by the authorsPosts field. @@ -252,7 +253,7 @@ The `first` / `last` / `skip` pagination parameters are supported for groupings **Example** -```javascript +```graphql /** * Group posts by title, count how many articles belong to each post's * author, and return the first 5 posts after skipping 1 through 10. @@ -328,7 +329,7 @@ You can use the same filter parameter as in list queries and combine it with gro **Example** -```javascript +```graphql /** * Return average age of authors who are filtered by having * written articles with "Blog" in the title. @@ -385,7 +386,7 @@ Another implication of it is that you should explicitly specify an expected filt **Example** -```javascript +```graphql /** * Group authors with their articles count as authorPosts and filter using * the having clause by groups (authors) with more than/equal to 10 authorPosts. @@ -446,7 +447,7 @@ Compound having clauses are also supported in the similar way that filters do. Y **Example** -```javascript +```graphql /** * Group authors with their articles count as authorPosts and filter using * a compound having clause by groups (authors) with more than/equal to 5 authorPosts @@ -517,7 +518,7 @@ In that case you can define multiple clauses for the same alias without alias du **Example** -```javascript +```graphql /** * Group authors with their articles count as authorPosts and filter using * a multiple having clause by groups (authors) with more than/equal to 5 authorPosts @@ -587,7 +588,7 @@ Using this field, you can access the array of records used in the grouping, incl **Example** -```javascript +```graphql /** * Group authors with their articles count as authorPostsCount and access the collection of authors posts. */ diff --git a/docs/projects/backend/8base-console-graphql-api-mutations-readme.md b/docs/projects/backend/graphql/graphql-api-mutations-readme.md similarity index 89% rename from docs/projects/backend/8base-console-graphql-api-mutations-readme.md rename to docs/projects/backend/graphql/graphql-api-mutations-readme.md index 1ef352f..9a59186 100644 --- a/docs/projects/backend/8base-console-graphql-api-mutations-readme.md +++ b/docs/projects/backend/graphql/graphql-api-mutations-readme.md @@ -1,41 +1,32 @@ --- -id: '8base-console-graphql-api-mutations-readme' -redirect_from: '/backend/graphql-api/mutations' -slug: '/projects/backend/graphql-api/mutations' +id: 'graphql-api-mutations-readme' +sidebar_label: 'GraphQL Mutations' +slug: '/backend/graphql-api/mutations' --- - # GraphQL Mutations -_For the sake of the any examples, let's consider a scenario where a table called Posts exists, having expected fields and relations like title, body, author, etc._ - GraphQL mutations are used to create, update, and delete data via the workspace API. 8base's GraphQL engine auto-generates mutations as part of the GraphQL schema based on your workspace tables. All workspace tables can recieve mutations through the workspace endpoint. -### Auto-generated mutations +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. + +## Auto-generated mutations Whenever a table is added to a work space, four GraphQL mutation operations are auto-generated for the table. They are: - `tableNameCreate(...)` - Accepts `data` as an argument from which it will populate a new record in the database table. - - `tableNameCreateMany(...)` - Accepts `data` as an argument from which it will populate one or more new records in the database table. - - `tableNameUpdate(...)` - Accepts `data` and `filter` as arguments with which it will update an existing record. - - `tableNameUpdateByFilter(...)` - Accepts `data` and `filter` as arguments with which it will update an list of existing record. - - `tableNameDelete(...)` - Accepts `data`, `filter`, and `force` as arguments with which it will delete an existing record - and dependent records when specified. - -- `tableNameDeleteByFilter(...)` - Accepts `filter` and `force` as arguments with which it will delete an list of existing record - +- `tableNameDeleteByFilter(...)` - Accepts `filter` and `force` as arguments with which it will delete an list of existing record. - `tableNameDestroy(...)` - Accepts `filter` and `force` as arguments with which it will permanently destroy an existing or deleted record - and dependent records when specified. - -- `tableNameDestroyByFilter(...)` - Accepts `filter` and `force` as arguments with which it will destroy an list of existing record - +- `tableNameDestroyByFilter(...)` - Accepts `filter` and `force` as arguments with which it will destroy an list of existing record. - `tableNameRestore(...)` - Accepts `id` as an argument with which it will restore a previously deleted records; does not work on destroyed records. -### Delete vs. Destroy +## Delete vs. Destroy The 8base API differentiates between _soft delete_ and _hard delete_ actions by using _tableNameDelete_ and _tableNameDestroy_ operations. @@ -43,7 +34,7 @@ When a record has a _tableNameDelete_ action performed on it, it's _deletedAt_ t When a record has a _tableNameDestroy_ action performed on it, it is permanently deleted from the database and cannot be recovered. Additionally, if the `force: true` argument is specified all dependent child records will also be permanently deleted. -### Relationships +## Relationships A cool feature of 8base API is the ability to create related objects while creating or updating parent objects. The following operations on relationships are supported: @@ -53,7 +44,7 @@ A cool feature of 8base API is the ability to create related objects while creat - **Reconnect**: Replace old connected objects with a new set of connected objects (update mutation only). - **Disconnect**: Disconnect connected object(s) (update mutation only). -### Arguments +## Arguments 8base accepts to the following mutation arguments, depending on the operation. diff --git a/docs/projects/backend/8base-console-graphql-api-mutations-related-record-mutations.md b/docs/projects/backend/graphql/graphql-api-mutations-related-record-mutations.md similarity index 79% rename from docs/projects/backend/8base-console-graphql-api-mutations-related-record-mutations.md rename to docs/projects/backend/graphql/graphql-api-mutations-related-record-mutations.md index 7112ede..79b2323 100644 --- a/docs/projects/backend/8base-console-graphql-api-mutations-related-record-mutations.md +++ b/docs/projects/backend/graphql/graphql-api-mutations-related-record-mutations.md @@ -1,14 +1,10 @@ --- -id: '8base-console-graphql-api-mutations-related-record-mutations' -sidebar_label: 'Related Record Mutations' -redirect_from: '/backend/graphql-api/mutations/related-record-mutations' -slug: '/projects/backend/graphql-api/mutations/related-record-mutations' +id: 'graphql-api-mutations-related-record-mutations' +sidebar_label: 'Mutating Related Records' +slug: '/backend/graphql-api/mutations/related-record-mutations' --- -# Mutating related records - -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ - +# Mutating Related Records You can create, connect, reconnect, and disconnect related table records using 8base's auto-generated GraphQL mutation operations. - **Create**: Create and relate child objects. @@ -16,13 +12,17 @@ You can create, connect, reconnect, and disconnect related table records using 8 - **Reconnect**: Replace old connected objects with a new set of connected objects (update mutation only). - **Disconnect**: Disconnect connected object(s) (update mutation only). -**\*Note**: Some examples will use [aliases](/projects/backend/graphql-api/#aliases) to show side by side the use of `data.id` versus `filter`. All examples work without aliases.\* +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. + +:::note +Some examples will use [aliases](/backend/graphql-api/#aliases) to show side by side the use of `data.id` versus `filter`. All examples work without aliases. +::: -##### Creating related records in nested mutation +## Creating Related Records in a Nested Mutation Whether when creating or updating a parent record, one or more child records can be created using `create`. -```javascript +```graphql /** * The author record's bio is gets updated while * a new Post is being created and associated. @@ -66,11 +66,11 @@ mutation { } ``` -##### Connecting records in mutation +## Connecting Records in a Mutation One or more records can be connected using a mutation that associates them - whether the relationship is _many-to-many_, _one-to-many_, or _one-to-one_. -```javascript +```graphql /** * The author gets changed to the author * named "Stevens" using connect. @@ -107,11 +107,11 @@ mutation { } ``` -##### Re-connecting records in mutation +## Re-connecting Records in a Mutation All related records can be _dissasociated_ from a record, while _connecting_ one or more in a specified set. -```javascript +```graphql /** * All posts belonging to the author Huxley are changed to the new set. */ @@ -160,11 +160,11 @@ mutation { } ``` -##### Disconnecting records in mutation +## Disconnecting Records in a Mutation One or more records can be disconnected using a mutation - whether the relationship is _many-to-many_, _one-to-many_, or _one-to-one_. If the relationship is _mandatory_, an error will be raised. -```javascript +```graphql /** * All posts belonging to the author * Huxley are changed to the new set. diff --git a/docs/projects/backend/8base-console-graphql-api-mutations-single-record-mutations.md b/docs/projects/backend/graphql/graphql-api-mutations-single-record-mutations.md similarity index 73% rename from docs/projects/backend/8base-console-graphql-api-mutations-single-record-mutations.md rename to docs/projects/backend/graphql/graphql-api-mutations-single-record-mutations.md index 514ebb9..ad6d04c 100644 --- a/docs/projects/backend/8base-console-graphql-api-mutations-single-record-mutations.md +++ b/docs/projects/backend/graphql/graphql-api-mutations-single-record-mutations.md @@ -1,23 +1,23 @@ --- -id: '8base-console-graphql-api-mutations-single-record-mutations' +id: 'graphql-api-mutations-single-record-mutations' sidebar_label: 'Single Record Mutations' -redirect_from: '/backend/graphql-api/mutations/single-record-mutations' -slug: '/projects/backend/graphql-api/mutations/single-record-mutations' +slug: '/backend/graphql-api/mutations/single-record-mutations' --- - -# Mutating individual records - -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +# Mutating Individual Records You can create, update, and delete individual table records using 8base's auto-generated GraphQL mutation operations. -**\*Note**: Some examples will use [aliases](/projects/backend/graphql-api/#aliases) to show side by side the use of `data.id` versus `filter`. All examples work without aliases.\* +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -##### Creating a single record +:::note +Some examples will use [aliases](/backend/graphql-api/#aliases) to show side by side the use of `data.id` versus `filter`. All examples work without aliases. +::: + +## Creating a Single Record Create a new record using the data argument that define the records data. -```javascript +```graphql mutation { authorCreate(data: { name: "Wyatt" @@ -39,11 +39,11 @@ mutation { } ``` -##### Updating a single record +## Updating a Single Record Update a record using the data argument while including the records `id` OR using a `filter` that includes a unqiue field. -```javascript +```graphql mutation { /* Updates record name with find by unqiue name) */ quade: authorUpdate(filter: { @@ -64,7 +64,6 @@ mutation { id name } -} ``` ```json @@ -82,11 +81,11 @@ mutation { } ``` -##### Delete a single record +## Delete a Single Record Delete a record using the data argument while including the records `id` OR using a `filter` that includes a unqiue field. -```javascript +```graphql mutation { /* Deletes record by unqiue field. */ quade: authorDelete(filter: { diff --git a/docs/projects/backend/8base-console-graphql-api-mutations-update-by-filter-mutations.md b/docs/projects/backend/graphql/graphql-api-mutations-update-by-filter-mutations.md similarity index 78% rename from docs/projects/backend/8base-console-graphql-api-mutations-update-by-filter-mutations.md rename to docs/projects/backend/graphql/graphql-api-mutations-update-by-filter-mutations.md index 87eb736..5727680 100644 --- a/docs/projects/backend/8base-console-graphql-api-mutations-update-by-filter-mutations.md +++ b/docs/projects/backend/graphql/graphql-api-mutations-update-by-filter-mutations.md @@ -1,23 +1,25 @@ --- -id: '8base-console-graphql-api-mutations-update-by-filter-mutations' -sidebar_label: 'Update By Filter Mutations' -redirect_from: '/backend/graphql-api/mutations/update-by-filter-mutations' -slug: '/projects/backend/graphql-api/mutations/update-by-filter-mutations' +id: 'graphql-api-mutations-update-by-filter-mutations' +sidebar_label: 'Mutating Multiple Records Using Filters' +redirect_from: '/projects/backend/graphql-api/mutations/update-by-filter-mutations' +slug: '/backend/graphql-api/mutations/update-by-filter-mutations' --- -# Mutating multiple records using filters - -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +# Mutating Multiple Records Using Filters You can update multiple table records using 8base's auto-generated GraphQL mutation operations. -**\*Note**: Some examples might use [aliases](/projects/backend/graphql-api/#aliases) to show side by side the use of `data.id` versus `filter`. All examples work without aliases.\* +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. + +:::note +Some examples might use [aliases](/backend/graphql-api/#aliases) to show side by side the use of `data.id` versus `filter`. All examples work without aliases. +::: -##### Updating all post's titles published before a given day +## Updating all post's titles published before a given day Prefix the title of every post published before a specific date with the string "LEGACY: ". -```javascript +```graphql mutation { postUpdateByFilter( data: { @@ -59,13 +61,15 @@ mutation { } ``` -### Field Type Predicates +## Field Type Predicates When using the `tableNameUpdateByFilter` operation, different field types have different functions that can be used. -**NOTE: When running the updateByFilter operation, only one coercive method can be used at a time per field.** +:::note +When running the `updateByFilter` operation, only one coercive method can be used at a time per field. +::: -##### String +## String - **prefix**: String - Prepends a supplied string to the field's existing value. - **postfix**: String - Appends a supplied string to the field's existing value. @@ -83,7 +87,7 @@ mutation { } ``` -##### Number +## Number - **add**: Int - Adds a supplied Int to the field's existing value. - **sub**: Int - Subtracts a supplied Int from the field's existing value. @@ -106,7 +110,7 @@ mutation { } ``` -##### Date +## Date - **set**: String - Sets a supplied Date as the field's new value. - **add**: UpdateByFilterDatePartsInput - Adds a given number of Days, Months, Years, Hours, Minutes, Seconds, and Microseconds to the field's existing value. @@ -137,7 +141,7 @@ mutation { } ``` -##### Switch +### Switch - **set**: Boolean|String - Set the field's existing value to a supplied Boolean or String value. - **invert**: Boolean - Switches the field's existing value to its Boolean opposite (`true -> false`, `false -> true`) @@ -154,7 +158,7 @@ mutation { } ``` -##### JSON +### JSON - **set**: JSON - Set the field's existing value to a supplied JSON object. diff --git a/docs/projects/backend/8base-console-graphql-api-queries-aggregation-query.md b/docs/projects/backend/graphql/graphql-api-queries-aggregation-query.md similarity index 53% rename from docs/projects/backend/8base-console-graphql-api-queries-aggregation-query.md rename to docs/projects/backend/graphql/graphql-api-queries-aggregation-query.md index a782e0f..318d251 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-aggregation-query.md +++ b/docs/projects/backend/graphql/graphql-api-queries-aggregation-query.md @@ -1,23 +1,18 @@ --- -id: '8base-console-graphql-api-queries-aggregation-query' +id: 'graphql-api-queries-aggregation-query' sidebar_label: 'Aggregation Query' -redirect_from: '/backend/graphql-api/queries/aggregation-query' -slug: '/projects/backend/graphql-api/queries/aggregation-query' +redirect_from: '/projects/backend/graphql-api/queries/aggregation-query' +slug: '/backend/graphql-api/queries/aggregation-query' --- # Simple Aggregation - -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ - -## Using aggregators in queries - You can fetch aggregations on nodes using an aggregation query. Currently the available aggregation function is `count`. -
-
- +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -```javascript +**Request** + +```graphql query { author(name: "Huxley") { name @@ -31,9 +26,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -52,5 +45,4 @@ query { } ``` -
-
+ diff --git a/docs/projects/backend/8base-console-graphql-api-queries-combining-arguments.md b/docs/projects/backend/graphql/graphql-api-queries-combining-arguments.md similarity index 55% rename from docs/projects/backend/8base-console-graphql-api-queries-combining-arguments.md rename to docs/projects/backend/graphql/graphql-api-queries-combining-arguments.md index c870ee2..1c64622 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-combining-arguments.md +++ b/docs/projects/backend/graphql/graphql-api-queries-combining-arguments.md @@ -1,23 +1,19 @@ --- -id: '8base-console-graphql-api-queries-combining-arguments' +id: 'graphql-api-queries-combining-arguments' sidebar_label: 'Combining Arguments' -redirect_from: '/backend/graphql-api/queries/combining-arguments' -slug: '/projects/backend/graphql-api/queries/combining-arguments' +redirect_from: '/projects/backend/graphql-api/queries/combining-arguments' +slug: '/backend/graphql-api/queries/combining-arguments' --- # Combining Arguments -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +More than one argument can be used in a single list query. -## Using multiple arguments in queries +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -More than one argument can get used in a single list query. +**Request** -
-
- - -```javascript +```graphql query { postsList(filter: { title: { @@ -41,9 +37,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -70,5 +64,4 @@ query { } ``` -
-
+ diff --git a/docs/projects/backend/8base-console-graphql-api-queries-combining-queries.md b/docs/projects/backend/graphql/graphql-api-queries-combining-queries.md similarity index 62% rename from docs/projects/backend/8base-console-graphql-api-queries-combining-queries.md rename to docs/projects/backend/graphql/graphql-api-queries-combining-queries.md index 5782a57..d1221f4 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-combining-queries.md +++ b/docs/projects/backend/graphql/graphql-api-queries-combining-queries.md @@ -1,23 +1,19 @@ --- -id: '8base-console-graphql-api-queries-combining-queries' +id: 'graphql-api-queries-combining-queries' sidebar_label: 'Combining Queries' -redirect_from: '/backend/graphql-api/queries/combining-queries' -slug: '/projects/backend/graphql-api/queries/combining-queries' +redirect_from: '/projects/backend/graphql-api/queries/combining-queries' +slug: '/backend/graphql-api/queries/combining-queries' --- # Combining Queries -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +You can combine multiple queries into a single request. If multiple queries are combined into a single request, they get executed in parallel, the responses are collated and returned as a single response object. This lets you fetch objects of different and unrelated types in the same query. -## Using multiple queries in a request +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -If multiple queries are combined into a single request, they get executed in parallel, the responses are collated and returned as a single response object. This lets you fetch objects of different and unrelated types in the same query. +**Request** -
-
- - -```javascript +```graphql query { /* A profile about the author */ author(name: "Huxley") { @@ -56,9 +52,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -104,5 +98,4 @@ query { } ``` -
-
+ diff --git a/docs/projects/backend/8base-console-graphql-api-queries-filtered-list-query.md b/docs/projects/backend/graphql/graphql-api-queries-filtered-list-query.md similarity index 85% rename from docs/projects/backend/8base-console-graphql-api-queries-filtered-list-query.md rename to docs/projects/backend/graphql/graphql-api-queries-filtered-list-query.md index 8d5cb28..ee7d992 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-filtered-list-query.md +++ b/docs/projects/backend/graphql/graphql-api-queries-filtered-list-query.md @@ -1,23 +1,21 @@ --- -id: '8base-console-graphql-api-queries-filtered-list-query' +id: 'graphql-api-queries-filtered-list-query' sidebar_label: 'Filtered List Query' -redirect_from: '/backend/graphql-api/queries/filtered-list-query' -slug: '/projects/backend/graphql-api/queries/filtered-list-query' +redirect_from: '/projects/backend/graphql-api/queries/filtered-list-query' +slug: '/backend/graphql-api/queries/filtered-list-query' --- # Filtered List Queries -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +You can filter your query results. In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -## Using filters in queries +## Using Filters in Queries Query list of records that are filtered. Notice the `filter` argument. -
-
- +**Request** -```javascript +```graphql query { postsList(filter: { title: { @@ -35,9 +33,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -58,22 +54,17 @@ query { } ``` -
-
- ## Conditional Filters -Conditional filters utilize the `AND` and `OR` keys. +Conditional filters use the `AND` and `OR` keys. ### Using `AND` When `AND` is specified, all filter objects must return _truthy_. -
-
- +**Request** -```javascript +```graphql query { postsList(filter: { /* 1 to N filters can be specified */ @@ -102,9 +93,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -123,18 +112,15 @@ query { } ``` -
-
+ ### Using `OR` When `OR` is specified, at least one filter object must return _truthy_. -
-
- +**Request** -```javascript +```graphql query { postsList(filter: { OR: [ @@ -162,9 +148,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -195,18 +179,15 @@ query { } ``` -
-
+ ## Nested Filters Filters, and all their elements, can be nested to satisfy more complex specs. -
-
- +**Request** -```javascript +```graphql query { postsList(filter: { OR: [ @@ -252,9 +233,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -288,9 +267,6 @@ query { } ``` -
-
- ## Filter Types Depending on a field type, different filter predicates are available. diff --git a/docs/projects/backend/8base-console-graphql-api-queries-paginated-query-results.md b/docs/projects/backend/graphql/graphql-api-queries-paginated-query-results.md similarity index 63% rename from docs/projects/backend/8base-console-graphql-api-queries-paginated-query-results.md rename to docs/projects/backend/graphql/graphql-api-queries-paginated-query-results.md index 52d366e..59fa0bb 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-paginated-query-results.md +++ b/docs/projects/backend/graphql/graphql-api-queries-paginated-query-results.md @@ -1,13 +1,13 @@ --- -id: '8base-console-graphql-api-queries-paginated-query-results' +id: 'graphql-api-queries-paginated-query-results' sidebar_label: 'Paginated Query Results' -redirect_from: '/backend/graphql-api/queries/paginated-query-results' -slug: '/projects/backend/graphql-api/queries/paginated-query-results' +redirect_from: '/projects/backend/graphql-api/queries/paginated-query-results' +slug: '/backend/graphql-api/queries/paginated-query-results' --- # Pagenated Queries -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. ## Using pagination in queries @@ -15,11 +15,9 @@ The arguments `skip` and `first` get used for pagination. `first` specifies the number of rows to pass from the result set and `skip` determines which slice to retain from the results. -
-
- +**Request** -```javascript +```graphql query { /** * First consider 0 as the starting slice of paginated rcords. As this @@ -35,9 +33,7 @@ query { ``` -
-
- +**Result** ```json { @@ -59,5 +55,4 @@ query { } ``` -
-
+ diff --git a/docs/projects/backend/8base-console-graphql-api-queries-readme.md b/docs/projects/backend/graphql/graphql-api-queries-readme.md similarity index 54% rename from docs/projects/backend/8base-console-graphql-api-queries-readme.md rename to docs/projects/backend/graphql/graphql-api-queries-readme.md index ba095a7..9b4f75d 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-readme.md +++ b/docs/projects/backend/graphql/graphql-api-queries-readme.md @@ -1,36 +1,33 @@ --- -id: '8base-console-graphql-api-queries-readme' -redirect_from: '/backend/graphql-api/queries' -slug: '/projects/backend/graphql-api/queries' +id: 'graphql-api-queries-readme' +sidebar_label: 'GraphQL Queries' +redirect_from: '/projects/backend/graphql-api/queries' +slug: '/backend/graphql-api/queries' --- - -# Queries - -### GraphQL Queries +# GraphQL Queries GraphQL queries are used to fetch data via the workspace API. 8base's GraphQL engine auto-generates queries as part of the GraphQL schema based on your workspace tables. All workspace tables can be queried through the workspace endpoint. -### Auto-generated queries +## Auto-generated queries Whenever a table is added to a work space, two GraphQL query operations are auto-generated for the table. They are: - `tableName(...)` - Accepts `id` and any _unique_ value as an argument to retreive a single record from the database. - - `tableNameList(...)` - Accepts _filter_, _sort_, _skip_, _after_, _before_, _first_, _withDeleted_, and, _last_ to retrive a list of curated records while supporting pagination, relational-filtering, sorting, and more. -##### List Arguments +### List Arguments 8base responds to the following query arguments when specified for _lists_. -- **filter**. Filters records based on field values. -- **orderBy**. [DEPRECIATING - Use *sort*] -- **sort**. Sort order configuration. Can be single- or multi- field sorting. -- **first**. Limit query to first N records. Default and maximum value is 5000. -- **skip**. Skip N records from the result. -- **last**. Return N last records from the result. -- **after**. Return records after specified ID. Used for cursor-based pagination. -- **before**. Return records before specified ID. Used for cursor-based pagination. -- **withDeleted**. Includes records in response that have previously been deleted. -- **extraFields**. ExtraFields allow developers to specify calculated results that get returned in the API response, depending on the field type. +- **filter**: Filters records based on field values. +- **orderBy**: [DEPRECIATING - Use *sort*] +- **sort**: Sort order configuration. Can be single- or multi- field sorting. +- **first**: Limit query to first N records. Default and maximum value is 5000. +- **skip**: Skip N records from the result. +- **last**: Return N last records from the result. +- **after**: Return records after specified ID. Used for cursor-based pagination. +- **before**: Return records before specified ID. Used for cursor-based pagination. +- **withDeleted**: Includes records in response that have previously been deleted. +- **extraFields**: ExtraFields allow developers to specify calculated results that get returned in the API response, depending on the field type. diff --git a/docs/projects/backend/8base-console-graphql-api-queries-record-list-query.md b/docs/projects/backend/graphql/graphql-api-queries-record-list-query.md similarity index 61% rename from docs/projects/backend/8base-console-graphql-api-queries-record-list-query.md rename to docs/projects/backend/graphql/graphql-api-queries-record-list-query.md index 538eb91..f6302f9 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-record-list-query.md +++ b/docs/projects/backend/graphql/graphql-api-queries-record-list-query.md @@ -1,23 +1,21 @@ --- -id: '8base-console-graphql-api-queries-record-list-query' +id: 'graphql-api-queries-record-list-query' sidebar_label: 'Record List Query' -redirect_from: '/backend/graphql-api/queries/record-list-query' -slug: '/projects/backend/graphql-api/queries/record-list-query' +redirect_from: '/projects/backend/graphql-api/queries/record-list-query' +slug: '/backend/graphql-api/queries/record-list-query' --- # Record List Query -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +You can query a list of records. In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. ## Fetching multiple table records Query list of records from a single table. Note the `items` key that denotes an array of results will get returned. -
-
- +**Request** -```javascript +```graphql query { postsList { count @@ -29,9 +27,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -57,5 +53,4 @@ query { } ``` -
-
+ diff --git a/docs/projects/backend/graphql/graphql-api-queries-related-data.md b/docs/projects/backend/graphql/graphql-api-queries-related-data.md new file mode 100644 index 0000000..2afe871 --- /dev/null +++ b/docs/projects/backend/graphql/graphql-api-queries-related-data.md @@ -0,0 +1,8 @@ +--- +id: 'graphql-api-queries-related-data' +sidebar_label: 'Related Data' +slug: '/backend/graphql-api/queries/related-data' +--- +# Related Data + +To be filled \ No newline at end of file diff --git a/docs/projects/backend/graphql/graphql-api-queries-related-record-query.md b/docs/projects/backend/graphql/graphql-api-queries-related-record-query.md new file mode 100644 index 0000000..bf7c187 --- /dev/null +++ b/docs/projects/backend/graphql/graphql-api-queries-related-record-query.md @@ -0,0 +1,48 @@ +--- +id: 'graphql-api-queries-related-record-query' +sidebar_label: 'Retrieving a Record' +slug: '/backend/graphql-api/queries/related-record-query' +--- +# Retrieving a Record + +You can use queries to retrieve records. In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. + +## Fetching related table records + +Query a single record and return data from related tables in the response. + +**Request** + +```graphql +query { + post(title: "Awesome Possum") { + title + author { + name + avatar { + downloadUrl + } + } + } +} +``` + +**Result** + +```json +{ + "data": { + "post": { + "title": "Awesome Possum", + "author": { + "name": "Huxley", + "avatar": { + "downloadUrl": "https://linktomy.downloadUrl/forA/amazingAvatar.jpg" + } + } + } + } +} +``` + + diff --git a/docs/projects/backend/graphql/graphql-api-queries-related-record-retrieve-list.md b/docs/projects/backend/graphql/graphql-api-queries-related-record-retrieve-list.md new file mode 100644 index 0000000..d0ed081 --- /dev/null +++ b/docs/projects/backend/graphql/graphql-api-queries-related-record-retrieve-list.md @@ -0,0 +1,8 @@ +--- +id: 'graphql-api-queries-related-record-retrieve-list' +sidebar_label: 'Retrieving a List' +# slug: '/backend/graphql-api/queries/related-record-retrieve-list' +--- +# Retrieving a List + +To be filled \ No newline at end of file diff --git a/docs/projects/backend/8base-console-graphql-api-queries-single-record-query.md b/docs/projects/backend/graphql/graphql-api-queries-single-record-query.md similarity index 57% rename from docs/projects/backend/8base-console-graphql-api-queries-single-record-query.md rename to docs/projects/backend/graphql/graphql-api-queries-single-record-query.md index d997ea8..8a7fcef 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-single-record-query.md +++ b/docs/projects/backend/graphql/graphql-api-queries-single-record-query.md @@ -1,23 +1,21 @@ --- -id: '8base-console-graphql-api-queries-single-record-query' +id: 'graphql-api-queries-single-record-query' sidebar_label: 'Single Record Query' -redirect_from: '/backend/graphql-api/queries/single-record-query' -slug: '/projects/backend/graphql-api/queries/single-record-query' +redirect_from: '/projects/backend/graphql-api/queries/single-record-query' +slug: '/backend/graphql-api/queries/single-record-query' --- # Single Record Query -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +You can fetch a single record using queries. In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. ## Fetching specific table records You can fetch a single record using the record's `id`. -
-
- +**Request** -```javascript +```graphql query { post(id: "") { id @@ -27,9 +25,7 @@ query { } ``` -
-
- +**Response** ```json { @@ -43,18 +39,13 @@ query { } ``` -
-
- ## Single record queries using unique fields You can fetch a single record using a unique field other than `id`. This field must be specified as _No Duplicate Values_ in the table's field definition. -
-
- +**Request** -```javascript +```graphql query { post(title: "Awesome Possum") { title @@ -63,9 +54,7 @@ query { } ``` -
-
- +**Response** ```json { @@ -78,5 +67,3 @@ query { } ``` -
-
diff --git a/docs/projects/backend/8base-console-graphql-api-queries-sort-list-query.md b/docs/projects/backend/graphql/graphql-api-queries-sort-list-query.md similarity index 74% rename from docs/projects/backend/8base-console-graphql-api-queries-sort-list-query.md rename to docs/projects/backend/graphql/graphql-api-queries-sort-list-query.md index cbcd963..d29ff8a 100644 --- a/docs/projects/backend/8base-console-graphql-api-queries-sort-list-query.md +++ b/docs/projects/backend/graphql/graphql-api-queries-sort-list-query.md @@ -1,25 +1,23 @@ --- -id: '8base-console-graphql-api-queries-sort-list-query' -sidebar_label: 'Sort List Query' -redirect_from: '/backend/graphql-api/queries/sort-list-query' -slug: '/projects/backend/graphql-api/queries/sort-list-query' +id: 'graphql-api-queries-sort-list-query' +sidebar_label: 'Sort List Queries' +redirect_from: '/projects/backend/graphql-api/queries/sort-list-query' +slug: '/backend/graphql-api/queries/sort-list-query' --- -# Sorted List Queries +# Sort List Queries -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +Results from your query can be sorted by using the `sort` argument. The sort order (ascending vs. descending) gets set by specifying ASC or DESC for the field name. -## Using sorting in queries +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -Results from your query can be sorted by using the `sort` argument. The sort order (ascending vs. descending) gets set by specifying ASC or DESC for the field name. +## Using Sorting in Queries -Sorting a list of queried records. +Here is a query where the results will be sorted in ascending order of creation date. -
-
- +**Request** -```javascript +```graphql query { postsList(sort: { createdAt: ASC @@ -32,9 +30,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -67,18 +63,13 @@ query { } ``` -
-
+## Nested and Multi-field Sorting -## Nested/multi-field sorting +Results from your query can be sorted by attributes on related tables, as well as using multiple sort objects. They're ranked in priority by the order they are recieved in. -Results from your query can be sorted by attributes on related tables, as well as using multiple sort objects. They're ranked in priority by the order they're recieved in. +**Request** -
-
- - -```javascript +```graphql query { postsList(sort: [ { @@ -101,9 +92,7 @@ query { } ``` -
-
- +**Result** ```json { @@ -151,5 +140,4 @@ query { } ``` -
-
+ diff --git a/docs/projects/backend/8base-console-graphql-api-readme.md b/docs/projects/backend/graphql/graphql-api-readme.md similarity index 55% rename from docs/projects/backend/8base-console-graphql-api-readme.md rename to docs/projects/backend/graphql/graphql-api-readme.md index 178e44f..416142d 100644 --- a/docs/projects/backend/8base-console-graphql-api-readme.md +++ b/docs/projects/backend/graphql/graphql-api-readme.md @@ -1,34 +1,32 @@ --- -id: '8base-console-graphql-api-readme' +id: 'graphql-api-readme' sidebar_label: 'GraphQL API Overview' -redirect_from: '/backend/graphql-api' -slug: '/projects/backend/graphql-api' +redirect_from: '/project/backend/graphql-api' +slug: '/backend/graphql-api' --- # GraphQL API Overview -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +Every workspace in 8base is assigned a unique API endpoint. These endpoints handle GraphQL queries, mutations, and subscriptions for every data table. The API comes pre-configured with filtering, pagination, full-text search, and other advanced features. -### GraphQL API and Basic Concepts - -All workspaces in 8base are assigned unique API endpoints. These endpoints handle GraphQL queries, mutations and subscriptions for every data table (covering all Create, Read, Update, Delete operations, plus some...) out-of-the-box. - -All API Endpoints are structured as so: +All API Endpoints are structured like this: `https://api.8base.com/` -The API comes pre-configured with filtering, pagination, full-text search and many other advanced features, putting the best tools possible for accessing data in the front-end developer's hands. +:::info +You can extend these GraphQL resources with [Custom Functions](/backend/custom-functions). +::: -Note: Using [Custom Functions](/backend/custom-functions), these GraphQL resources can be extended and added to in any way seen fit. +There are several way of retrieving an API endpoint for your workspace. The easiest is to log into the [8base Management Console](https://app.8base.com), select a workspace, and copy the `API Endpoint` displayed on the dashboard. -There are several way of retrieving an API endpoint for your workspace. The easiest is to login to the [8base Management Console](https://app.8base.com), select a workspace and copy the `API Endpoint` displayed on the dashboard. +![Where to find a workspace API endpoint](../_images/workspace-api-endpoint.png) -![Where to find a workspace API endpoint](./_images/workspace-api-endpoint.png) +## Understanding Fields -### Understanding Fields +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. -Put simply, GraphQL is a specification for requesting fields on objects. Let's look at a simple 8base query example and the result it returns when run: +GraphQL is a specification for requesting fields on objects. Here is a simple 8base query that looks for authors named "Huxley", and when their posts were created: -```javascript +```graphql query { author(name: "Huxley") { name @@ -36,6 +34,7 @@ query { } } ``` +And here is the result: ```json { @@ -48,11 +47,15 @@ query { } ``` -We see immediately that our result has the same shape as the query. This is key to GraphQL; you always get what you ask for, and the server knows which fields the client was asking for. +The result has the same shape as the query. This is key to GraphQL: you always get what you ask for, and the server knows which fields the client is requesting. -8base GraphQL queries are interactive, and support relational queries natively. This mean two important things, 1) a query can be changed at any time, and 2) related data can be joined without writing complex database queries and serializers (it's handled for you). Let's try another example to demonstrate this. +8base GraphQL queries are interactive, and support relational queries natively. This mean two important things: +1. A query can be changed at any time. +2. Related data can be joined without writing complex database queries and serializers. -```javascript +In the next example, the `createdAt` field is removed from the query. A `posts` parameter is added. + +```graphql query { author(name: "Huxley") { name @@ -65,6 +68,7 @@ query { } } ``` +In the response, there is no `created` key. There is a new `posts` array containing its specified parameters - a sub-selection on fields for the related objects. ```json { @@ -88,13 +92,11 @@ query { } ``` -In the previous example, the `createdAt` field was removed from the query and a `posts` parameter added. In the response, we see this reflected by there no longer being a `created` key and the added `posts` array containing its specified parameters - a sub-selection on fields for the related object(s). - -### Understanding Arguments +## Understanding Arguments The power of the 8base GraphQL API is further enriched by the ability to specify different arguments when executing a query. This has been demonstrated several times now, where "Huxley" is being passed as an argument to the query (`...author(name: "Huxley")`). When creating data tables in the **Data Builder**, any field marked as _unique_ can then be used as an argument for a query. -For example, were the _Posts_ table to have the _Title_ field set to only permit unique values, we could then query a specific _Post_ record like so: +For example, if the `Posts` table had the `Title` field set to only permit unique values, we could then query a specific `Post` record: ```javascript { @@ -105,13 +107,19 @@ For example, were the _Posts_ table to have the _Title_ field set to only permit } ``` -### Variables +## Variables -![Using Variables in GraphQL queries](./_images/api-explorer-variables-examples.png) +You can make queries re-usable and dynamic by using variables in the API Explorer. -In order to make a query re-usable, it can be made dynamic by using variables. +To work with variables, you need to: -```javascript +1. Replace the static value in the query with the `$variableName`. +2. Declare the `$variableName` as one of the variables accepted by the query. +3. Pass `variableName: value` in the separate variables dictionary. + +Here is the query: + +```query query($filter: PostFilter) { postsList(filter: $filter) { count @@ -122,7 +130,7 @@ query($filter: PostFilter) { } ``` -{% code-tabs-item title="Variables" %} +Here is the variable: ```json { @@ -133,6 +141,7 @@ query($filter: PostFilter) { } } ``` +And this is the result: ```json { @@ -151,12 +160,16 @@ query($filter: PostFilter) { } } ``` +In the API Explorer, it looks like this: +![Using Variables in GraphQL queries](../_images/api-explorer-variables-examples.png) -### Aliases +## Aliases Aliases are used to return objects having different names than their field names. This is needed when fetching the same type of objects with different arguments in a single query. -```javascript +Below you can see that Huxley has an alias of "hux": + +```graphql query { hux: author(name: "Huxley") { name @@ -173,6 +186,7 @@ query { } } ``` +Result: ```json { @@ -193,11 +207,11 @@ query { } ``` -### Fragments +## Fragments -Queries can get verbose and unorganized. Fragments create a set of fields that can then be used to represent the defined set. +Queries can become long and complex. Fragments create a set of fields that can be used to represent the defined set. If you wanted several fields from two different authors, you can use a fragment, instead of repeating the fields twice. In this query, we have a fragment called `{ ...authorFrag }`, which contains several fields: -```javascript +```graphql query { hux: author(name: "Huxley") { ...authorFrag } steve: author(name: "Stevens") { ...authorFrag } @@ -215,6 +229,7 @@ fragment authorFrag on Author { } } ``` +The result: ```json { diff --git a/docs/projects/backend/8base-console-graphql-api-subscriptions-client.md b/docs/projects/backend/graphql/graphql-api-subscriptions-client.md similarity index 87% rename from docs/projects/backend/8base-console-graphql-api-subscriptions-client.md rename to docs/projects/backend/graphql/graphql-api-subscriptions-client.md index e685748..2e28d1a 100644 --- a/docs/projects/backend/8base-console-graphql-api-subscriptions-client.md +++ b/docs/projects/backend/graphql/graphql-api-subscriptions-client.md @@ -1,11 +1,11 @@ --- -id: '8base-console-graphql-api-subscriptions-client' +id: 'graphql-api-subscriptions-client' sidebar_label: 'Subscriptions Client using React Apollo' -redirect_from: '/backend/graphql-api/subscriptions/client' -slug: '/projects/backend/graphql-api/subscriptions/client' +redirect_from: '/projects/backend/graphql-api/subscriptions/client' +slug: '/backend/graphql-api/subscriptions/client' --- -# Subscriptions +# Subscriptions Client using React Apollo Subscriptions let your client-side application receive server-side events from the 8base platform. This is useful when you are building real-time functionality such as chats or notifications. Subscriptions are automatically generated for every data table you create. diff --git a/docs/projects/backend/8base-console-graphql-api-subscriptions-complex-record-subscriptions.md b/docs/projects/backend/graphql/graphql-api-subscriptions-complex-record-subscriptions.md similarity index 86% rename from docs/projects/backend/8base-console-graphql-api-subscriptions-complex-record-subscriptions.md rename to docs/projects/backend/graphql/graphql-api-subscriptions-complex-record-subscriptions.md index 13ebd12..441233b 100644 --- a/docs/projects/backend/8base-console-graphql-api-subscriptions-complex-record-subscriptions.md +++ b/docs/projects/backend/graphql/graphql-api-subscriptions-complex-record-subscriptions.md @@ -1,13 +1,13 @@ --- -id: '8base-console-graphql-api-subscriptions-complex-record-subscriptions' +id: 'graphql-api-subscriptions-complex-record-subscriptions' sidebar_label: 'Complex Record Subscriptions' -redirect_from: '/backend/graphql-api/subscriptions/complex-record-subscriptions' -slug: '/projects/backend/graphql-api/subscriptions/complex-record-subscriptions' +redirect_from: '/projects/backend/graphql-api/subscriptions/complex-record-subscriptions' +slug: '/backend/graphql-api/subscriptions/complex-record-subscriptions' --- # Complex Record Subscriptions -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. ## Subscriptions using filters diff --git a/docs/projects/backend/8base-console-graphql-api-subscriptions-readme.md b/docs/projects/backend/graphql/graphql-api-subscriptions-readme.md similarity index 77% rename from docs/projects/backend/8base-console-graphql-api-subscriptions-readme.md rename to docs/projects/backend/graphql/graphql-api-subscriptions-readme.md index ba40fb3..09a934d 100644 --- a/docs/projects/backend/8base-console-graphql-api-subscriptions-readme.md +++ b/docs/projects/backend/graphql/graphql-api-subscriptions-readme.md @@ -1,19 +1,17 @@ --- -id: '8base-console-graphql-api-subscriptions-readme' -redirect_from: '/backend/graphql-api/subscriptions' -slug: '/projects/backend/graphql-api/subscriptions' +id: 'graphql-api-subscriptions-readme' +sidebar_label: 'GraphQL Subscriptions' +redirect_from: '/projects/backend/graphql-api/subscriptions' +slug: '/backend/graphql-api/subscriptions' --- - -# Subscriptions - -_For the sake of the any examples, let's consider a scenario where a table called Posts exists, having expected fields and relations like title, body, author, etc._ - -## GraphQL Subscriptions +# GraphQL Subscriptions A GraphQL subscription is a web-socket connection where the client receives an event with data whenever the observed event occurs upstream. 8base's GraphQL engine auto-generates subscriptions as part of the GraphQL schema based on your workspace tables. All workspace tables can receive subscriptions through the workspace endpoint using `wss` protocol. +For the sake of the any examples, let's consider a scenario where a table called Posts exists, having expected fields and relations like title, body, author, etc. + ## Auto-generated subscriptions Whenever a table is added to a work space, a GraphQL subscriptions operation is auto-generated for the table. diff --git a/docs/projects/backend/8base-console-graphql-api-subscriptions-simple-record-subscriptions.md b/docs/projects/backend/graphql/graphql-api-subscriptions-simple-record-subscriptions.md similarity index 76% rename from docs/projects/backend/8base-console-graphql-api-subscriptions-simple-record-subscriptions.md rename to docs/projects/backend/graphql/graphql-api-subscriptions-simple-record-subscriptions.md index d1779da..6b648fd 100644 --- a/docs/projects/backend/8base-console-graphql-api-subscriptions-simple-record-subscriptions.md +++ b/docs/projects/backend/graphql/graphql-api-subscriptions-simple-record-subscriptions.md @@ -1,19 +1,17 @@ --- -id: '8base-console-graphql-api-subscriptions-simple-record-subscriptions' +id: 'graphql-api-subscriptions-simple-record-subscriptions' sidebar_label: 'Simple Record Subscriptions' -redirect_from: '/backend/graphql-api/subscriptions/simple-record-subscriptions' -slug: '/projects/backend/graphql-api/subscriptions/simple-record-subscriptions' +redirect_from: '/projects/backend/graphql-api/subscriptions/simple-record-subscriptions' +slug: '/backend/graphql-api/subscriptions/simple-record-subscriptions' --- # Simple Record Subscriptions -_For the sake of the following examples, let's consider a scenario where a table called `Posts` exists, having expected fields and relations like `title`, `body`, `author`, etc._ - -## Subscribing to records - You can subscribe to records being created, updated, and deleted using 8base's auto-generated GraphQL subscription operation. -### Create subscription +In the following examples, we have a table called `Posts`, which contains fields and relations like `title`, `body`, `author`. + +### Create a Subscription Subscription for listening to table records being created. @@ -43,7 +41,7 @@ subscription { } ``` -### Update subscription +### Update a Subscription Subscription for listening to table records being updated. @@ -87,7 +85,7 @@ subscription { } ``` -### Delete subscription +### Delete a Subscription Subscription for listening to table records being deleted. diff --git a/docs/projects/backend/8base-console-graphql-api-variables.md b/docs/projects/backend/graphql/graphql-api-variables.md similarity index 87% rename from docs/projects/backend/8base-console-graphql-api-variables.md rename to docs/projects/backend/graphql/graphql-api-variables.md index 586bf08..db8031d 100644 --- a/docs/projects/backend/8base-console-graphql-api-variables.md +++ b/docs/projects/backend/graphql/graphql-api-variables.md @@ -1,23 +1,23 @@ --- -id: '8base-console-graphql-api-variables' +id: 'graphql-api-variables' sidebar_label: 'Variables' -redirect_from: '/backend/graphql-api/variables' -slug: '/projects/backend/graphql-api/variables' +redirect_from: '/projects/backend/graphql-api/variables' +slug: '/backend/graphql-api/variables' --- -# Variables Definitions +# Variables To avoid hardcoding all values when working with GraphQL, the **API Explorer** provides a _Variables_ section in which a JSON object can be added. The top level keys of the JSON object are made available as variables that have names denoted by a dollar-sign ($KEY_NAME). This allows for a much more enjoyable development experience when writing and testing dynamic queries, mutations, and subscriptions. -![Declaring variables in the API Explorer](./_images/api-explorer-query-variables.png) +![Declaring variables in the API Explorer](../_images/api-explorer-query-variables.png) -### Declaring Variables +## Declaring Variables Some dynamic inputs might need to be added when you submit a request to your GraphQL server, while keeping the operation document remains the same. These are your operation's variables. Variables must be typed arguments that get declared on the GraphQL operation. Because GraphQL is typed statically, whether you're passing in the correct variables can be validated for you. The following two examples would work together for querying a list of female users over the age of 45. -##### JSON Variable +### JSON Variable ```json { @@ -26,7 +26,7 @@ The following two examples would work together for querying a list of female use } ``` -##### Query +### Query ```js query ($gender: String, $age: Int) { @@ -49,13 +49,13 @@ query ($gender: String, $age: Int) { You can see that the keys here match the variable names specified in the variables definition. These variable names denoted with the _$_ are what get used in the selecton set. -### Declaring Typed Variables +## Declaring Typed Variables Variables are not limited to being single input values. They can be complex objects with any declared _type_ in a given workspace - native or custom. This allows for things like entire filters, sorts, and many others to get passed dynamically as variables. The following two examples would work together for querying a list of _Posts_ in "draft" status that belong to the _Author_, which is the logged in user - supplying the filter as a variable. -##### JSON Variable +### JSON Variable ```json { @@ -88,7 +88,7 @@ The following two examples would work together for querying a list of _Posts_ in } ``` -##### Query +### Query ```js query ($filter: postFilter) { diff --git a/docs/projects/frontend/PLACEHOLDER_REF.md b/docs/projects/frontend/PLACEHOLDER_REF.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/projects/frontend/_images/ab-app-components-component-categories-1.png b/docs/projects/frontend/_images/ab-app-components-component-categories-1.png deleted file mode 100644 index f24ab13..0000000 Binary files a/docs/projects/frontend/_images/ab-app-components-component-categories-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-components-component-groups-1.png b/docs/projects/frontend/_images/ab-app-components-component-groups-1.png deleted file mode 100644 index 0aa9f5a..0000000 Binary files a/docs/projects/frontend/_images/ab-app-components-component-groups-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-components-component-groups-2.png b/docs/projects/frontend/_images/ab-app-components-component-groups-2.png deleted file mode 100644 index d72452a..0000000 Binary files a/docs/projects/frontend/_images/ab-app-components-component-groups-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-components-component-groups-3.png b/docs/projects/frontend/_images/ab-app-components-component-groups-3.png deleted file mode 100644 index ad31b9b..0000000 Binary files a/docs/projects/frontend/_images/ab-app-components-component-groups-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-components-component-groups-4.png b/docs/projects/frontend/_images/ab-app-components-component-groups-4.png deleted file mode 100644 index d110564..0000000 Binary files a/docs/projects/frontend/_images/ab-app-components-component-groups-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-404-and-error-pages-1.png b/docs/projects/frontend/_images/ab-app-navigation-404-and-error-pages-1.png deleted file mode 100644 index f502863..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-404-and-error-pages-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-1.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-1.png deleted file mode 100644 index a155a38..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-2.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-2.png deleted file mode 100644 index df70994..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-3.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-3.png deleted file mode 100644 index 15cc9b7..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-4.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-4.png deleted file mode 100644 index e9228eb..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-5.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-5.png deleted file mode 100644 index f821e79..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-access-states-for-routes-1.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-access-states-for-routes-1.png deleted file mode 100644 index 4379714..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-access-states-for-routes-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-1.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-1.png deleted file mode 100644 index 51ad74d..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-2.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-2.png deleted file mode 100644 index 55dd8fd..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-1.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-1.png deleted file mode 100644 index 10a6869..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-2.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-2.png deleted file mode 100644 index 1bf3ed8..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages-1.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages-1.png deleted file mode 100644 index 7b00690..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-using-url-fragment-parameters-1.png b/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-using-url-fragment-parameters-1.png deleted file mode 100644 index 8dab86d..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-create-and-editing-app-pages-using-url-fragment-parameters-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-creating-and-editing-app-pages-url-settings-1.png b/docs/projects/frontend/_images/ab-app-navigation-creating-and-editing-app-pages-url-settings-1.png deleted file mode 100644 index d2f7ca6..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-creating-and-editing-app-pages-url-settings-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-app-navigation-intro-1.png b/docs/projects/frontend/_images/ab-app-navigation-intro-1.png deleted file mode 100644 index 0b0cd8c..0000000 Binary files a/docs/projects/frontend/_images/ab-app-navigation-intro-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-1.png b/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-1.png deleted file mode 100644 index 9c2e802..0000000 Binary files a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-2.png b/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-2.png deleted file mode 100644 index 684c1f9..0000000 Binary files a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-3.png b/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-3.png deleted file mode 100644 index ccf115f..0000000 Binary files a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-4.png b/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-4.png deleted file mode 100644 index d7a0d4a..0000000 Binary files a/docs/projects/frontend/_images/ab-application-layouts-creating-and-editing-layouts-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-application-layouts-introduction-1.png b/docs/projects/frontend/_images/ab-application-layouts-introduction-1.png deleted file mode 100644 index 0dd297a..0000000 Binary files a/docs/projects/frontend/_images/ab-application-layouts-introduction-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-dropzone-edit.gif b/docs/projects/frontend/_images/ab-component-dropzone-edit.gif deleted file mode 100644 index dfb803c..0000000 Binary files a/docs/projects/frontend/_images/ab-component-dropzone-edit.gif and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-dropzone.gif b/docs/projects/frontend/_images/ab-component-dropzone.gif deleted file mode 100644 index 7e27f4b..0000000 Binary files a/docs/projects/frontend/_images/ab-component-dropzone.gif and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-dropzone8base.gif b/docs/projects/frontend/_images/ab-component-dropzone8base.gif deleted file mode 100644 index c0b7fdd..0000000 Binary files a/docs/projects/frontend/_images/ab-component-dropzone8base.gif and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-library-1.png b/docs/projects/frontend/_images/ab-component-library-1.png deleted file mode 100644 index 09afecc..0000000 Binary files a/docs/projects/frontend/_images/ab-component-library-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-library-2.png b/docs/projects/frontend/_images/ab-component-library-2.png deleted file mode 100644 index 2790313..0000000 Binary files a/docs/projects/frontend/_images/ab-component-library-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-library-groups-1.png b/docs/projects/frontend/_images/ab-component-library-groups-1.png deleted file mode 100644 index 15aeae6..0000000 Binary files a/docs/projects/frontend/_images/ab-component-library-groups-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-library-groups-2.png b/docs/projects/frontend/_images/ab-component-library-groups-2.png deleted file mode 100644 index e9de77b..0000000 Binary files a/docs/projects/frontend/_images/ab-component-library-groups-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-settings-events-1.png b/docs/projects/frontend/_images/ab-component-settings-events-1.png deleted file mode 100644 index f741a05..0000000 Binary files a/docs/projects/frontend/_images/ab-component-settings-events-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-settings-properties-1.png b/docs/projects/frontend/_images/ab-component-settings-properties-1.png deleted file mode 100644 index 6f518b7..0000000 Binary files a/docs/projects/frontend/_images/ab-component-settings-properties-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-settings-styles-1.png b/docs/projects/frontend/_images/ab-component-settings-styles-1.png deleted file mode 100644 index ee7b84c..0000000 Binary files a/docs/projects/frontend/_images/ab-component-settings-styles-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-settings-styles-2.png b/docs/projects/frontend/_images/ab-component-settings-styles-2.png deleted file mode 100644 index e444ed0..0000000 Binary files a/docs/projects/frontend/_images/ab-component-settings-styles-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-component-settings-styles-3.png b/docs/projects/frontend/_images/ab-component-settings-styles-3.png deleted file mode 100644 index ca97935..0000000 Binary files a/docs/projects/frontend/_images/ab-component-settings-styles-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-components-file-picker-button-8base.gif b/docs/projects/frontend/_images/ab-components-file-picker-button-8base.gif deleted file mode 100644 index d0f953b..0000000 Binary files a/docs/projects/frontend/_images/ab-components-file-picker-button-8base.gif and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-creating-api-connections-1.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-creating-api-connections-1.png deleted file mode 100644 index a73ca69..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-creating-api-connections-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.png deleted file mode 100644 index d01151a..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-1.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-1.png deleted file mode 100644 index f81ef09..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-2.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-2.png deleted file mode 100644 index bb04593..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-3.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-3.png deleted file mode 100644 index 752456d..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-1.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-1.png deleted file mode 100644 index cb055fa..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-2.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-2.png deleted file mode 100644 index b0f7c90..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-1.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-1.png deleted file mode 100644 index 612679a..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-2.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-2.png deleted file mode 100644 index 540fced..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-3.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-3.png deleted file mode 100644 index cab3b24..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-4.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-4.png deleted file mode 100644 index f345798..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-5.png b/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-5.png deleted file mode 100644 index 48c8ac4..0000000 Binary files a/docs/projects/frontend/_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-create-app.png b/docs/projects/frontend/_images/ab-create-app.png deleted file mode 100644 index ed92e49..0000000 Binary files a/docs/projects/frontend/_images/ab-create-app.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-creating-pages-1.png b/docs/projects/frontend/_images/ab-creating-pages-1.png deleted file mode 100644 index c5c002a..0000000 Binary files a/docs/projects/frontend/_images/ab-creating-pages-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-a-function-from-a-callback-1.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-a-function-from-a-callback-1.png deleted file mode 100644 index 37358cb..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-a-function-from-a-callback-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-a-function-from-a-function-1.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-a-function-from-a-function-1.png deleted file mode 100644 index c3d7a7d..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-a-function-from-a-function-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-frontend-functions-1.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-frontend-functions-1.png deleted file mode 100644 index 6e67229..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-calling-frontend-functions-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-creating-custom-frontend-functions-1.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-creating-custom-frontend-functions-1.png deleted file mode 100644 index 188c011..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-creating-custom-frontend-functions-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-introduction-1-updated.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-introduction-1-updated.png deleted file mode 100644 index 98b93da..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-introduction-1-updated.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-using-installed-js-libraries-in-scripts-1.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-using-installed-js-libraries-in-scripts-1.png deleted file mode 100644 index 5f7bce9..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-using-installed-js-libraries-in-scripts-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-frontend-logic-using-installed-js-libraries-in-scripts-2.png b/docs/projects/frontend/_images/ab-custom-frontend-logic-using-installed-js-libraries-in-scripts-2.png deleted file mode 100644 index 7c59757..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-frontend-logic-using-installed-js-libraries-in-scripts-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-1.png b/docs/projects/frontend/_images/ab-custom-styles-1.png deleted file mode 100644 index 06da5b3..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-component-defaults-1.png b/docs/projects/frontend/_images/ab-custom-styles-component-defaults-1.png deleted file mode 100644 index 39ba290..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-component-defaults-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-component-defaults-2.png b/docs/projects/frontend/_images/ab-custom-styles-component-defaults-2.png deleted file mode 100644 index 58f4c78..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-component-defaults-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-component-defaults-3.png b/docs/projects/frontend/_images/ab-custom-styles-component-defaults-3.png deleted file mode 100644 index b5950f7..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-component-defaults-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-css-1.png b/docs/projects/frontend/_images/ab-custom-styles-css-1.png deleted file mode 100644 index 1167005..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-css-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-font-3.png b/docs/projects/frontend/_images/ab-custom-styles-font-3.png deleted file mode 100644 index e26a696..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-font-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-font-4.png b/docs/projects/frontend/_images/ab-custom-styles-font-4.png deleted file mode 100644 index da28846..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-font-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-fonts-1.png b/docs/projects/frontend/_images/ab-custom-styles-fonts-1.png deleted file mode 100644 index 99c2bb6..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-fonts-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-fonts-2.png b/docs/projects/frontend/_images/ab-custom-styles-fonts-2.png deleted file mode 100644 index 501d574..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-fonts-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-styling-components-1.png b/docs/projects/frontend/_images/ab-custom-styles-styling-components-1.png deleted file mode 100644 index 40dc6b4..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-styling-components-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-styling-components-2.png b/docs/projects/frontend/_images/ab-custom-styles-styling-components-2.png deleted file mode 100644 index f1f7fd6..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-styling-components-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-styling-components-3.png b/docs/projects/frontend/_images/ab-custom-styles-styling-components-3.png deleted file mode 100644 index 73744c8..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-styling-components-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-theme-2.png b/docs/projects/frontend/_images/ab-custom-styles-theme-2.png deleted file mode 100644 index 1db17f7..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-theme-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-theme-3.png b/docs/projects/frontend/_images/ab-custom-styles-theme-3.png deleted file mode 100644 index c16d39b..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-theme-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-theme-4.png b/docs/projects/frontend/_images/ab-custom-styles-theme-4.png deleted file mode 100644 index 5d0defb..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-theme-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styles-theme-5.png b/docs/projects/frontend/_images/ab-custom-styles-theme-5.png deleted file mode 100644 index 98f5632..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styles-theme-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styling-theme-import-export-1.png b/docs/projects/frontend/_images/ab-custom-styling-theme-import-export-1.png deleted file mode 100644 index 2ac5ec0..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styling-theme-import-export-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styling-theme-introduction-1.png b/docs/projects/frontend/_images/ab-custom-styling-theme-introduction-1.png deleted file mode 100644 index 72d7820..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styling-theme-introduction-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-1.png b/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-1.png deleted file mode 100644 index 1f39035..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-2.png b/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-2.png deleted file mode 100644 index 7f7e9bd..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-3.png b/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-3.png deleted file mode 100644 index 9dded81..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-4.png b/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-4.png deleted file mode 100644 index 6dfa251..0000000 Binary files a/docs/projects/frontend/_images/ab-custom-styling-theme-media-queries-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-functions-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-functions-1.png deleted file mode 100644 index 405ccf5..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-functions-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-layouts-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-layouts-1.png deleted file mode 100644 index 22e85be..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-layouts-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-requests-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-requests-1.png deleted file mode 100644 index a9f8c56..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-requests-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-resource-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-resource-1.png deleted file mode 100644 index cfa8010..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-resource-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-views-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-views-1.png deleted file mode 100644 index a0a7a63..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-views-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-getting-and-setting-state-data-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-getting-and-setting-state-data-1.png deleted file mode 100644 index e8d9e14..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-getting-and-setting-state-data-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-getting-and-setting-state-data-2.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-getting-and-setting-state-data-2.png deleted file mode 100644 index f8bd746..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-getting-and-setting-state-data-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-data-in-the-frontend-understanding-local-vs-global-state-objects-1.png b/docs/projects/frontend/_images/ab-data-in-the-frontend-understanding-local-vs-global-state-objects-1.png deleted file mode 100644 index 4683149..0000000 Binary files a/docs/projects/frontend/_images/ab-data-in-the-frontend-understanding-local-vs-global-state-objects-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-deploy-cdn-1.png b/docs/projects/frontend/_images/ab-deploy-cdn-1.png deleted file mode 100644 index 6960fca..0000000 Binary files a/docs/projects/frontend/_images/ab-deploy-cdn-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-deploy-dropdown-1.png b/docs/projects/frontend/_images/ab-deploy-dropdown-1.png deleted file mode 100644 index d147764..0000000 Binary files a/docs/projects/frontend/_images/ab-deploy-dropdown-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-deploy-pane-1.png b/docs/projects/frontend/_images/ab-deploy-pane-1.png deleted file mode 100644 index b8fc2c3..0000000 Binary files a/docs/projects/frontend/_images/ab-deploy-pane-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-deploy-pending-1.png b/docs/projects/frontend/_images/ab-deploy-pending-1.png deleted file mode 100644 index 847e7cd..0000000 Binary files a/docs/projects/frontend/_images/ab-deploy-pending-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-deploy-settings-1.png b/docs/projects/frontend/_images/ab-deploy-settings-1.png deleted file mode 100644 index bed07fb..0000000 Binary files a/docs/projects/frontend/_images/ab-deploy-settings-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-deploy-ssl-1.png b/docs/projects/frontend/_images/ab-deploy-ssl-1.png deleted file mode 100644 index ff69b19..0000000 Binary files a/docs/projects/frontend/_images/ab-deploy-ssl-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editing-page-settings-1.png b/docs/projects/frontend/_images/ab-editing-page-settings-1.png deleted file mode 100644 index b3f0762..0000000 Binary files a/docs/projects/frontend/_images/ab-editing-page-settings-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-app-context-1.png b/docs/projects/frontend/_images/ab-editor-app-context-1.png deleted file mode 100644 index 0f16265..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-app-context-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-components-drawer-1.png b/docs/projects/frontend/_images/ab-editor-components-drawer-1.png deleted file mode 100644 index 58883db..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-components-drawer-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-components-drawer-2.png b/docs/projects/frontend/_images/ab-editor-components-drawer-2.png deleted file mode 100644 index cbecccb..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-components-drawer-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-header-2.png b/docs/projects/frontend/_images/ab-editor-header-2.png deleted file mode 100644 index 5a39669..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-header-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-header-menu-1.png b/docs/projects/frontend/_images/ab-editor-header-menu-1.png deleted file mode 100644 index 6eaf0d9..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-header-menu-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-hidden-canvas-1.png b/docs/projects/frontend/_images/ab-editor-hidden-canvas-1.png deleted file mode 100644 index afe5687..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-hidden-canvas-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-hidden-canvas-2.png b/docs/projects/frontend/_images/ab-editor-hidden-canvas-2.png deleted file mode 100644 index ea39d2b..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-hidden-canvas-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-page-canvas-1.png b/docs/projects/frontend/_images/ab-editor-page-canvas-1.png deleted file mode 100644 index 5c3e186..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-page-canvas-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-page-context-1.png b/docs/projects/frontend/_images/ab-editor-page-context-1.png deleted file mode 100644 index 962d92a..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-page-context-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-page-context-2.png b/docs/projects/frontend/_images/ab-editor-page-context-2.png deleted file mode 100644 index 2df6f3c..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-page-context-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-editor-page-context-3.png b/docs/projects/frontend/_images/ab-editor-page-context-3.png deleted file mode 100644 index 730d205..0000000 Binary files a/docs/projects/frontend/_images/ab-editor-page-context-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-global-context-assets-1.png b/docs/projects/frontend/_images/ab-global-context-assets-1.png deleted file mode 100644 index 9442b68..0000000 Binary files a/docs/projects/frontend/_images/ab-global-context-assets-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-global-context-settings-1.png b/docs/projects/frontend/_images/ab-global-context-settings-1.png deleted file mode 100644 index 7fae301..0000000 Binary files a/docs/projects/frontend/_images/ab-global-context-settings-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-global-context-theme-1.png b/docs/projects/frontend/_images/ab-global-context-theme-1.png deleted file mode 100644 index b138024..0000000 Binary files a/docs/projects/frontend/_images/ab-global-context-theme-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-global-settings-theme-1.png b/docs/projects/frontend/_images/ab-global-settings-theme-1.png deleted file mode 100644 index 879a7a7..0000000 Binary files a/docs/projects/frontend/_images/ab-global-settings-theme-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-1.png b/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-1.png deleted file mode 100644 index fa507a0..0000000 Binary files a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-2.png b/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-2.png deleted file mode 100644 index d2047d0..0000000 Binary files a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-introduction-1.png b/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-introduction-1.png deleted file mode 100644 index d449b20..0000000 Binary files a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-introduction-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-uploading-an-image-or-file-1.png b/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-uploading-an-image-or-file-1.png deleted file mode 100644 index 23034ea..0000000 Binary files a/docs/projects/frontend/_images/ab-images-and-files-in-app-builder-uploading-an-image-or-file-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-create-layout.png b/docs/projects/frontend/_images/ab-layouts-create-layout.png deleted file mode 100644 index b14a59e..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-create-layout.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-add-list-component.png b/docs/projects/frontend/_images/ab-layouts-layout-add-list-component.png deleted file mode 100644 index d9b8975..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-add-list-component.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-add-view-component.png b/docs/projects/frontend/_images/ab-layouts-layout-add-view-component.png deleted file mode 100644 index 163ebb4..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-add-view-component.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-create-component.png b/docs/projects/frontend/_images/ab-layouts-layout-create-component.png deleted file mode 100644 index 18d073b..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-create-component.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-add-header.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-add-header.png deleted file mode 100644 index 9193d6f..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-add-header.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-image.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-image.png deleted file mode 100644 index 9bd00c9..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-image.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-text.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-text.png deleted file mode 100644 index 6c245fb..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-text.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-text2.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-text2.png deleted file mode 100644 index 06242d1..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-add-text2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-props.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-props.png deleted file mode 100644 index 581dcee..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-props.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-select-image.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-select-image.png deleted file mode 100644 index 04aa154..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-header-select-image.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-preview-image-header.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-preview-image-header.png deleted file mode 100644 index ccc3721..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-preview-image-header.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-preview-text-header.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-preview-text-header.png deleted file mode 100644 index 13aba5c..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout-preview-text-header.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout.png b/docs/projects/frontend/_images/ab-layouts-layout-edit-layout.png deleted file mode 100644 index 75a307d..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-edit-layout.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-page-navigation.png b/docs/projects/frontend/_images/ab-layouts-layout-page-navigation.png deleted file mode 100644 index ac06c56..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-page-navigation.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-page-set-layout.png b/docs/projects/frontend/_images/ab-layouts-layout-page-set-layout.png deleted file mode 100644 index 6303a48..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-page-set-layout.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-routes-add-route.png b/docs/projects/frontend/_images/ab-layouts-layout-routes-add-route.png deleted file mode 100644 index 61eccbf..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-routes-add-route.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-routes-dynamic-path.png b/docs/projects/frontend/_images/ab-layouts-layout-routes-dynamic-path.png deleted file mode 100644 index fd47659..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-routes-dynamic-path.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-routes-properties.png b/docs/projects/frontend/_images/ab-layouts-layout-routes-properties.png deleted file mode 100644 index c421051..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-routes-properties.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-routes.png b/docs/projects/frontend/_images/ab-layouts-layout-routes.png deleted file mode 100644 index edce6fb..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-routes.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-set-page-styles.png b/docs/projects/frontend/_images/ab-layouts-layout-set-page-styles.png deleted file mode 100644 index ef08588..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-set-page-styles.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-layouts-layout-set-styles.png b/docs/projects/frontend/_images/ab-layouts-layout-set-styles.png deleted file mode 100644 index 196e814..0000000 Binary files a/docs/projects/frontend/_images/ab-layouts-layout-set-styles.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-local-v-global-state-1.png b/docs/projects/frontend/_images/ab-local-v-global-state-1.png deleted file mode 100644 index c403c10..0000000 Binary files a/docs/projects/frontend/_images/ab-local-v-global-state-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-local-v-global-state-2.png b/docs/projects/frontend/_images/ab-local-v-global-state-2.png deleted file mode 100644 index ae6a42b..0000000 Binary files a/docs/projects/frontend/_images/ab-local-v-global-state-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-local-v-global-state-3.png b/docs/projects/frontend/_images/ab-local-v-global-state-3.png deleted file mode 100644 index a892208..0000000 Binary files a/docs/projects/frontend/_images/ab-local-v-global-state-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-page-context-functions-1.png b/docs/projects/frontend/_images/ab-page-context-functions-1.png deleted file mode 100644 index d280fcf..0000000 Binary files a/docs/projects/frontend/_images/ab-page-context-functions-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-page-context-globalvslocal-1.png b/docs/projects/frontend/_images/ab-page-context-globalvslocal-1.png deleted file mode 100644 index 0334232..0000000 Binary files a/docs/projects/frontend/_images/ab-page-context-globalvslocal-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-page-settings-default-path-params-1.png b/docs/projects/frontend/_images/ab-page-settings-default-path-params-1.png deleted file mode 100644 index 2aa154d..0000000 Binary files a/docs/projects/frontend/_images/ab-page-settings-default-path-params-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-page-structure-1.png b/docs/projects/frontend/_images/ab-page-structure-1.png deleted file mode 100644 index 9063c94..0000000 Binary files a/docs/projects/frontend/_images/ab-page-structure-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-publishing-apps-introduction-1.png b/docs/projects/frontend/_images/ab-publishing-apps-introduction-1.png deleted file mode 100644 index 1e18e64..0000000 Binary files a/docs/projects/frontend/_images/ab-publishing-apps-introduction-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-publishing-apps-making-an-app-public-1.png b/docs/projects/frontend/_images/ab-publishing-apps-making-an-app-public-1.png deleted file mode 100644 index 563056d..0000000 Binary files a/docs/projects/frontend/_images/ab-publishing-apps-making-an-app-public-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-publishing-apps-seeing-deployment-history-1.png b/docs/projects/frontend/_images/ab-publishing-apps-seeing-deployment-history-1.png deleted file mode 100644 index ceffc7b..0000000 Binary files a/docs/projects/frontend/_images/ab-publishing-apps-seeing-deployment-history-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-resources-1.png b/docs/projects/frontend/_images/ab-resources-1.png deleted file mode 100644 index db9c24b..0000000 Binary files a/docs/projects/frontend/_images/ab-resources-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-resources-configure-1.png b/docs/projects/frontend/_images/ab-resources-configure-1.png deleted file mode 100644 index 86202a7..0000000 Binary files a/docs/projects/frontend/_images/ab-resources-configure-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-resources-create-1.png b/docs/projects/frontend/_images/ab-resources-create-1.png deleted file mode 100644 index 25f9ca0..0000000 Binary files a/docs/projects/frontend/_images/ab-resources-create-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-resources-edit-connection-properties.png b/docs/projects/frontend/_images/ab-resources-edit-connection-properties.png deleted file mode 100644 index f672ade..0000000 Binary files a/docs/projects/frontend/_images/ab-resources-edit-connection-properties.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-resources-request-2.png b/docs/projects/frontend/_images/ab-resources-request-2.png deleted file mode 100644 index d97d36b..0000000 Binary files a/docs/projects/frontend/_images/ab-resources-request-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-resources-requests-1.png b/docs/projects/frontend/_images/ab-resources-requests-1.png deleted file mode 100644 index 1846b99..0000000 Binary files a/docs/projects/frontend/_images/ab-resources-requests-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-1.png b/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-1.png deleted file mode 100644 index 5450e64..0000000 Binary files a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport-1.png b/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport-1.png deleted file mode 100644 index 479cd97..0000000 Binary files a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport-1.png b/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport-1.png deleted file mode 100644 index aa4935f..0000000 Binary files a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport-1.png b/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport-1.png deleted file mode 100644 index f573c54..0000000 Binary files a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport-1.png b/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport-1.png deleted file mode 100644 index 199ae89..0000000 Binary files a/docs/projects/frontend/_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-responsive-design-introduction-1.png b/docs/projects/frontend/_images/ab-responsive-design-introduction-1.png deleted file mode 100644 index 30c4980..0000000 Binary files a/docs/projects/frontend/_images/ab-responsive-design-introduction-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-1.png b/docs/projects/frontend/_images/ab-state-1.png deleted file mode 100644 index a7b6cd8..0000000 Binary files a/docs/projects/frontend/_images/ab-state-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-card-custom-entries-1.png b/docs/projects/frontend/_images/ab-state-card-custom-entries-1.png deleted file mode 100644 index 730f53e..0000000 Binary files a/docs/projects/frontend/_images/ab-state-card-custom-entries-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-card-custom-entries-2.png b/docs/projects/frontend/_images/ab-state-card-custom-entries-2.png deleted file mode 100644 index d7c671d..0000000 Binary files a/docs/projects/frontend/_images/ab-state-card-custom-entries-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-card-custom-entries-3.png b/docs/projects/frontend/_images/ab-state-card-custom-entries-3.png deleted file mode 100644 index a237c84..0000000 Binary files a/docs/projects/frontend/_images/ab-state-card-custom-entries-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-card-custom-entries-4.png b/docs/projects/frontend/_images/ab-state-card-custom-entries-4.png deleted file mode 100644 index c98fc13..0000000 Binary files a/docs/projects/frontend/_images/ab-state-card-custom-entries-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-card-custom-entries-5.png b/docs/projects/frontend/_images/ab-state-card-custom-entries-5.png deleted file mode 100644 index 265e585..0000000 Binary files a/docs/projects/frontend/_images/ab-state-card-custom-entries-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-component-states.png b/docs/projects/frontend/_images/ab-state-component-states.png deleted file mode 100644 index 5611d2e..0000000 Binary files a/docs/projects/frontend/_images/ab-state-component-states.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-functions-1.png b/docs/projects/frontend/_images/ab-state-looper-functions-1.png deleted file mode 100644 index e997c9b..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-functions-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-functions-2.png b/docs/projects/frontend/_images/ab-state-looper-functions-2.png deleted file mode 100644 index f72b82a..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-functions-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-functions-3.png b/docs/projects/frontend/_images/ab-state-looper-functions-3.png deleted file mode 100644 index 158eea9..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-functions-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-functions-4.png b/docs/projects/frontend/_images/ab-state-looper-functions-4.png deleted file mode 100644 index b3c985a..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-functions-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-functions-5.png b/docs/projects/frontend/_images/ab-state-looper-functions-5.png deleted file mode 100644 index 91a3396..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-functions-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-functions-6.png b/docs/projects/frontend/_images/ab-state-looper-functions-6.png deleted file mode 100644 index cb8c5f9..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-functions-6.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-request-1.png b/docs/projects/frontend/_images/ab-state-looper-request-1.png deleted file mode 100644 index d120662..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-request-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-request-2.png b/docs/projects/frontend/_images/ab-state-looper-request-2.png deleted file mode 100644 index 9d52563..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-request-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-request-3.png b/docs/projects/frontend/_images/ab-state-looper-request-3.png deleted file mode 100644 index bf6baee..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-request-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-request-4.png b/docs/projects/frontend/_images/ab-state-looper-request-4.png deleted file mode 100644 index 7bda94a..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-request-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-looper-request-5.png b/docs/projects/frontend/_images/ab-state-looper-request-5.png deleted file mode 100644 index 5bf4cb2..0000000 Binary files a/docs/projects/frontend/_images/ab-state-looper-request-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-management-into-1.png b/docs/projects/frontend/_images/ab-state-management-into-1.png deleted file mode 100644 index b7a4863..0000000 Binary files a/docs/projects/frontend/_images/ab-state-management-into-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-pane-detail.png b/docs/projects/frontend/_images/ab-state-pane-detail.png deleted file mode 100644 index abebaf5..0000000 Binary files a/docs/projects/frontend/_images/ab-state-pane-detail.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-pane-textField-clipboard.png b/docs/projects/frontend/_images/ab-state-pane-textField-clipboard.png deleted file mode 100644 index e8fee9e..0000000 Binary files a/docs/projects/frontend/_images/ab-state-pane-textField-clipboard.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-pane-textField-component.png b/docs/projects/frontend/_images/ab-state-pane-textField-component.png deleted file mode 100644 index 3886920..0000000 Binary files a/docs/projects/frontend/_images/ab-state-pane-textField-component.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-pane-textField-value.png b/docs/projects/frontend/_images/ab-state-pane-textField-value.png deleted file mode 100644 index e91af68..0000000 Binary files a/docs/projects/frontend/_images/ab-state-pane-textField-value.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-table-requests-1.png b/docs/projects/frontend/_images/ab-state-table-requests-1.png deleted file mode 100644 index 1733bd4..0000000 Binary files a/docs/projects/frontend/_images/ab-state-table-requests-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-table-requests-2.png b/docs/projects/frontend/_images/ab-state-table-requests-2.png deleted file mode 100644 index b6e9743..0000000 Binary files a/docs/projects/frontend/_images/ab-state-table-requests-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-table-requests-3.png b/docs/projects/frontend/_images/ab-state-table-requests-3.png deleted file mode 100644 index 2018092..0000000 Binary files a/docs/projects/frontend/_images/ab-state-table-requests-3.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-table-requests-4.png b/docs/projects/frontend/_images/ab-state-table-requests-4.png deleted file mode 100644 index 11d9235..0000000 Binary files a/docs/projects/frontend/_images/ab-state-table-requests-4.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-table-requests-5.png b/docs/projects/frontend/_images/ab-state-table-requests-5.png deleted file mode 100644 index 3863358..0000000 Binary files a/docs/projects/frontend/_images/ab-state-table-requests-5.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-state-table-requests-6.png b/docs/projects/frontend/_images/ab-state-table-requests-6.png deleted file mode 100644 index 6ce2ccd..0000000 Binary files a/docs/projects/frontend/_images/ab-state-table-requests-6.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-theme-editor-1.png b/docs/projects/frontend/_images/ab-theme-editor-1.png deleted file mode 100644 index 732e21f..0000000 Binary files a/docs/projects/frontend/_images/ab-theme-editor-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-theme-editor-color.png b/docs/projects/frontend/_images/ab-theme-editor-color.png deleted file mode 100644 index 48034cb..0000000 Binary files a/docs/projects/frontend/_images/ab-theme-editor-color.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-theme-editor-components.png b/docs/projects/frontend/_images/ab-theme-editor-components.png deleted file mode 100644 index e45286c..0000000 Binary files a/docs/projects/frontend/_images/ab-theme-editor-components.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-theme-editor-typography.png b/docs/projects/frontend/_images/ab-theme-editor-typography.png deleted file mode 100644 index 3949530..0000000 Binary files a/docs/projects/frontend/_images/ab-theme-editor-typography.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-triggering-events-in-the-app-calling-frontend-functions-introduction-1.png b/docs/projects/frontend/_images/ab-triggering-events-in-the-app-calling-frontend-functions-introduction-1.png deleted file mode 100644 index 551e3a2..0000000 Binary files a/docs/projects/frontend/_images/ab-triggering-events-in-the-app-calling-frontend-functions-introduction-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-triggering-events-in-the-app-specifying-events-in-editor-1.png b/docs/projects/frontend/_images/ab-triggering-events-in-the-app-specifying-events-in-editor-1.png deleted file mode 100644 index ad7be86..0000000 Binary files a/docs/projects/frontend/_images/ab-triggering-events-in-the-app-specifying-events-in-editor-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/ab-triggering-events-in-the-app-specifying-events-in-editor-2.png b/docs/projects/frontend/_images/ab-triggering-events-in-the-app-specifying-events-in-editor-2.png deleted file mode 100644 index 4a0173e..0000000 Binary files a/docs/projects/frontend/_images/ab-triggering-events-in-the-app-specifying-events-in-editor-2.png and /dev/null differ diff --git a/docs/projects/frontend/_images/app-builder-editor-1.png b/docs/projects/frontend/_images/app-builder-editor-1.png deleted file mode 100644 index 75ee174..0000000 Binary files a/docs/projects/frontend/_images/app-builder-editor-1.png and /dev/null differ diff --git a/docs/projects/frontend/_images/pickerbutton.gif b/docs/projects/frontend/_images/pickerbutton.gif deleted file mode 100644 index 93b0b86..0000000 Binary files a/docs/projects/frontend/_images/pickerbutton.gif and /dev/null differ diff --git a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-adding-removing-cdns.md b/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-adding-removing-cdns.md deleted file mode 100644 index a83f826..0000000 --- a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-adding-removing-cdns.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'adding-cdns-and-libraries-calling-frontend-functions-adding-removing-cdns' -sidebar_label: 'AddingRemoving CDNs' -redirect_from: '/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-cdns' -slug: '/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-cdns' ---- - -# AddingRemoving CDNs - -...coming soon. diff --git a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-adding-removing-libraries.md b/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-adding-removing-libraries.md deleted file mode 100644 index 169edfe..0000000 --- a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-adding-removing-libraries.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'adding-cdns-and-libraries-calling-frontend-functions-adding-removing-libraries' -sidebar_label: 'AddingRemoving Libraries' -redirect_from: '/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-libraries' -slug: '/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-libraries' ---- - -# AddingRemoving Libraries - -...coming soon. diff --git a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-how-to-use-a-cdn-library-module-in-an-app.md b/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-how-to-use-a-cdn-library-module-in-an-app.md deleted file mode 100644 index e8b4a39..0000000 --- a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-how-to-use-a-cdn-library-module-in-an-app.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'adding-cdns-and-libraries-calling-frontend-functions-how-to-use-a-cdn-library-module-in-an-app' -sidebar_label: 'How to use a CDNLibrary module in an App' -redirect_from: '/frontend/adding-cdns-and-libraries/calling-frontend-functions/how-to-use-a-cdnlibrary-module-in-an-app' -slug: '/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/how-to-use-a-cdnlibrary-module-in-an-app' ---- - -# How to use a CDNLibrary module in an App - -...coming soon. diff --git a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-introduction.md b/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-introduction.md deleted file mode 100644 index 9761ae1..0000000 --- a/docs/projects/frontend/adding-cdns-and-libraries-calling-frontend-functions-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'adding-cdns-and-libraries-calling-frontend-functions-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/adding-cdns-and-libraries/calling-frontend-functions/introduction' -slug: '/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/app-components-common-component-properties.md b/docs/projects/frontend/app-components-common-component-properties.md deleted file mode 100644 index b376e5b..0000000 --- a/docs/projects/frontend/app-components-common-component-properties.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 'app-components-common-component-properties' -sidebar_label: 'Common Component Properties' -redirect_from: '/frontend/app-components/common-component-properties' -slug: '/projects/frontend/app-components/common-component-properties' ---- - -# Common Component Properties - -The properties listed in this section are common to **all components**. Properties that are unique to a component are listed as part of the component's documentation. - -### Conditional Rendering - -The _Conditional Rendering_ property takes any valid expression and is used to render the component, and its children, if the expression evaluates to true. - -### Class - -A _Class_ defines one or more attribute values for a component. Each attribute value is defined by a set of styles, such as the **error** example below. - -```CSS -.error { - font-weight: bold; - color: red; - align-content: center; -} -``` - -Two important points about classes. - -1. A list of classes **must** contain a space between each class. -2. Classes are case-sensitive. - -JavaScript and CSS can access specific elements through its class via class selectors or the DOM method (document.getElementsByClassName). - -For more detail on the _Class_ property, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class). - -### Draggable - -The _Draggable_ property indicates whether a component can be dragged via native browser behavior or the HTML Drag and Drop API. - -For more detail on the _Draggable_ property, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable). - -### Id - -The _Id_ defines an identifier (ID) that **must** be unique across the entire application. The _Id_ identifies a component when linking, scripting or styling (using CSS). - -The Id's value **may not** contain whitespace characters such as space, tab, line feed (LF) or carriage return (CR). - -For more detail on the _Id_ property, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). - -### Language - -The _Language_ property identifies the language of a component. - -The lang attribute will not be added to the component, if the _Language_ property is empty. - -For more detail on the _Language_ property, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). - -### Local States - -The _Local States_ property is a custom state, request or function connected to a component. It is only accessible from the component or its children. - -### Title - -The _Title_ property contains text that identifies the content in a component, iframe, or data table. - -A title's primary purpose, when used as a label for an iframe, is to identify the element for assistive devices such as screen readers. - -For more information on the _Title_ property, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title). - -### Translate - -The _Translate_ property indicates whether a component's translatable attribute values and text node children should be translated by translation tools such as Google translate. - -For more detail on the _Translate_ property, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate). diff --git a/docs/projects/frontend/app-components-common-component-style-attributes.md b/docs/projects/frontend/app-components-common-component-style-attributes.md deleted file mode 100644 index 100e012..0000000 --- a/docs/projects/frontend/app-components-common-component-style-attributes.md +++ /dev/null @@ -1,498 +0,0 @@ ---- -id: 'app-components-common-component-style-attributes' -sidebar_label: 'Common Component Style Attributes' -redirect_from: '/frontend/app-components/common-component-style-attributes' -slug: '/projects/frontend/app-components/common-component-style-attributes' ---- - -# Common Component Style Attributes - -The style attributes listed in this section are common to **all components**. Style attributes that are unique to a component are listed as part of the component's documentation. - - - - - - - - - - - - - - - - - - - - - - -
Common Style Attributes
AlignDirectionGrid RowMax Height
Align ContentDisplayGrid Row EndMax Width
Align ItemsFlex BasisGrid Row GapMin Height
Align SelfFlex GrowGrid Row StartMin Width
Background ColorFlex ShrinkGrid TemplateOverflow
Background SourceFontGrid Template AreasPlace Content
Border ColorGrid AreaGrid Template ColumnsPlace Items
Border RadiusGrid Auto ColumnsGrid Template Rows Place Self
Border WidthGrid Auto FlowHeightSize
BreakingGrid Auto RowsItalicizeSpacing-Margin
CapitalizeGrid ColumnJustifySpacing-Padding
ChildrenGrid Column GapJustify ContentText Align
ColorGrid Column EndJustify ItemsWeight
Cursor Grid Column StartJustify SelfWidth
DecorationGrid GapLine Height 
- -
- -### Align - -The _Align_ style attribute is available when the layout display selected is Flex. It sets the align-self value on all direct children as a group, and the alignment is along the Cross Axis. - -**Type:** Flex start, Flex end, Center, Stretch and Baseline. - -For more detail on the _Align_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). - -### Align Content - -The _Align Content_ style attribute is available when the layout display selected is Grid. It sets distribution space between and around items along the Block Axis. - -**Type:** Start, Center, End, Stretch, Space between, Space around, and Space evenly. - -For more detail on the _Align Content_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content). - -### Align Items - -The _Align Items_ style attribute is available when the layout display selected is Grid. It sets the align-self value on all direct children as a group, and the alignment is along the Block Axis. - -**Type:** Start, Center, End, and Stretch. - -For more detail on the _Align Items_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). - -### Align Self - -The _Align Self_ style attribute overrides the align-items value of a Flex or Grid item. In a Grid, the item is aligned inside the grid area and in Flex, along the cross axis. - -**Type:** Start, Center, End, and Stretch. - -For more detail on the _Align Self_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). - -### Background Color - -The _Background Color_ style attribute sets the background color of a component. - -**Type:** Hex: `#FFFFFF` or RGB: 104, 37, 37 - -For more detail on the _Background Color_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color). - -### Background Source - -The _Background Source_ style attribute sets the background image on a component. - -For more detail on the _Background Source_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). - -### Border Color - -The _Border Color_ style attribute sets the border color of a component. - -**Type:** Hex: `#FFFFFF` or RGB: 104, 37, 37. - -For more detail on the _Border Color_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). - -### Border Radius - -The _Border Radius_ style attribute rounds the corners of a component's outer border edge. - -The border radius uses one, two, three or four values; these can be in pixels or percentages. - -**Example:** - -- border-radius: 50%; -- border-radius: 40px 10px; -- border-radius: 10px 100px/120px; -- border-radius: 10px 30px 20px 25px; - -The border radius also has four constituent properties. - -- border-top-left-radius - rounds the top left corner of an element -- border-top-right-radius - rounds the top right corner of an element -- border -bottom-left-radius - rounds the bottom left corner of the element -- border-bottom-right-radius - rounds the bottom right radius of an element - -A border radius constituent requires two values, if in pixels or a single percentage value. - -**Example:** - -- border-top-left-radius: 80px 80px; -- border-top-left-radius: 50%; - -For more detail on the _Border Radius_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). - -### Border Width - -The _Border Width_ style attribute sets the width, in pixels, of a component's border. - -For more detail on the _Border Width_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). - -### Breaking - -The _Breaking_ style attribute controls the white-space within lines of text in a component. - -**Type:** Normal, No Wrap, Pre, Pre Wrap, and Break Spaces. - -- Normal - text will wrap onto a new line when needed. Extra spaces and tabs will collapse. -- No Wrap - text will display on a single line and not wrap to a new line. Extra spaces and tabs will collapse. -- Pre - text will wrap to a new line on line breaks. Extra spaces and tabs will not collapse. -- Pre Wrap - text will wrap to a new line when necessary and on any line breaks. Extra spaces and tabs will not collapse. -- Break Spaces - text will wrap to a new line when necessary and on any line breaks or spaces. Extra spaces and tabs will not collapse. - -### Capitalize - -The _Capitalize_ style attribute controls how text input is automatically capitalized as it is entered by the user. - -**Type:** Uppercase, Capitalize, and Lowercase. - -For more detail on the _Capitalize_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize). - -### Children - -The _Children_ style attribute sets whether flex items are forced onto a single line or can wrap across multiple lines. If wrapping is allowed, its sets the direction that lines are stacked. - -The _Display_ value must be Flex. - -**Type:** NoWrap, Wrap, and Reverse. - -For more detail on the _Children_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap). - -### Color - -The _Color_ style attribute sets the foreground color of a component's text and text decorations. - -**Type:** Hex: `#FFFFFF` or RGB: 104, 37, 37. - -For more detail on the _Color_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/color). - -### Cursor - -The _Cursor_ style attribute sets the mouse cursor to show when the mouse pointer is over a component. - -For more detail on the _Cursor_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor). - -### Decoration - -The _Decoration_ style attribute sets the appearance of decorative lines on text. - -**Type:** Line through, Underline, and Overline. - -For more detail on the _Decoration_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/decoration). - -### Direction - -The _Direction_ style attribute sets the direction of text, table columns, and horizontal overflow. - -**Type:** rtl - right to left, ltr - left to right. - -For more detail on the _Direction_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/direction). - -### Display - -The _Display_ style attribute defines whether a component is considered a block or inline type and the layout of its children. - -**Type:** Block, Flex, Grid, Inline-block, Inline, and Hidden. - -For more detail on the _Display_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/display). - -### Flex Basis - -The _Flex Basis_ style attribute sets the initial size of a flex item. - -For more detail on the _Flex Basis_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). - -### Flex Grow - -The _Flex Grow_ style attribute sets the grow factor of a flex item's main size. - -For more detail on the _Flex Grow_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). - -### Flex Shrink - -The _Flex Shrink_ style attribute sets the shrink factor of a flex item. If the combined size of all flex items is larger than the container, items will shrink according to their flex shrink value. - -For more detail on the _Flex Shrink_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). - -### Font - -The _Font_ style attribute sets the font family of a component's font. - -For more detail on the _Font_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face). - -### Grid Area - -The _Grid Area_ style attribute specifies a grid item's size and location within a grid. Grid lines, spans or the auto setting define an item's grid placement and set the edges of its grid area. - -The _Grid Area_ consists of four constituent properties. - -- grid-row-start -- grid-column-start -- grid-row-end -- grid-column-end - -**Example:** - -```Class -.item1 { -background-color: blue; -grid-area = 2 / 1 / auto /span 3 -} -``` - -The grid area for item1 will start in row 2 column 1 and will end after a span of 3 columns. - -For more detail on the _Grid Area_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area). - -### Grid Auto Columns - -The _Grid Auto Columns_ style attribute specifies the size of an implicitly created grid column track. - -For more detail on the _Grid Auto Columns_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns). - -### Grid Auto Flow - -The _Grid Auto Flow_ style attribute controls how the auto-placement algorithm works and specifies how auto-placed items get flowed into the grid. - -For more detail on the _Grid Auto Flow_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow). - -### Grid Auto Rows - -The _Grid Auto Rows_ style attribute specifies the size of an implicitly created grid row track. - -For more detail on the _Grid Auto Rows_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows). - -### Grid Column - -The _Grid Column_ style attribute specifies a grid item's size and location within a grid column. Grid lines, spans or the auto setting define an item's grid placement and set the inline-start and inline-end edge of its grid area. - -For more detail on the _Grid Column_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column). - -### Grid Column Gap - -The _Grid Column Gap_ style attribute sets the size of the gap (gutter) between a component's columns. - -For more detail on the _Grid Column Gap_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). - -### Grid Column End - -The _Grid Column End_ style attribute specifies a grid item's end position within a grid column. Grid lines, spans or the auto setting define an item's grid placement and set the block-end edge of its grid area. - -For more detail on the _Grid Column End_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end). - -### Grid Column Start - -The _Grid Column Start_ style attribute specifies a grid item's start position within a grid column. Grid lines, spans or the auto setting define an item's grid placement and set the block-start edge of its grid area. - -For more detail on the _Grid Column Start_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start). - -### Grid Gap - -The _Grid Gap_ style attribute sets the size of the gaps (gutters) between rows and columns. - -For more detail on the _Grid Gap_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). - -### Grid Row - -The _Grid Row_ style attribute specifies a grid item's size and location within a grid row. Grid lines, spans or the auto setting define an item's grid placement and set the inline-start and inline-end edge of its grid area. - -For more detail on the _Grid Row_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row). - -### Grid Row End - -The _Grid Row End_ style attribute specifies a grid item's end position within a grid row. Grid lines, spans or the auto setting define an item's grid placement and set the inline-end edge of its grid area. - -For more detail on the _Grid Row End_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end). - -### Grid Row Gap - -The _Grid Row Gap_ style attribute sets the size of the gap (gutter) between a component's rows. - -For more detail on the _Grid Row Gap_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). - -### Grid Row Start - -The _Grid Row Start_ style attribute specifies a grid item's start position within a grid row. Grid lines, spans or the auto setting define an item's grid placement and set the inline-start edge of its grid area. - -For more detail on the _Grid Row Start_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start). - -### Grid Template - -The _Grid Template_ style attribute is a shorthand attribute to define the grid template columns, grid template rows, and grid template areas. - -For more detail on the _Grid Template_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template). - -### Grid Template Areas - -The _Grid Template Areas_ style attribute specifies named grid areas, establishing the grid cells and assigning them names. - -For more detail on the _Grid Template Areas_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas). - -### Grid Template Columns - -The _Grid Template Columns_ style attribute defines the line names and track sizing functions of the grid columns. - -For more detail on the _Grid Template Columns_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). - -### Grid Template Rows - -The _Grid Template Rows_ style attribute defines the line names and track sizing functions of the grid rows. - -For more detail on the _Grid Template Rows_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows). - -### Height - -The _Height_ style attribute sets the height of a component. By default, it defines the height of the content area unless box-sizing is border box, then it determines the height of the border area. - -For more detail on the _Height_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/height). - -### Italicize - -The _Italicize_ style attribute sets the font style of the font. - -**_Type:_** Normal and Italic. - -For more detail on the _Italicize_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style). - -### Justify - -The _Justify_ style attribute is available when the layout display selected is Flex. It defines the justify-self value on all items within a container and justifies all items as a group. - -**Type:** Flex start, Flex end, Center, Space between and Space around. - -For more detail on the _Justify_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). - -### Justify Content - -The _Justify Content_ style attribute is available when the layout display selected is Grid. It defines the spatial distribution between and around items along the inline axis of a grid container. - -**Type:** Start, Center, End, Stretch, Space between, Space around, and Space evenly. - -For more detail on the _Justify Content_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). - -### Justify Items - -The _Justify Items_ style attribute is available when the layout display selected is Grid. It defines the justify-self value on all items within a container and justifies each item along the appropriate axis. - -**Type:** Start, Center, End, and Stretch. - -For more detail on the _Justify Items_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items). - -### Justify Self - -The _Justify Self_ style attribute is available when the layout display selected is Flex or Grid. It defines the justification of an item inside its container along the appropriate axis. - -**Type:** Start, Center, End, Space between, Space around, and Space evenly. - -For more detail on the _Justify Self_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). - -### Line Height - -The _Line Height_ style attribute sets the height of a line box, which defines the distance between lines of text in a paragraph. - -For more detail on the _Line Height_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). - -### Max Height - -The _Max-Height_ style attribute sets the maximum height of a component. It prevents the height value from becoming larger than the max-height value. - -For more detail on the _Max-Height_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). - -### Max Width - -The _Max-Width_ style attribute sets the maximum width of a component. It prevents the width value from becoming larger than the max-width value. - -For more detail on the _Max-Width_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). - -### Min Height - -The _Min-Height_ style attribute sets the minimum height of a component. It prevents the height value from becoming smaller than the min-height value. - -For more detail on the _Min-Height_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). - -### Min Width - -The _Min-Width_ style attribute sets the minimum width of a component. It prevents the width value from becoming smaller than the min-width value. - -For more detail on the _Min-Width_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). - -### Overflow - -The _Overflow_ style attribute sets the desired behavior of a component's overflow when the content is too big to fit its formatting context. - -**Type:** Visible, Hidden, Scroll, and Auto. - -For more detail on the _Overflow_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). - -### Place Content - -The _Place Content_ style attribute allows you to align content along the block and inline directions simultaneously when the _Display_ value is Grid. - -For more detail on the _Place Content_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content). - -### Place Items - -The _Place Items_ style attribute allows you to align items along the block and inline directions simultaneously when the _Display_ value is Grid. - -For more detail on the _Place Items_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items). - -### Place Self - -The _Place Self_ style attribute allows you to align an individual item along the block and inline directions simultaneously. - -For more detail on the _Place Self_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self). - -### Size - -The *Size* style attribute sets the size (font size) of the font. The value is one of absolute size, relative size, or length. - -**Example** - -- Absolute - small, medium, large -- Relative - smaller, larger -- Length - 20em - -For more detail on the _Size_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). - -### Spacing-Margin - -The _Spacing-Margin_ style attribute sets the margin on all four sides of a component. All four values can be set at once or constituent values can be set individually. - -**Example:** - -1. margin: 10px 50px 30px 5px; -2. margin-top: 10px; -3. margin-bottom: 30px; -4. margin-left: 5px; -5. margin-right: 50px; - -For more detail on the _Spacing-Margin_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). - -### Spacing-Padding - -The _Spacing-Padding_ style attribute sets the padding on all four sides of an component. All four values can be set at once or constituent values can be set individually. - -**Example:** - -1. padding: 10px 50px 30px 5px; -2. padding-top: 10px; -3. padding-bottom: 30px; -4. padding-left: 5px; -5. padding-right: 50px; - -For more detail on the _Spacing-Padding_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). - -### Text Align - -The _Text Align_ style attribute sets the horizontal alignment of the inline-level content of a block or table-box component. - -**Type:** Left, Center, Right, and Justify. - -For more detail on the _Text Align_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align). - -### Weight - -The _Weight_ style attribute sets the weight or boldness of a text component. The values available will depend on the current font (font family) setting. - -For more detail on the _Weight_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/weight). - -### Width - -The _Width_ style attribute sets the width of a component. By default, it defines the width of the content area unless box-sizing is border box, then it determines the width of the border area. - -For more detail on the _Width_ style attribute, see the [Mozilla developer docs](https://developer.mozilla.org/en-US/docs/Web/CSS/width). diff --git a/docs/projects/frontend/app-components-component-categories.md b/docs/projects/frontend/app-components-component-categories.md deleted file mode 100644 index 936e4f9..0000000 --- a/docs/projects/frontend/app-components-component-categories.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 'app-components-component-categories' -sidebar_label: 'Component Categories' -redirect_from: '/frontend/app-components/component-categories' -slug: '/projects/frontend/app-components/component-categories' ---- - -# Component Categories - -This article describes the different component categories available in App Builder. - ---- - -In App Builder, the Component Library has five sections. Each section contains different types of components. These groupings are solely for organizational purposes and may change in the future. - -![App Components Categories](./_images/ab-app-components-component-categories-1.png) - -**Layout Components** - Various types of container components. - -**Form Components** - Various types of form inputs and the form block component. - -**Control Components** - Various types of input components. - -**Data Components** - Various types of data-centric components. - -**Other Components** - All other components. - -Each component category has a unique icon to help you quickly identify the type of component. In the future, we may add more organizational structures, such as tagging, to help you find the right component faster. - -The Component Library will continue to grow over time. We welcome your feedback on how we can further improve it. diff --git a/docs/projects/frontend/app-components-component-consistency.md b/docs/projects/frontend/app-components-component-consistency.md deleted file mode 100644 index e44c1a2..0000000 --- a/docs/projects/frontend/app-components-component-consistency.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: 'app-components-component-consistency' -sidebar_label: 'Component Consistency' -redirect_from: '/frontend/app-components/component-consistency' -slug: '/projects/frontend/app-components/component-consistency' ---- - -# Component Consistency - -This article describes how developers can expect component properties and styles to be organized in the editor. - ---- - -In App Builder, every component type has a dedicated editor that contains all the properties and styles specific to that component. This approach gives you full control over the look and feel of your app, without having to wade through unrelated options. - -However, this can also lead to inconsistencies between different components if you're not careful. For example, the Button component has a "Text" property, while a Label component may have a "Caption" property. - -To avoid confusion, we recommend that you take a few minutes to familiarize yourself with the editor for each component type before starting to build your app. That way, you'll know exactly where to find the options you need. diff --git a/docs/projects/frontend/app-components-component-groups.md b/docs/projects/frontend/app-components-component-groups.md deleted file mode 100644 index 22eddd3..0000000 --- a/docs/projects/frontend/app-components-component-groups.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: 'app-components-component-groups' -sidebar_label: 'Component Groups' -redirect_from: '/frontend/app-components/component-groups' -slug: '/projects/frontend/app-components/component-groups' ---- - -# Component Groups - -This article describes how developers can use Component Groups to group together components into a reusable object. - ---- - -Component Groups are a way of logically grouping together components in an app. This is useful for several reasons: - -- It allows developers to reuse components across multiple apps. -- It makes it easier to manage large numbers of components. - -To create a Component Group, add any number of Components to the Page Canvas, just as you would when developing a normal app Page. Once you have added all the Components you want to include in the Group, select the outermost container and click vertical elipsis next to the Component name tag. In the contextual dropdown menu, click the "Create reusable component" option. - -![Component Groups](./_images/ab-app-components-component-groups-1.png) - -Just specify the name for your Group and click "Create". - -![Component Groups](./_images/ab-app-components-component-groups-2.png) - -Once a Group is created, it will appear in the Components "Group" Tab with a special icon to indicate that it is a Group. - -![Component Groups](./_images/ab-app-components-component-groups-3.png) - -You can drag-and-drop the Group onto the Page Canvas to use it just like any other Component. - -![Component Groups](./_images/ab-app-components-component-groups-4.png) - -If you need to make changes to a Group, simply edit an existing instance of the Group and then create a new Group. **Changes made to a Group do not propagate across all instances of that Group.** diff --git a/docs/projects/frontend/app-components-components.md b/docs/projects/frontend/app-components-components.md deleted file mode 100644 index 1eb2e06..0000000 --- a/docs/projects/frontend/app-components-components.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: 'app-components-components' -sidebar_label: 'Components' -slug: '/projects/frontend/app-components-components' ---- - -# Components - -Learn about component properties and component types. - -- [Common Component Properties](app-components-common-component-properties.md): Learn about common component properties, such as conditional rendering and class. -- [Common Component Style Attributes](app-components-common-component-style-attributes.md): Learn about common style attributes such as border color and line height. -- [Layout Components](app-components-layout-components.md): Learn about properties specific to layout components. -- [Control Components](app-components-control-components.md): Learn about properties specific to control components. -- [Data Components](app-components-data-components.md): Learn about properties specific to data components. -- [Other Components](app-components-other-components.md): Learn about different components such as icon and tooltip. \ No newline at end of file diff --git a/docs/projects/frontend/app-components-control-components-autocomplete.md b/docs/projects/frontend/app-components-control-components-autocomplete.md deleted file mode 100644 index 321dd33..0000000 --- a/docs/projects/frontend/app-components-control-components-autocomplete.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 'app-components-control-components-autocomplete' -sidebar_label: 'Autocomplete' -redirect_from: '/frontend/app-components/input-components/autocomplete' -slug: '/projects/frontend/app-components/control-components/autocomplete' ---- - -# Autocomplete - -The _Autocomplete_ component is a single-line textbox component that is useful in two scenarios: - -1. As a **combo-box** - a value is chosen from a predefined set of options such as a country list. -2. As a **free-solo** - the textbox may contain an arbitrary value, but it saves the user time by suggesting values. An example is Google Search, where a completion string appears inline after the input cursor. - -The _Autocomplete_ component is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies a default value for the component; if the value contains an array, a combo-box will support multiple selections (form component only).
labelnodeSpecifies a label for the component.
requiredboolfalseIf true, a selection must be made or input must be entered.
autofocusboolfalseIf true, autofocus is enabled.
readOnlyboolfalseIf true, the autocomplete is read only.
optionsarrayDefines a list of options for the component in the form of label/value pairs.
valueanySpecifies the value of the autocomplete. The value must be equal to the option to be selected.
defaultValueanySpecifies a default value for the component (independent component only).
disabledboolIf true, the autocomplete is disabled.
getOptionLabelfuncDetermines the label for a given option.
isOptionEqualToValuefuncDetermines if the option selected represents a given value.
autoCompleteboolfalseIf true, the completion string appears inline after the input cursor in the text box.
autoHighlightboolfalseIf true, the first option in the options list is highlighted.
autoSelectboolfalseIf true, the option selected becomes the input value when the Autocomplete loses focus.
loadingboolfalseIf true, the component is in a loading state and displays the value of the loading text.
clearOnBlurboolfalseIf true, the input's text is cleared on blur if no value is selected.
clearOnEscapeboolfalseIf true, clear all values when the user presses escape, and the popup is closed.
loadingTextnodeThe text to display when in a loading state.
noOptionsTextnodeThe text to display when there are no options.
openTextstringOverride the default text for the open popup icon button.
openboolfalseIf true, displays the component.
openOnFocusboolfalseIf true, the popup will open on input focus.
popUpIconnodeThe icon to display to replace the default popup icon.
clearIconnodeThe icon to display in place of the clear icon.
disableClearableboolfalseIf true, the input cannot be cleared.
disableCloseOnSelectboolfalseIf true, the popup will not close when a value is selected.
disabledItemsFocusableboolfalseIf true, will allow focus on disabled items.
disableListWrapboolfalseIf true, the list box in the popup will not wrap focus.
disablePortalboolfalseIf true, the Popper content will be under the DOM hierarchy of parent component.
filterSelectedOptionsboolfalseIf true, hide the selected options from the list box.
freeSoloboolfalseIf true, the user input is not bound to provided options.
filterOptionsfuncDetermines the filtered options to be rendered on search.
getOptionDisabledfuncDetermines the disabled state for a given option.
groupByfuncThe options will be grouped under the return string.
handleHomeEndKeysboolfalseIf true, handle the "Home" and "End" keys when the popup is open and move focus, respectively.
includeInputInListboolfalseIf true, the highlight can move to the input.
IDstringThe ID is to implement accessibility logic. If empty, a random id is generated.
inputValuestringThe input value.
selectOnFocusboolfalseIf true, the input's text is selected on focus.
- -### Style Attributes - - - - - - - - - - -
NameTypeDefaultDescription
variantstandard
outlined
filled
string		outlinedDefines the visual display of the component.
sizemedium
small
string		mediumDefines the size of the component.
fullWidthboolfalseIf true, the autocomplete occupies the full width of its container.
- -## Subcomponents - -The _Autocomplete_ component has a subcomponent that allows an icon to replace the default popup or clear icons. - -### Icon - -_Popup Icon_ - specifies an icon to replace the default popup icon. - -_Clear Icon_ - specifies an icon to replace the clear icon. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Autocomplete_ component, see the [MUI developer docs](https://mui.com/material-ui/api/autocomplete/). diff --git a/docs/projects/frontend/app-components-control-components-button.md b/docs/projects/frontend/app-components-control-components-button.md deleted file mode 100644 index c3c8b03..0000000 --- a/docs/projects/frontend/app-components-control-components-button.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 'app-components-control-components-button' -sidebar_label: 'Button' -redirect_from: '/frontend/app-components/input-components/button' -slug: '/projects/frontend/app-components/control-components/button' ---- - -# Button - -The _Button_ component allows a user to take actions or make choices with a single tap. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringSpecifies the text to display on the component.
typebutton
reset
submit		submitDefines the type of the component.
disabledboolfalseIf true, the button is disabled.
hrefstringA URL to link to when the component is clicked.
- -### Style Attributes - - - - - - - - - - - - - - -
NameTypeDefaultDescription
variantcontained
outlined
text
string		textDefines the display type of the component.
colorprimary
secondary
inherit
info
error
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
large
string		mediumDefines the size of the component.
fullWidthboolfalseIf true, the button takes up the full width of its container.
disableElevationboolfalseIf true, no elevation is used.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf true, the ripple effect is disabled.
- -## Subcomponents - -The _Button_ component has a subcomponent that allows the placement of an icon on the left or right side of the button face. - -### Icon - -_Left Icon_ - specifies an icon to use on the left side of the button face. - -_Right Icon_ - specifies an icon to use on the right side of the button face. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Button_ component, see the [MUI developer docs](https://mui.com/material-ui/api/button/). diff --git a/docs/projects/frontend/app-components-control-components-checkbox.md b/docs/projects/frontend/app-components-control-components-checkbox.md deleted file mode 100644 index c322171..0000000 --- a/docs/projects/frontend/app-components-control-components-checkbox.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 'app-components-control-components-checkbox' -sidebar_label: 'Checkbox' -redirect_from: '/frontend/app-components/input-components/checkbox' -slug: '/projects/frontend/app-components/control-components/checkbox' ---- - -# Checkbox - -The _Checkbox_ component allows the user to select one or more items from a set. - -The checkbox component has three states, checked, unchecked, and indeterminate. When used as a form component, a checkbox has two states, checked or unchecked. - -The _Checkbox_ component is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
labelnodeSpecifies a label for the component.
valueanySpecifies a boolean value for the component; the default value is on.
checkedboolfalseSpecifies whether the component is checked
requiredboolfalseIf true, the checkbox must be checked.
indeterminateboolfalseIf true, a dash symbol appears on the checkbox, and you cannot modify its state.
disabledboolfalseIf true, the checkbox is disabled.
- -### Style Attributes - - - - - - - - - - - -
NameTypeDefaultDescription
colordefault
primary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
string		mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string		endSpecifies the location of the checkbox label.
disableRippleboolfalseBy default, the checkbox component has a ripple effect triggered when the checkbox state is modified. To disable this effect, set "Disable Ripple" on.
- -## Subcomponents - -The _Checkbox_ component has a subcomponent that allows an icon to be used in place of the standard checkmark. - -### Icon - -_Checked Icon_ - specifies an icon to use when the checkbox is checked. - -_Unchecked Icon_ - specifies an icon to use when the checkbox is unchecked. - -_Indeterminate Icon_ - specifies an icon to use when the checkbox is indeterminate. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Checkbox_ component, see the [MUI developer docs](https://mui.com/material-ui/api/checkbox/). diff --git a/docs/projects/frontend/app-components-control-components-date-picker.md b/docs/projects/frontend/app-components-control-components-date-picker.md deleted file mode 100644 index 95d90bd..0000000 --- a/docs/projects/frontend/app-components-control-components-date-picker.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'app-components-control-components-date-picker' -sidebar_label: 'Date Picker' -redirect_from: '/frontend/app-components/input-components/date-picker' -slug: '/projects/frontend/app-components/control-components/date-picker' ---- - -# Date Picker - -The _Date Picker_ component allows the user to select a date. _Date Picker_ components display in dialogs on mobile devices and text drop-downs on desktops. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies a value for the component.
labelnodeSpecifies a label for the component.
initialDatestringSpecifies an initial date in the form of a string.
formatstringSpecifies a date format in the form of a string.
readOnlyboolfalseIf true, the date picker is read only.
disabledboolfalseIf true, the date picker is disabled.
disableFutureboolfalseIf true, future days are disabled, and only past days are selectable.
disablePastboolfalseIf true, past days are disabled, and only future days are selectable.
- -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
inputVariantstandard
outlined
filled
string		outlinedSpecifies the display type of the component.
- -For more detail on the _Date Picker_ component, see the [MUI developer docs](https://mui.com/x/api/date-pickers/date-picker/). diff --git a/docs/projects/frontend/app-components-control-components-field-array.md b/docs/projects/frontend/app-components-control-components-field-array.md deleted file mode 100644 index f848ef3..0000000 --- a/docs/projects/frontend/app-components-control-components-field-array.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: 'app-components-control-components-field-array' -sidebar_label: 'Field Array' -redirect_from: '/frontend/app-components/input-components/field-array' -slug: '/projects/frontend/app-components/control-components/field-array' ---- - -# Field Array - -The _Field Array_ component displays form inputs based on a data array. It requires a _Looper_ component to generate the data array and an input control such as a _Select_ component, which will populate based on the data array. - -The _Field Array_ component is used as a form component and must be placed within a _Form Block_. - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component.
validateOnChangeboolfalseIf true, validates the data when a change occurs.
diff --git a/docs/projects/frontend/app-components-control-components-file-dropzone-8base.md b/docs/projects/frontend/app-components-control-components-file-dropzone-8base.md deleted file mode 100644 index 79b3027..0000000 --- a/docs/projects/frontend/app-components-control-components-file-dropzone-8base.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 'app-components-control-components-file-dropzone-8base' -sidebar_label: 'File Drop Zone 8base' -redirect_from: '/frontend/app-components/input-components/file-dropzone-8base' -slug: '/projects/frontend/app-components/control-components/file-dropzone-8base' ---- - -# File Drop Zone 8base - -The _File Drop Zone 8base_ component is a variant of the [_File Picker 8base_](/projects/frontend/app-components/control-components/file-picker-8base) component; just like the original version, it allows users to browse and select a file to upload to an 8base backend. It is used independently or as a form component within a Form Block. Additionally, this component allows the user to drag & drop files into it. - - -This component differs by being a container-type component rather than a file-type input. However, even though its presentation is different, under the hood, all its properties and functionality are the same as the [_File Picker 8base_](/projects/frontend/app-components/control-components/file-picker-8base) component. - -![File Dropzone 8base](./_images/ab-component-dropzone8base.gif) - -The _File Drop Zone 8base_ component is a container that has typography and icon components inside to give the user greater flexibility when customizing. - -For example, the user can change the text "Drag & drop file here" or even the file upload icon. - -![File Picker Button](./_images/ab-component-dropzone-edit.gif) - -If the **uploadOnChange** property is enabled, the **filename** and **fileId** are passed to the application backend. - -The **filename** is the file's actual name, and the **fileId** is a reference to the file's location on the backend. This information is helpful if, for example, you want to display the file as an avatar on your application. - -### Properties - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
8baseBackendWorkspacestringSpecifes the name of an 8base workspace.
authorizationHeaderstringSpecifies an 8base API token or an ID token (JWT token).
disabledboolfalseIf true, the file picker 8base is disabled.
acceptedFilesstringDefines a comma-separated list of allowed file types.
wrongFileTypeTextstring"Wrong file type uploaded"Defines the text in the error message to be shown when uploading a file with a different type than the one set.
maxFileSizenumberDefines the maximum size of a file.
fileSizeExceededTextstring"Max file size exceeded (maxFileSize)"Defines the text in the error message to be shown when uploading a file with a size larger than the one set.
uploadOnChangeboolfalseIf true, the onChange event is used to upload files.
- -AAdditionally, As a [_Container_](/projects/frontend/app-components/layout-components/container) component, the _File Picker Button 8base_ component also exposes the same style properties. \ No newline at end of file diff --git a/docs/projects/frontend/app-components-control-components-file-dropzone.md b/docs/projects/frontend/app-components-control-components-file-dropzone.md deleted file mode 100644 index e6877f0..0000000 --- a/docs/projects/frontend/app-components-control-components-file-dropzone.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 'app-components-control-components-file-dropzone' -sidebar_label: 'File Drop Zone' -redirect_from: '/frontend/app-components/input-components/file-dropzone' -slug: '/projects/frontend/app-components/control-components/file-dropzone' ---- - -# File Drop Zone - -The _File Drop Zone_ component is a variant of the [_File Upload_](/projects/frontend/app-components/control-components/file-upload) component; just like the original version, it allows users to browse and select one or more files to upload. It is used independently or as a form component within a Form Block. Additionally, this component allows the user to drag & drop files into it. - -This component differs by being a container-type component rather than a file-type input. However, even though its presentation is different, under the hood, all its properties and functionality are the same as the [_File Upload_](/projects/frontend/app-components/control-components/file-upload) component. - -![File Dropzone](./_images/ab-component-dropzone.gif) - -The _File Drop Zone_ component is a container that has typography and icon components inside to give the user greater flexibility when customizing. - -For example, the user can change the text "Drag & drop file here" or even the file upload icon. - -![File Picker Button](./_images/ab-component-dropzone-edit.gif) - -The component also has **Custom Properties** that allow you to add additional properties using **Key** **Value** pairs. - -### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
acceptedFilesstringDefines a comma-separated list of allowed file types.
wrongFileTypeTextstring"Wrong file type uploaded"Defines the text in the error message to be shown when uploading a file with a different type than the one set.
maxFileSizenumberDefines the maximum size of a file.
fileSizeExceededTextstring"Max file size exceeded (maxFileSize)"Defines the text in the error message to be shown when uploading a file with a size larger than the one set.
showFileListbooltrueIf true, the list of selected files is displayed.
- -Additionally, As a [_Container_](/projects/frontend/app-components/layout-components/container) component, it also exposes the same style properties. - - diff --git a/docs/projects/frontend/app-components-control-components-file-picker-8base.md b/docs/projects/frontend/app-components-control-components-file-picker-8base.md deleted file mode 100644 index b24b97f..0000000 --- a/docs/projects/frontend/app-components-control-components-file-picker-8base.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 'app-components-control-components-file-picker-8base' -sidebar_label: 'File Picker 8base' -redirect_from: '/frontend/app-components/input-components/file-picker-8base' -slug: '/projects/frontend/app-components/control-components/file-picker-8base' ---- - -# File Picker 8base - -The *File Picker 8base* component allows a user to select a file to upload to an 8base workspace. - -If the **uploadOnChange** property is enabled, the **filename** and **fileId** are passed to the application backend. - -The **filename** is the file's actual name, and the **fileId** is a reference to the file's location on the backend. This information is helpful if, for example, you want to display the file as an avatar on your application. - -### Properties - - - - - - - - - - - - - -
NameTypeDefaultDescription
8baseBackendWorkspacestringSpecifes the name of an 8base workspace.
authorizationHeaderstringSpecifies an 8base API token or an ID token (JWT token).
disabledboolfalseIf true, the file picker 8base is disabled.
acceptedFilesstringDefines a comma-separated list of allowed file types.
maxFileSizenumberDefines the maximum size of a file.
uploadOnChangeboolfalseIf true, the onChange event is used to upload files.
diff --git a/docs/projects/frontend/app-components-control-components-file-picker-button-8base.md b/docs/projects/frontend/app-components-control-components-file-picker-button-8base.md deleted file mode 100644 index d8adeaf..0000000 --- a/docs/projects/frontend/app-components-control-components-file-picker-button-8base.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 'app-components-control-components-file-picker-button-8base' -sidebar_label: 'File Picker Button 8base' -redirect_from: '/frontend/app-components/input-components/file-picker-button-8base' -slug: '/projects/frontend/app-components/control-components/file-picker-buton-8base' ---- - -# File Picker Button 8base - -The _File Picker Button 8base_ component is a variant of the [_File Picker 8base_](/projects/frontend/app-components/control-components/file-picker-8base) component; just like the original version, it allows a user to select a file to upload to an 8base workspace. - -This component differs by being a button component rather than a file-type input. However, even though its presentation is different, under the hood, all its properties and functionality are the same as the [_File Picker 8base_](/projects/frontend/app-components/control-components/file-picker-8base) component. - -![File Picker Button 8base](./_images/ab-components-file-picker-button-8base.gif) - -If the **uploadOnChange** property is enabled, the **filename** and **fileId** are passed to the application backend. - -The **filename** is the file's actual name, and the **fileId** is a reference to the file's location on the backend. This information is helpful if, for example, you want to display the file as an avatar on your application. - -### Properties - - - - - - - - - - - - - -
NameTypeDefaultDescription
8baseBackendWorkspacestringSpecifes the name of an 8base workspace.
authorizationHeaderstringSpecifies an 8base API token or an ID token (JWT token).
disabledboolfalseIf true, the file picker 8base is disabled.
acceptedFilesstringDefines a comma-separated list of allowed file types.
maxFileSizenumberDefines the maximum size of a file.
uploadOnChangeboolfalseIf true, the onChange event is used to upload files.
- -Additionally, As a [_Button_](/projects/frontend/app-components/control-components/button) component, the _File Picker Button 8base_ component also exposes the same style properties (except those in the advanced section). diff --git a/docs/projects/frontend/app-components-control-components-file-picker-button.md b/docs/projects/frontend/app-components-control-components-file-picker-button.md deleted file mode 100644 index d5b5f38..0000000 --- a/docs/projects/frontend/app-components-control-components-file-picker-button.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: 'app-components-control-components-file-picker-button' -sidebar_label: 'File Picker Button' -redirect_from: '/frontend/app-components/input-components/file-picker-button' -slug: '/projects/frontend/app-components/control-components/file-picker-button' ---- - -# File Picker Button - -The _File Picker Button_ component is a variant of the [_File Upload_](/projects/frontend/app-components/control-components/file-upload) component; just like the original version, it allows users to browse and select one or more files to upload. It is used independently or as a form component within a Form Block. - -This component differs by being a button component rather than a file-type input. However, even though its presentation is different, under the hood, all its properties and functionality are the same as the [_File Upload_](/projects/frontend/app-components/control-components/file-upload) component. - -![File Picker Button](./_images/pickerbutton.gif) - -The component also has **Custom Properties** that allow you to add additional properties using **Key** **Value** pairs. - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
acceptedFilesstringDefines a comma-separated list of allowed file types.
maxFileSizenumberDefines the maximum size of a file.
- -Additionally, As a [_Button_](/projects/frontend/app-components/control-components/button) component, it also exposes the same style properties (except those in the advanced section). - - diff --git a/docs/projects/frontend/app-components-control-components-file-upload.md b/docs/projects/frontend/app-components-control-components-file-upload.md deleted file mode 100644 index ee772b9..0000000 --- a/docs/projects/frontend/app-components-control-components-file-upload.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 'app-components-control-components-file-upload' -sidebar_label: 'File Upload' -redirect_from: '/frontend/app-components/input-components/file-upload' -slug: '/projects/frontend/app-components/control-components/file-upload' ---- - -# File Upload - -The _File Upload_ component allows users to browse and select one or more files to upload. It is used independently or as a form component within a Form Block. - -The component also has **Custom Properties** that allow you to add additional properties using **Key** **Value** pairs. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
acceptedFilesstringDefines a comma-separated list of allowed file types.
maxFileSizenumberDefines the maximum size of a file.
requiredboolfalseIf true, a file must be uploaded. (form only)
- - diff --git a/docs/projects/frontend/app-components-control-components-form-block.md b/docs/projects/frontend/app-components-control-components-form-block.md deleted file mode 100644 index a1f0e36..0000000 --- a/docs/projects/frontend/app-components-control-components-form-block.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 'app-components-control-components-form-block' -sidebar_label: 'Form Block' -redirect_from: '/frontend/app-components/input-components/form-block' -slug: '/projects/frontend/app-components/control-components/form-block' ---- - -# Form Block - -The _Form Block_ component provides an area in which to design a form. All form components **must** be placed within the _Form Block_ component. - -### Properties - - - - - - - - -
NameTypeDefaultDescription
initialValuesarrayThe initial values property allows you to set initial values for all components on a Form Block.
diff --git a/docs/projects/frontend/app-components-control-components-multiselect.md b/docs/projects/frontend/app-components-control-components-multiselect.md deleted file mode 100644 index 23801cf..0000000 --- a/docs/projects/frontend/app-components-control-components-multiselect.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 'app-components-control-components-multiselect' -sidebar_label: 'Multiselect' -redirect_from: '/frontend/app-components/input-components/multiselect' -slug: '/projects/frontend/app-components/control-components/multiselect' ---- - -# Multiselect - -The _Multiselect_ component provides the user with a list of options to select from. **Multiple** options can be chosen. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only)
labelnodeSpecifies a label for the component.
disabledboolfalseIf true, the multiselect is disabled.
valueanySpecifies a value for the component.
menuItemnodeDefines a menu item in the select list.
addRenderValuetext
looper
container
component		Specifies how the component should render the values in the select list.
- -### Style Attributes - - - - - - - - - - -
NameTypeDefaultDescription
variantfilled
outlined
standard
string		outlinedDefines the display type of the component.
sizesmall
medium
string		mediumDefines the size of the component.
autoWidthboolfalseIf true, the width of the popover will automatically be set based on the size of the items in the menu.
- -## Subcomponents - -The _Multiselect_ component uses a _Menu Item_ subcomponent to create an options list and one of three possible components _Text_, _Looper_, or _Container_ to render the multiselect. - -### Menu Item - -The _Menu Item_ component is a list component with a special target. It is static or dynamically generated text. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
valueanySpecifies the value of the component.
labelnodeSpecifies a label for the component.
loopDataarrayDefines an array of options in the format value, label.
itemNamestringDefines a unique identifier that allows access the array element's properties.
- -### Text - -The _Text_ component creates a text value for another component. - -For further details, see the *Text* component. - -#### Properties - - - - - - - - -
NameTypeDefaultDescription
textstringSpecifies a text value for the multiselect item.
- -### Looper - -The _Looper_ component creates a static or dynamic data array for another component. - -For further details, see the *Looper* component. - -#### Properties - - - - - - - - - -
NameTypeDefaultDescription
loopDataarrayDefines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters.
itemNamestringDefines a unique identifier that allows access the array element's properties.
- -### Container - -Defines the margin and padding around a multiselect item. - -For further details, see the [Container](/projects/frontend/app-components/layout-components/container) component. diff --git a/docs/projects/frontend/app-components-control-components-radio-group.md b/docs/projects/frontend/app-components-control-components-radio-group.md deleted file mode 100644 index 191e689..0000000 --- a/docs/projects/frontend/app-components-control-components-radio-group.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 'app-components-control-components-radio-group' -sidebar_label: 'Radio Group' -redirect_from: '/frontend/app-components/input-components/radio-group' -slug: '/projects/frontend/app-components/control-components/radio-group' ---- - -# Radio Group - -The *Radio Group* component allows the user to select one option from a set. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies the value of the component.
labelnodeSpecifies a label for the component.
radioItemscomponentDefines a list of radio items within the radio group.
- -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
rowboolfalseIf true, aligns the radio items in a row along the horizontal axis. By default, the radio items align in a column along the vertical axis.
- -## Subcomponents - -The _Radio Group_ component has one subcomponent, a _Radio_ component, used to create a list of Radio Items. - -### Radio - -A *Radio* button is a component that acts as a single input control and is part of a set within a *Radio Group*. It has two states, On and Off. - -For further details, see the *Radio* component. - -#### Properties - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
labelnodeSpecifies a label for the component.
valueanySpecifies the value of the component.
disabledboolfalseIf true, the radio button is disabled.
requiredboolfalseIf true, the radio button must be checked.
readOnlyboolfalseIf true, the radio button is read only.
autofocusboolfalseIf true, autofocus is enabled.
loopDataarrayDefines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters.
itemNamestringDefines a unique identifier that allows access the array element's properties.
colordefault
primary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
string		mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string		endSpecifies the location of the component label.
disableRippleboolfalseIf true, disables the ripple effect on the radio button.
-
- -For more detail on the _Radio Group_ component, see the [MUI developer docs](https://mui.com/material-ui/api/radio-group/). diff --git a/docs/projects/frontend/app-components-control-components-radio.md b/docs/projects/frontend/app-components-control-components-radio.md deleted file mode 100644 index 8300bbf..0000000 --- a/docs/projects/frontend/app-components-control-components-radio.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 'app-components-control-components-radio' -sidebar_label: 'Radio' -redirect_from: '/frontend/app-components/input-components/radio' -slug: '/projects/frontend/app-components/control-components/radio' ---- - -# Radio - -A _Radio_ button is a component that acts as a single input control and is part of a set within a _Radio Group_. It has two states, On and Off. - -### Properties - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
labelnodeSpecifies a label for the component.
valueanySpecifies a value for the component.
disabledboolfalseIf true, the radio button is disabled.
requiredboolfalseIf true, the radio button must be checked.
readOnlyboolfalseIf true, the radio button is read only.
autofocusboolfalseIf true, autofocus is enabled.
loopDataarrayDefines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters.
itemNamestringDefines a unique identifier that allows access the array element's properties.
- -### Style Attributes - - - - - - - - - - - -
NameTypeDefaultDescription
colordefault
primary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
string		mediumDefines the size of the component.
labelPlacementtop
bottom
end
start
string		endSpecifies the location of the radio label.
disableRippleboolfalseBy default, the radio component has a ripple effect triggered when the radio state is modified. To disable this effect, set "Disable Ripple" on.
- -> [!NOTE] Example: How to create dynamic Radio buttons -> There are a few ways in which you can create dynamic Radio buttons using the built in Loop property. -> + A backend database request -> + A local state -> + An array -> -> For this example we'll assume you already have a Page with a Radio Group component and a backend database request. -> -> **Backend Database Request** -> 1. Select the first Radio item in your Radio Group, scroll to the bottom of the Properties pane, and expand the Loop section. -> 2. In the *Loop Data* field, enter the name of your database request as `{{Request.data}}` and enter the word `item` in the *Item Name* field. -> 3. We will assume that your request contains a "lastName" field. -> 4. Scroll to the top of the Properties pane and enter `{{item.lastName}}` in the *Label* and *Value* fields. -> 5. You should immediately see your Radio Group populated by a list of last names from your database request. -> 6. Click "Preview" to see how your Radio Group looks in a browser window. -> -> **Local State** -> 1. Click on the *State* icon, which opens the State pane. Ensure the Local tab is selected and click the "+" button to create a new state. -> 2. In the pop-up window, enter "myData" for the *Name*, select "Array" in the *Type* drop-down, and click the expand arrow in the *Default Value* input field. -> 3. Enter the following array in the pop-up panel: `[{"id":"1","lastname":"James"},{"id":"2","lastname":"Smith"},{"id":"3","lastname":"Williams"},{"id":"4","lastname":"Edwards"}]` then click "Create". -> 4. Close the State pane, select the first Radio item in your Radio Group, scroll to the bottom of the Properties pane, and expand the Loop section. -> 5. In the *Loop Data* field, enter the name of your database request as `{{myData.value}}` and enter the word `item` in the *Item Name* field. -> 6. Scroll to the top of the Properties pane and enter `{{item.lastname}}` in the *Label* and *Value* fields. -> 7. You should immediately see your Radio Group populated by a list of last names from your local state. -> 8. Click "Preview" to see how your Radio Group looks in a browser window. -> -> **Array** -> 1. Select the first Radio item in your Radio Group, scroll to the bottom of the Properties pane, and expand the Loop section. -> 2. In the *Loop Data* field, click the expand arrow and enter the following array in the pop-up panel: `[{"id":"1","lastname":"James"},{"id":"2","lastname":"Smith"},{"id":"3","lastname":"Williams"},{"id":"4","lastname":"Edwards"}]` then click "Done". -> 3. Enter the word `item` in the *Item Name* field. -> 4. Scroll to the top of the Properties pane and enter `{{item.lastname}}` in the *Label* and *Value* fields. -> 5. You should immediately see your Radio Group populated by a list of last names from your array. -> 6. Click "Preview" to see how your Radio Group looks in a browser window. - - - -For more detail on the _Radio_ component, see the [MUI developer docs](https://mui.com/material-ui/api/radio/). diff --git a/docs/projects/frontend/app-components-control-components-select.md b/docs/projects/frontend/app-components-control-components-select.md deleted file mode 100644 index 13efd27..0000000 --- a/docs/projects/frontend/app-components-control-components-select.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 'app-components-control-components-select' -sidebar_label: 'Select' -redirect_from: '/frontend/app-components/input-components/select' -slug: '/projects/frontend/app-components/control-components/select' ---- - -# Select - -The _Select_ component provides the user with a list of options to select from. Only **one** option is chosen. - -The _Select_ component is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies a value for the component.
labelnodeSpecifies a label for the component.
disabledboolfalseIf true, the select component is disabled.
menuItemcomponentDefines a menu item in the select list.
- -### Style Attributes - - - - - - - - - - -
NameTypeDefaultDescription
variantfilled
outlined
standard
string		outlinedDefines the display type of the component.
sizesmall
medium
string		mediumDefines the size of the component.
autoWidthboolfalseIf enabled, the width of the popover will automatically be set based on the size of the items in the menu.
- -## Subcomponents - -The _Select_ component uses a _Menu Item_ subcomponent to create the options list. - -### Menu Item - -The *Menu Item* component creates a menu item either manually or dynamically. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
valueanySpecifies the value of the component.
labelnodeSpecifies a label for the component.
loopDataarrayDefines an array of options in the format id, label, value. The id must be is small letters.
itemNamestringDefines a unique identifier name for each menu item.
- -For more detail on the _Select_ component, see the [MUI developer docs](https://mui.com/material-ui/api/select/). diff --git a/docs/projects/frontend/app-components-control-components-slider.md b/docs/projects/frontend/app-components-control-components-slider.md deleted file mode 100644 index 34a09c5..0000000 --- a/docs/projects/frontend/app-components-control-components-slider.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 'app-components-control-components-slider' -sidebar_label: 'Slider' -redirect_from: '/frontend/app-components/input-components/slider' -slug: '/projects/frontend/app-components/control-components/slider' ---- - -# Slider - -The _Slider_ component allows the user to select one value from a range of values along a bar. They are ideal for adjusting volume, brightness, and image filter settings. - -The _Slider_ component is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
labelnodeSpecifies a label for the component.
ariaLabelstringSpecifies a label for the slider.
ariaLabeledBystringSpecifies the id of the element that contains the slider label.
ariaValueTextstringDefines a string value for the current value of the slider.
valuenumberDefines the value of the slider. A ranged slider requires an array of two values.
minnumber0Specifies the minimum value of the slider. The minimum value should not equal the maximum value.
maxnumber100Specifies the maximum value of the slider. The maximum value should not equal the minimum value.
defaultValueanySpecifies a default value for the component. -
scalefuncDefines a transformation function to change the scale of the slider.
stepnumber1Defines the granularity with which the slider can step through values. The minimum prop is the origin point for valid values. If the step is *null*, the thumb will use values provided by the marks prop.
getAriaLabelfuncAccepts a function that returns a string value for the thumb labels of the slider.
getAriaValueTextfuncAccepts a function that returns a string value for the current value of the slider.
classesobjectAccepts a function that returns a string value for the current value of the slider.
marksboolfalseIf true, marks will display on the slider for each unique step. Custom marks can be displayed using an array of value/label keys
disableSwapboolfalseIf true, prevents the current thumb from swapping when dragging it over another thumb.
disabledboolfalseIf true, the slider is disabled.
- -### Style Attributes - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
colorprimary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
string		mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string		endSpecifies the placement of the component label.
tracknormal
inverted
false
string		falseDefines how the track for the slider displays.
valueLabelDisplayedauto
on
off
string		offSpecifies whether the value label displays.
orientationhorizontal
vertical
string		horizontalDefines the orientation of the component.
tabIndexnumberSpecifies the tab index of a hidden input element.
valueLabelFormatfuncA function to specify the format of the value label's value.
sxarraySpecifies custom CSS styles for the slider.
- -For more detail on the _Slider_ component, see the [MUI developer docs](https://mui.com/material-ui/api/slider/). diff --git a/docs/projects/frontend/app-components-control-components-switch.md b/docs/projects/frontend/app-components-control-components-switch.md deleted file mode 100644 index c87e507..0000000 --- a/docs/projects/frontend/app-components-control-components-switch.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 'app-components-control-components-switch' -sidebar_label: 'Switch' -redirect_from: '/frontend/app-components/input-components/switch' -slug: '/projects/frontend/app-components/control-components/switch' ---- - -# Switch - -The _Switch_ component toggles the state of a single setting on or off. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
labelnodeSpecifies a label for the component.
valueanySpecifies a value for the component.
checkedboolfalseIf true, the switch is checked.
requiredboolfalseIndicates if the switch must be set.
disabledboolfalseIf true, the switch is disabled.
autofocusboolfalseIf true, autofocus is enabled.
- -### Style Attributes - - - - - - - - - - - -
NameTypeDefaultDescription
colordefault
primary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
string		mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string		endSpecifies the location of the switch label.
disableRippleboolfalseBy default, the switch component has a ripple effect triggered when the switch state is modified. To disable this effect, set "Disable Ripple" on.
- -## Subcomponents - -The _Switch_ component has a subcomponent that allows an icon to replace the normal thumb on the switch. - -### Icon - -_Checked Icon_ - specifies an icon to use when the switch is set. - -_Unchecked Icon_ - specifies an icon to use when the switch is not set. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Switch_ component, see the [MUI developer docs](https://mui.com/material-ui/api/switch/). diff --git a/docs/projects/frontend/app-components-control-components-text-field.md b/docs/projects/frontend/app-components-control-components-text-field.md deleted file mode 100644 index a4bbd2e..0000000 --- a/docs/projects/frontend/app-components-control-components-text-field.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 'app-components-control-components-text-field' -sidebar_label: 'Text Field' -redirect_from: '/frontend/app-components/input-components/text-field' -slug: '/projects/frontend/app-components/control-components/text-field' ---- - -# Text Field - -The _Text Field_ component allows the user to enter and edit text. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies the value of the component.
labelnodeSecifies a label for the component.
placeholderstringDisplays placeholder text in the text field to prompt the user for specific input.
helperTextnodeDisplays helper text beneath the text field to prompt the user for specific input.
typetext
number
color
email
url
date
datetime-local
month
password
tel
time
week
string		textSpecifies the type of text input.
validationemail
url
US phone number
regular expression
string		Defines the type of text to validate.
helperErrorTextnodeIf validation is enabled, will display an error message beneath the text field if the input is invalid.
debouncenumber0Sets a delay on any events attached to the component.
disabledboolfalseIf true, the text field is disabled.
requiredboolfalseIf true, the text field must contain a value.
autofocusboolfalseIf true, autofocus is enabled.
multilineboolfalseSpecifies whether the text field contains multiple lines. If enabled, the input field changes to a text area field and will stretch to match the size of its content unless the Min and Max rows are set.
minRowsnumberIndicates the minimum number of rows.
maxRowsnumberIndicates the maximum number of rows.
startAdornmentcomponentDisplays an icon or typography component at the start of the text field.
endAdornmentcomponentDisplays an icon or typography component at the end of the text field.
- -### Style Attributes - - - - - - - - - - - -
NameTypeDefaultDescription
variantfilled
outlined
standard
string		outlinedDefines the display type of the component.
colorprimary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
sizesmall
medium
string		mediumDefines the size of the component.
fullWidthboolfalseIf true, the text field takes up the full width of its container.
- -## Subcomponents - -The _Text Field_ component has two subcomponents that allow an icon or typography to be placed as an adornment at the start or end of the text field. - -### Icon - -Specifies an icon to use at the start or end of a text field. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large		mediumDefines the size of the component.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -### Typography - -Specifies typography to use at the start or end of a text field. - -For further details, see the *Typography* component. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to display in the text field.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string		inheritSpecifies the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string		inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.
- -For more detail on the _Text Field_ component, see the [MUI developer docs](https://mui.com/material-ui/api/text-field/). diff --git a/docs/projects/frontend/app-components-control-components-time-picker.md b/docs/projects/frontend/app-components-control-components-time-picker.md deleted file mode 100644 index 2776c02..0000000 --- a/docs/projects/frontend/app-components-control-components-time-picker.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 'app-components-control-components-time-picker' -sidebar_label: 'Time Picker' -redirect_from: '/frontend/app-components/input-components/time-picker' -slug: '/projects/frontend/app-components/control-components/time-picker' ---- - -# Time Picker - -The _Time Picker_ component allows the user to select a single time. It renders a modal dialogue on a mobile device and a text field with a popover on a desktop. - -The _Time Picker_ component is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies the value of the component.
labelnodeSpecifies a label for the component.
formatHH:mm:ss
any		HH:mm:ssSpecifies the time format to display.
maxTimeHH:mm:ss
HH:mm
HH
any		HH:mm:ssSpecifies a maximum time.
minTimeHH:mm:ss
HH:mm
HH
any		HH:mm:ssSpecifies a minimum.
minutesStepnumber1Specifies the Step over minutes value.
responsivenessmobile
desktop
static
string		desktopSpecifies the device the time picker is optimized for.
showToolbarbooltrueIf true, the toolbar is enabled.
orientationportrait
landscape
string		portraitSpecifies the orientation of the component.
ampmbooltrueIf true, AM/PM will display 12/24 view for clock selection.
ampmInClockboolfalseIf true, AM/PM will display on either side of the analog clock.
readOnlyboolfalseIf true, the time picker is read only.
disabledboolfalseIf true, the time picker is disabled.
openTohours
minutes
seconds
string		hoursSpecifies the initial view to display.
hoursViewbooltrueIf true, the component will display the hour view.
minutesViewbooltrueIf true, the component will display the minute view.
secondsViewboolfalseIf true, the component will display the seconds view.
- -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
inputVariantFilled
Outlined
Standard
string		OutlinedSpecifies the display type of the component.
- -For more detail on the _Time Picker_ component, see the [MUI developer docs](https://mui.com/x/api/date-pickers/time-picker/). diff --git a/docs/projects/frontend/app-components-control-components-toggle-button-group.md b/docs/projects/frontend/app-components-control-components-toggle-button-group.md deleted file mode 100644 index 43d9637..0000000 --- a/docs/projects/frontend/app-components-control-components-toggle-button-group.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 'app-components-control-components-toggle-button-group' -sidebar_label: 'Toggle Button Group' -redirect_from: '/frontend/app-components/input-components/toggle-button-group' -slug: '/projects/frontend/app-components/control-components/toggle-button-group' ---- - -# Toggle Button Group - -The _Toggle Button Group_ component allows the user to select one option from a set. It is used independently or as a form component within a Form Block. - -### Properties - - - - - - - - - - - - - -
NameTypeDefaultDescription
labelnodeSpecifies a label for the component.
valueanySpecifies a value for the component.
classesobjectOverrides or extends the classes applied to the component.
exclusiveboolfalseIf true, only allow one of the toggle buttons to be selected.
disabledboolfalseIf true, the toggle button group is disabled.
toggleButtonItemscomponentSpecifies a list of toggle buttons within the toggle button group.
- -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
orientationhorizontal
vertical
string		horizontalSpecifies the orientation of the toggle button group.
sizesmall
medium
large
string		mediumDefines the size of the component.
colorstandard
primary
secondary
error
info
success
warning
string		standardDefines the color of the component.
fullWidthboolfalseIf true, the toggle button group takes up the full width of its container.
sxarraySpecifies custom CSS styles for the toggle button group.
- -## Subcomponents - -The _Toggle Button Group_ component has one subcomponent, a _Toggle Button_ component, used to create a list of Toggle Button Items. - -### Toggle Button - -A _Toggle Button_ is a component that acts as a single input control and is part of a set within a Toggle Button Group. It is possible to select multiple toggle buttons unless the **exclusive property** is enabled for the _Toggle Button Group_. - -The toggle button has two states, On and Off. - -For further details, see the *Toggle Button* component. - -#### Properties - - - - - - - - -
NameTypeDefaultDescription
textstringThe text label of the component (read only in the toggle button group props) .
- -For more detail on the _Toggle Button Group_ component, see the [MUI developer docs](https://mui.com/material-ui/api/toggle-button-group/). diff --git a/docs/projects/frontend/app-components-control-components-toggle-button.md b/docs/projects/frontend/app-components-control-components-toggle-button.md deleted file mode 100644 index 2df6e10..0000000 --- a/docs/projects/frontend/app-components-control-components-toggle-button.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 'app-components-control-components-toggle-button' -sidebar_label: 'Toggle Button' -redirect_from: '/frontend/app-components/input-components/toggle-button' -slug: '/projects/frontend/app-components/control-components/toggle-button' ---- - -# Toggle Button - -A _Toggle Button_ is a component that acts as a single input control and is part of a set within a Toggle Button Group. It is possible to select multiple toggle buttons unless the **exclusive property** is enabled for the _Toggle Button Group_. - -The toggle button has two states, On and Off. - -### Properties - - - - - - - - - - - - - - -
NameTypeDefaultDescription
textstringSpecifies the text value for the toggle button face.
labelnodeSpecifies a label for the component.
valueanySpecifies the value of the component.
typebutton
submit
reset		buttonSpecifies the type of the component.
classesobjectOverrides or extends the classes applied to the component.
disabledboolfalseIf true, the toggle button is disabled.
hrefstringA URL to link to when the component is clicked.
- -### Style Attributes - - - - - - - - - - - - - - -
NameTypeDefaultDescription
colorstandard
primary
secondary
error
info
success
warning
string		standardDefines the color of the component.
sizesmall
medium
large
string		mediumDefines the size of the component.
fullWidthboolfalseIf true, the toggle button takes up the full width of its container.
sxarray
Specifies custom CSS styles for the toggle button.
disableElevationboolfalseIf true, the toggle button will sit flat on the background surface.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf true, the ripple effect is disabled.
- -## Subcomponents - -The _Toggle Button_ component has a subcomponent that allows the placement of an icon on the left or right side of the button face. - -### Icon - -_Left Icon_ - specifies an icon to use on the left side of the button face. - -_Right Icon_ - specifies an icon to use on the right side of the button face. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Toggle Button_ component, see the [MUI developer docs](https://mui.com/material-ui/api/toggle-button). diff --git a/docs/projects/frontend/app-components-control-components.md b/docs/projects/frontend/app-components-control-components.md deleted file mode 100644 index 2a8bcbe..0000000 --- a/docs/projects/frontend/app-components-control-components.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 'app-components-control-components' -sidebar_label: 'Control Components' -slug: '/projects/frontend/app-components/control-components' ---- - -# Control Components - -Control components allow users to make selections, fill out forms, and toggle elements. - - -- [Form Block](app-components-control-components-form-block.md) -- [Autocomplete](app-components-control-components-autocomplete.md) -- [Button](app-components-control-components-button.md) -- [Checkbox](app-components-control-components-checkbox.md) -- [Date Picker](app-components-control-components-date-picker.md) -- [Field Array](app-components-control-components-field-array.md) -- [File Picker 8base](app-components-control-components-file-picker-8base.md) -- [File Picker Button 8base](app-components-control-components-file-picker-button-8base.md) -- [File Drop Zone 8base](app-components-control-components-file-dropzone-8base.md) -- [File Upload](app-components-control-components-file-upload.md) -- [File Picker Button](app-components-control-components-file-picker-button.md) -- [File Drop Zone](app-components-control-components-file-dropzone.md) -- [Multiselect](app-components-control-components-multiselect.md) -- [Radio](app-components-control-components-radio.md) -- [Radio Group](app-components-control-components-radio-group.md) -- [Select](app-components-control-components-select.md) -- [Slider](app-components-control-components-slider.md) -- [Switch](app-components-control-components-switch.md) -- [Text Field](app-components-control-components-text-field.md) -- [Time Picker](app-components-control-components-time-picker.md) -- [Toggle Button](app-components-control-components-toggle-button.md) -- [Toggle Button Group](app-components-control-components-toggle-button-group.md) diff --git a/docs/projects/frontend/app-components-customizing-app-builder-components.md b/docs/projects/frontend/app-components-customizing-app-builder-components.md deleted file mode 100644 index fc8c6e1..0000000 --- a/docs/projects/frontend/app-components-customizing-app-builder-components.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'app-components-customizing-app-builder-components' -sidebar_label: 'Customizing App Builder Components' -redirect_from: '/frontend/app-components/customizing-app-builder-components' -slug: '/projects/frontend/app-components/customizing-app-builder-components' ---- - -# Customizing App Builder Components - -This article describes how a developer can customize and configure App Builder components. - ---- - -When working with Components in App Builder, there are 3 areas of configuration and customization that you have access to. They are **properties**, **styles**, and **events**. - -## Component Properties - -![App Builder's Component Properties](./_images/ab-component-settings-properties-1.png) - -You can set Component properties to affect the behavior of a component and its data. For example, you can set the "isLoading" property of a Button component to true to make the button disabled and display a loading spinner instead of the button's label. You can also set properties in the Component Settings area of the Editor. - -Most inputs are Handlebars enabled, meaning that you can write expressions and use functions inside the inputs to determine values. For example, you can get a greeting message on a Text component to be `{{ new Date().getHours() < 12 ? "Good Morning!" : "Good Afternoon!" }}` to dynamically render a time-sensitive (get it) message to your user. - -## Component Styles - -![App Builders Component Styles](./_images/ab-component-settings-styles-1.png) - -You can also use the Styles pane to update the appearance of a Component. For example, you can change the background color, font size, and padding of a Button component. Styles changes will immediately be reflected on the rendered Component so that you can see exactly what your Component will look like before you save any changes. - -App Builder also provides several different ways to customize the look and feel of your Components. You can use the built-in themes or create your custom themes. You can also use the CSS Editor to style your Component's styling pane directly. This gives you full control over how your Component looks and feels. - -## Component Events - -![App Builder's Component Events](./_images/ab-component-settings-events-1.png) - -You can add event listeners to components in the Component Settings area of the Editor. Click on the "+" icon button in the "Events" tab of the Component Settings and select the event you want to trigger an Action on. You can then choose what action to take when that event is triggered. For example, you can navigate to a different page when a button is clicked, or you can run custom Javascript code. - -Adding event listeners is a quick and easy way to add interactivity to your components without writing any – or not too much – code. This makes creating UIs that are interactive and responsive to user input easy. - -## Next Steps - -In the following sections, we'll take a deeper look at each type of configuration. diff --git a/docs/projects/frontend/app-components-customizing-styling-on-components.md b/docs/projects/frontend/app-components-customizing-styling-on-components.md deleted file mode 100644 index 87c862e..0000000 --- a/docs/projects/frontend/app-components-customizing-styling-on-components.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 'app-components-customizing-styling-on-components' -sidebar_label: 'Customizing Styling on Components' -redirect_from: '/frontend/app-components/customizing-styling-on-components' -slug: '/projects/frontend/app-components/customizing-styling-on-components' ---- - -# Customizing Styling on Components - -This article describes how a developer can apply custom styling to component instances when working with App Builder. - ---- - -![App Builders Component Styles](./_images/ab-component-settings-styles-1.png) - -Every component in App Builder can be styled using the styling pane. Unlike when configuring your application Theme, component styles apply to the instance they're being set on. You can use this to make a specific component stand out or to override the theming for just one component. - -The default components that ship with App Builder are all based on an implementation of Material UI. As a result, some have custom styling properties specific to that framework. All custom styling options that are **unique to a component** appear at the top of the styling pane. - -!["Component Specific Styles"](./_images/ab-component-settings-styles-2.png) - -All other styles supported by the underlying HTML elements will appear below in a relevant categorical grouping, such as **spacing**, **size**, **grid child**, and others. This allows you to leverage a form-based approach to styling your components using native web styling properties (i.e. padding, margin, font-size, etc.) - -## Applying Custom CSS to Components - -Styles can also be applied to components using CSS class. At the bottom of the Styles pane is a Custom CSS input in which a special CSS rule for `.currentElement` is prepopulated. Any style declarations added to this CSS rule will only apply to the current instance. - -!["Component Specific Styles"](./_images/ab-component-settings-styles-3.png) - -## Styling Components using Classes - -Inside the Theme section of your app, you can add global custom CSS. You can use this CSS to target any component in your application. For example, if you wanted to set a global style for adding a red background to specific components, you could add the following CSS rule: - -```css -.bg-red { - background-color: red; -} -``` - -Using the **class** property on a component, you can add the `.bg-red` class to any component you want to target with this rule: - -## Conclusion - -Customizing the style of components in App Builder is a powerful way to optimize the look and feel of your application. Utilizing the built-in styling properties unique to each component and custom CSS allows for a wide range of possibilities for making your app look just right. diff --git a/docs/projects/frontend/app-components-data-components-looper.md b/docs/projects/frontend/app-components-data-components-looper.md deleted file mode 100644 index 07b30f1..0000000 --- a/docs/projects/frontend/app-components-data-components-looper.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 'app-components-data-components-looper' -sidebar_label: 'Looper' -redirect_from: '/frontend/app-components/data-components/looper' -slug: '/projects/frontend/app-components/data-components/looper' ---- - -# Looper -The *Looper* component acts as a container and requires an array and another component, such as a *List* or *Card*. It uses the array to dynamically populate the other component's content inside the *Looper*. - -#### Properties - - - - - - - - - -
NameTypeDefaultDescription
loopDataarrayDefines an array of data in the format id, prop1, prop2, prop3. The id must be is small letters.
itemNamestringDefines a unique identifier that allows access the array element's properties.
- -> [!NOTE] Example: How create dynamic content using the Looper -> -> For this example, we assume you already have a *Page* with *Form Block*, *Form Text Field*, a submit *Button* called "Add", and a *Looper*. You will also need a database table for a To Do List with "id" and "item" fields. -> ->Additionally, you will need one query and two mutations: -> - **addToDo** - Takes input from the text field and stores it in the database table. -> - **getTodos** - Fetches the To Do List data from the database table. -> - **deleteToDo** - Deletes a To Do item in the database table. -> -> 1. Drag a *Card* component from the *Components* pane and drop it onto your *Looper*. -> 2. Click the *Page Structure* icon to confirm the *Card* component is inside the *Looper Content* component. -> 3. Click the *Requests* icon to open the *Requests* pane and "Run" your **getTodos** query. -> 4. Once you get your Response, click the *State* icon to open the *State* pane. -> 5. Under the *Requests* section, click the green arrow next to the **getTodos** name to view its properties. -> 6. Click the green arrow next to the "data" property and drill down to the "items" property. At this point, the array will not contain any data. -> 7. Click the *clipboard* icon below the "Items" property to copy the array to the clipboard. -> 8. Click the *Page Structure* icon and select your *Looper* component, which opens the *Properties* pane. -> 9. Paste the array you copied into the *Loop Data* field. Your array should look something like this: `{{ getTodos.data?.todosList.items || [] }}` -> 10. In the *Item Name* field, enter the word **item**. -> 11. Select your *Card* component on the *Page* and open the *Properties* pane. -> 12. Under *Custom Properties*, click "Add Item" to add a custom property. -> 13. Click the gear icon next to the *propname* to open a pop-up window. -> 14. Enter "cardid" in the *Key* field and `{{ item?.id || "" }}` in the *Value* field, then close the pop-up. -> 15. Click the gear icon next to the *Header* property to open a pop-up window. -> 16. Enter `{{ item?.todo || "" }}` in the *Title* field, which will display the **item** as the header for the *Card* component. -> 17. Select the *Card Content* component on the *Page* and open the *Properties* pane. -> 18. Drag an *Icon Button* component onto the *Card Content* component. -> 19. Expand the *Icon* section of the *Properties* pane, and click on the gear icon next to the *Icon* property to open a pop-up window. -> 20. Click the "Change" button, which opens a pop-up window. -> 21. Enter "Delete" in the *Search* field, choose an appropriate icon, click "Apply", and close the *Icon* properties pop-up window. -> 22. Select the *Icon Button* and click the *Events* tab in the right-hand pane. -> 23. Click "+" and select the "On Click" event. -> 24. Click "Choose Action", then select "Run Custom Code", and click the "Add Custom Code" button. -> 25. You want to call your **deleteToDo** mutation in the code panel and pass it the **cardid**. -> 26. Your code should look similar to: `deleteToDo.run({ variables:{ "todoId": item.id} });`. -> -> If you enter a To Do item in the form text field, such as "Clean Car" and click the "Add" button, a new card is created with the heading "Clean Car". As you add new items, they are added to the *Looper* array. -> -> If you click the delete button on a card, the card is deleted. As you delete items, they are deleted from the *Looper* array. diff --git a/docs/projects/frontend/app-components-data-components.md b/docs/projects/frontend/app-components-data-components.md deleted file mode 100644 index 1beb067..0000000 --- a/docs/projects/frontend/app-components-data-components.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: 'app-components-data-components' -sidebar_label: 'Data Components' -slug: '/projects/frontend/app-components/data-components' ---- - -# Data Components - -Data Components can tranform your data and display it. - -- [Looper](app-components-data-components-looper.md): This container requires an array and another component, such as a List or Card. The Looper will dynamically display the other component's content. diff --git a/docs/projects/frontend/app-components-introduction.md b/docs/projects/frontend/app-components-introduction.md deleted file mode 100644 index 41779c5..0000000 --- a/docs/projects/frontend/app-components-introduction.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 'app-components-introduction' -redirect_from: '/frontend/app-components/introduction' -slug: '/projects/frontend/app-components/introduction' ---- - -# App Components Introduction - -This document describes what Components are in App Builder and why they're useful when building applications. - ---- - -![App Editor components library](./_images/ab-editor-components-drawer-1.png) - -Components are the drag-and-drop building blocks of an App Builder application. Each component represents a piece of functionality or UI element that can be added to an application, such as a form, a list, or an input. - -Components are flexible and can be styled and configured to fit the needs of each individual application. For example, a form component can be configured to include different fields, such as text input, radio buttons, or a date picker, and then have custom styles applied to modify its look and feel. - -Components can be grouped together for reuse throughout an application, which makes them very efficient to work with. This means that once a Component Group has been created, it can be used in any number of applications without having to recreate it each time. - -App Builder ships with many pre-built components based on Material UI and can be used in applications. All components expose **properties**, **styles**, and **events**, allowing you to modify their look and behavior. - -## Next Steps - -Components are an important part of App Builder and are essential for creating efficient and scalable applications. In the following sections, we'll explore how to use them in your App Builder apps. diff --git a/docs/projects/frontend/app-components-layout-components-async-content.md b/docs/projects/frontend/app-components-layout-components-async-content.md deleted file mode 100644 index 34e89ec..0000000 --- a/docs/projects/frontend/app-components-layout-components-async-content.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 'app-components-layout-components-async-content' -sidebar_label: 'Async Content' -redirect_from: '/frontend/app-components/layout-components/async-content' -slug: '/projects/frontend/app-components/layout-components/async-content' ---- - -# Async Content - -The _Async Content_ component is a progress indicator that displays an unspecified wait time or length of a process. - -It informs users about the state of ongoing processes such as loading an application, submitting a form or saving updates. - -Progress indicators are: - -- Determinate - display how long an operation will take -- Indeterminate - visualize an unspecified wait time - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
typecircular
linear
string		circularSpecifies the type of progress indicator to display.
loadingboolfalseIf true, the loading animation is enabled.
- -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
variantdeterminate
indeterminate		indeterminateIndicates the classification of progress indicator.
colorinherit
primary
secondary
error
info
success
warning
string		primaryDefines the color of the component.
stretchbooltrueIf true, the component can stretch.
sizestring40pxDefines the size of the component in pixels.
thicknessnumber3.6Defines the line thickness of the component
- -For more detail on the _Async Content_ component, see the [MUI developer docs](https://mui.com/material-ui/api/circular-progress/). diff --git a/docs/projects/frontend/app-components-layout-components-card.md b/docs/projects/frontend/app-components-layout-components-card.md deleted file mode 100644 index aeff12f..0000000 --- a/docs/projects/frontend/app-components-layout-components-card.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 'app-components-layout-components-card' -sidebar_label: 'Card' -redirect_from: '/frontend/app-components/layout-components/card' -slug: '/projects/frontend/app-components/layout-components/card' ---- - -# Card - -The _Card_ component is a surface that displays content and actions for a single topic. - -Cards can contain text, media, and UI controls, and are used to display complex or detailed information. - -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
raisedboolfalseIf true, the card uses a raised style.
- -## Subcomponents - -The _Card_ component consists several subcomponents that define various aspects of a card's content. - -### Header (CardHeader) - -The _Header_ component provides an area on the card to display a title and subheading. - -#### Properties - - - - - - - - - -
NameTypeDefaultDescription
titlenodeDefines the title of a card.
subheadernodeDefines the subheading of a card.
- -### Content (CardContent) - -The _Content_ component is the area of the card where content is displayed. - -#### Properties - - - - - - - - - -
NameTypeDefaultDescription
paddingstringThe padding space around the card content.
marginstringThe margin space around the card content.
- -### Media (CardMedia) - -The _Media_ component displays media elements for the card. - -#### Properties - - - - - - - - - - -
NameTypeDefaultDescription
titlestringDefines the title of a media element.
imagestringThe image to be displayed as a background image.
heightstringThe height of the background image in pixels; if missing the image will not display.
- -For more detail on the _Card_ component, see the [MUI developer docs](https://mui.com/material-ui/api/card/). diff --git a/docs/projects/frontend/app-components-layout-components-container.md b/docs/projects/frontend/app-components-layout-components-container.md deleted file mode 100644 index 8350ed1..0000000 --- a/docs/projects/frontend/app-components-layout-components-container.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'app-components-layout-components-container' -sidebar_label: 'Container' -redirect_from: '/frontend/app-components/layout-components/container' -slug: '/projects/frontend/app-components/layout-components/container' ---- - -# Container - -The *Container* component centers content horizontally and provides an area to lay out other components to create a unified page design. - -By default, a container component is _fluid_, and its width grows with the size of the screen. To create a _fixed_ container, set the minWidth and maxWidth to the same value. - -For more detail on the _Container_ component, see the [MUI developer docs](https://mui.com/material-ui/react-container/). diff --git a/docs/projects/frontend/app-components-layout-components-footer.md b/docs/projects/frontend/app-components-layout-components-footer.md deleted file mode 100644 index 4ffd8e9..0000000 --- a/docs/projects/frontend/app-components-layout-components-footer.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'app-components-layout-components-footer' -sidebar_label: 'Footer' -redirect_from: '/frontend/app-components/layout-components/footer' -slug: '/projects/frontend/app-components/layout-components/footer' ---- - -# Footer - -The _Footer_ component acts as a container that allows you to organize other components within it at the bottom of the page. diff --git a/docs/projects/frontend/app-components-layout-components-header.md b/docs/projects/frontend/app-components-layout-components-header.md deleted file mode 100644 index 20a43e2..0000000 --- a/docs/projects/frontend/app-components-layout-components-header.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: 'app-components-layout-components-header' -sidebar_label: 'Header' -redirect_from: '/frontend/app-components/layout-components/header' -slug: '/projects/frontend/app-components/layout-components/header' ---- - -# Header - -The _Header_ component acts as a container that allows you to organize other components within it at the top of the page. - -### Style Attributes - - - - - - - - - - -
NameTypeDefaultDescription
colorprimary
secondary
transparent
default
inherit
string		defaultDefines the background color for the header component.
variantregular
dense
string		regularDefines the vertical position of all components within the header component.
disableGuttersboolflaseIf true, the left and right gutters within the header are disabled.
diff --git a/docs/projects/frontend/app-components-layout-components-menu.md b/docs/projects/frontend/app-components-layout-components-menu.md deleted file mode 100644 index f10d6f4..0000000 --- a/docs/projects/frontend/app-components-layout-components-menu.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 'app-components-layout-components-menu' -sidebar_label: 'Menu' -redirect_from: '/frontend/app-components/layout-components/menu' -slug: '/projects/frontend/app-components/layout-components/menu' ---- - -# Menu - -The _Menu_ component displays a list of choices on a temporary surface. The user must interact with a button or another control to display a menu. - -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
anchorOriginHorizontalleft
right
center
string		leftDefines the horizontal anchor position of the menu.
anchorOrigninVerticaltop
center
bottom
string		topDefines the vertical anchor position of the menu.
transformOriginHorizontalleft
center
right
string		leftSpecifies a transformation on the horizontal anchor position.
transformOriginVerticaltop
center
right
string		topSpecifies a transformation on the vertical anchor position.
elevationinteger4Specifies a shadow applied to the surface, making the menu appear raised above the surface. Valid values are 0-24.
- -For more detail on the _Menu_ component, see the [MUI developer docs](https://mui.com/material-ui/api/menu/). diff --git a/docs/projects/frontend/app-components-layout-components-paper.md b/docs/projects/frontend/app-components-layout-components-paper.md deleted file mode 100644 index 67dff68..0000000 --- a/docs/projects/frontend/app-components-layout-components-paper.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 'app-components-layout-components-paper' -sidebar_label: 'Paper' -redirect_from: '/frontend/app-components/layout-components/paper' -slug: '/projects/frontend/app-components/layout-components/paper' ---- - -# Paper - -The _Paper_ component translates the physical properties of paper to the screen. Like physical paper, _Paper_ components can be re-sized, shuffled, and bound together as multiple sheets. - -### Style Attributes - - - - - - - - - - -
NameTypeDefaultDescription
variantelevation
outlined
string		elevationDefines the type of the component.
squareboolfalseIf true, rounded corners are disabled.
elevationinteger1Specifies a shadow applied to the surface, making the component appear raised above the surface. Valid values are 0-24.
- -For more detail on the _Paper_ component, see the [MUI developer docs](https://mui.com/material-ui/api/paper/). diff --git a/docs/projects/frontend/app-components-layout-components-popper.md b/docs/projects/frontend/app-components-layout-components-popper.md deleted file mode 100644 index 931b8f4..0000000 --- a/docs/projects/frontend/app-components-layout-components-popper.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 'app-components-layout-components-popper' -sidebar_label: 'Popper' -redirect_from: '/frontend/app-components/layout-components/popper' -slug: '/projects/frontend/app-components/layout-components/popper' ---- - -# Popper - -The _Popper_ component displays content on top of other content. The component API is an alternative to the react-popper and relies on a 3rd party library, _Popper.js_, for perfect positioning. - -When you add a _Popper_ component to a page, a _Button_ component that controls the state of the _Popper_ is automatically added for you. Other components, such as an _Icon_ or _Image_, can also be used. - -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
placementauto-end
auto-start
auto
bottom-end
bottom-start
bottom
left-end
left-start
left
right-end
right-start
right
top-end
top-start
top		bottomDefines the positioning of the component on the page.
- -## Popper Content - -The *Popper Content* is the area within the *Popper* component that displays the content. - -### Style Attributes - - - - - - - - - -
NameTypeDefaultDescription
variantelevation
outlined
string		Defines the type of the component.
squareboolfalseIf true, rounded corners are disabled.
elevationintegerSpecifies a shadow applied to the surface, making the component appear raised above the surface. Valid values are 0-24.
- -For more detail on the _Popper_ component, see the [MUI developer docs](https://mui.com/material-ui/api/popper/). diff --git a/docs/projects/frontend/app-components-layout-components.md b/docs/projects/frontend/app-components-layout-components.md deleted file mode 100644 index a88fd32..0000000 --- a/docs/projects/frontend/app-components-layout-components.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: 'app-components-layout-components' -sidebar_label: 'Layout Components' -slug: '/projects/frontend/app-components/layout-components' ---- - -# Layout Components - -Layout components help you organize and control your user interface. - -- [Async Content](app-components-layout-components-async-content.md): The Async Content component is a progress indicator that displays an unspecified wait time or length of a process. -- [Card](app-components-layout-components-card.md): The Card component is a surface that displays content and actions for a single topic. -- [Container](app-components-layout-components-container.md): The Container component centers content horizontally and provides an area to lay out other components to create a unified page design. -- [Footer](app-components-layout-components-footer.md): The Footer component is a container that allows you to organize other components within it at the bottom of the page. -- [Header](app-components-layout-components-header.md): The Header component is a container that allows you to organize other components within it at the top of the page. -- [Menu](app-components-layout-components-menu.md): The Menu component displays a list of choices on a temporary surface. The user must interact with a button or another control to display a menu. -- [Paper](app-components-layout-components-paper.md): The Paper component translates the physical properties of paper to the screen. Paper components can be re-sized, shuffled, and bound together as multiple sheets. -- [Popper](app-components-layout-components-popper.md): The Popper component displays content on top of other content. The component API is an alternative to the react-popper and relies on a 3rd party library, Popper.js, for perfect positioning. diff --git a/docs/projects/frontend/app-components-other-components-accordion.md b/docs/projects/frontend/app-components-other-components-accordion.md deleted file mode 100644 index e58bf58..0000000 --- a/docs/projects/frontend/app-components-other-components-accordion.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 'app-components-other-components-accordion' -sidebar_label: 'Accordion' -redirect_from: '/frontend/app-components/other-components/accordion' -slug: '/projects/frontend/app-components/other-components/accordion' ---- - -# Accordion - -The _Accordion_ component allows the user to show and hide sections of associated content on a page. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
actionsboolfalseIf enabled, displays the Accordion Action settings.
disabledboolfalseIf true, the component is disabled.
expandedcodeAllows the user to add additional code to control the expansion functionality of the component.
- -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
squareboolfalseIf true, disables rounded corners on the component.
- -## Subcomponents - -The _Accordion_ component consists of several subcomponents that define various aspects of an accordion's content. - -### Accordion Summary - -The _Accordion Summary_ component provides a title for the content within the details section of the accordion and an expansion indicator to expand the accordion. - - - - - - - - - - - - - -
NameTypeDefaultDescription
expandIconnodedown arrowDefines the icon to display as the expand indicator.
marginstringThe margin space around the accordion summary content.
paddingstringThe padding space around the accordion summary content.
fontserif
sans-serif
monospaced
arial
arial black
verdana
times new roman
didot
georgia
american typewriter
courier
monaco
bradley hand
string		Defines the font face for the title.
sizestringDefines the size of the accordion summary component in pixels.
colorhref #ffffff
rgb 5,5,5
string		Defines the color of the accordion summary component.
- -### Accordion Details - -The _Accordion Details_ component provides a surface to display additional information through other components, such as a _Card_, _Typography_ or _Text_ component. - - - - - - - - - - - - -
NameTypeDefaultDescription
marginstringThe margin space around the accordion details content.
paddingstringThe padding space around the accordion details content.
fontserif
sans-serif
monospaced
arial
arial black
verdana
times new roman
didot
georgia
american typewriter
courier
monaco
bradley hand
string		Defines the font face for the detail text.
sizestringDefines the size of the accordion details component in pixels.
colorhref #ffffff
rgb 5,5,5
string		Defines the color of the accordion details component.
- -### Accordion Actions - -The *Accordion Actions* component allows for the placement of *Button* components to perform actions related to the accordion's function. By default, when the accordion actions are enabled, both the **Cancel** and **OK** buttons are added to the component. - - - - - - - - - - - - - -
NameTypeDefaultDescription
disableSpacingboolfalseIf true, removes additional margin spacing around the actions.
marginstringThe margin space around the accordion actions content.
paddingstringThe padding space around the accordion actions content.
fontserif
sans-serif
monospaced
arial
arial black
verdana
times new roman
didot
georgia
american typewriter
courier
monaco
bradley hand
string		Defines the font face for the actions component.
sizestringDefines the size of the accordion actions component in pixels.
colorhref #ffffff
rgb 5,5,5
string		Defines the color of the accordion actions component.
- -For more detail on the _Accordion_ component, see the [MUI developer docs](https://mui.com/material-ui/api/accordion/). diff --git a/docs/projects/frontend/app-components-other-components-alert.md b/docs/projects/frontend/app-components-other-components-alert.md deleted file mode 100644 index f3cec16..0000000 --- a/docs/projects/frontend/app-components-other-components-alert.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 'app-components-other-components-alert' -sidebar_label: 'Alert' -redirect_from: '/frontend/app-components/other-components/alert' -slug: '/projects/frontend/app-components/other-components/alert' ---- - -# Alert - -The _Alert_ component displays a brief, important message to attract the user's attention without interrupting their work. - -### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringThe message text to display in the alert.
iconboolfalseIf true, overrides the default icon displayed on the alert.
actionButtonboolfalseIf true, will display an action button after the alert message.
closeTextstringOverride for the close label on the popup icon button.
- -### Style Attributes - - - - - - - - - -
NameTypeDefaultDescription
variantfilled
outlined
standard
string		standardDefines the display type to use.
severityerror
info
success
warning
string		successThe level of importance of the alert. A default color and icon are set based on the severity.
- -## Subcomponents - -The _Alert_ component uses a subcomponent to create an alert title. Two optional subcomponents provide an icon and an action button for the alert component. - -### Alert Title - -The _Alert Title_ component provides a title for the alert. - -#### Properties - - - - - - - - -
NameTypeDefaultDescription
titlestringThe title of the alert.
- -### Icon - -Allows the user to add an icon to the alert component. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -### Button - -Allows the user to add an action button to the alert. - -For further details, see the *Button* component. - -#### Properties - - - - - - - - -
NameTypeDefaultDescription
textstringThe text label for the button face.
- -For more detail on the _Alert_ component, see the [MUI developer docs](https://mui.com/material-ui/api/alert/). diff --git a/docs/projects/frontend/app-components-other-components-avatar.md b/docs/projects/frontend/app-components-other-components-avatar.md deleted file mode 100644 index aeb7e47..0000000 --- a/docs/projects/frontend/app-components-other-components-avatar.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 'app-components-other-components-avatar' -sidebar_label: 'Avatar' -redirect_from: '/frontend/app-components/other-components/avatar' -slug: '/projects/frontend/app-components/other-components/avatar' ---- - -# Avatar - -The _Avatar_ component is a visual element, such as an image, letter(s) or icon, used to represent a user, label or tool. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
sourcestringDefines the path to the image.
altTextstringDefines the alt text attribute for the image.
sourceSetstringDefines the srcSet attribute for the image.
- -### Style Attributes - - - - - - - - -
NameTypeDefaultDescription
variantcircular
rounded
square
string		circularSpecifies the shape of the avatar.
- -## Subcomponents - -The _Avatar_ component has two subcomponents that allow the addition of either an icon or typography to the avatar component. - -### Icon - -An icon to use on the avatar. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large		mediumDefines the size of the icon.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -### Typography - -The typography to use on the avatar. - -For further details, see the *Typography* component. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to display in the text field.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string		inheritDefines the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string		inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.
- -For more detail on the _Avatar_ component, see the [MUI developer docs](https://mui.com/material-ui/api/avatar/). diff --git a/docs/projects/frontend/app-components-other-components-badge.md b/docs/projects/frontend/app-components-other-components-badge.md deleted file mode 100644 index b2abfb8..0000000 --- a/docs/projects/frontend/app-components-other-components-badge.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 'app-components-other-components-badge' -sidebar_label: 'Badge' -redirect_from: '/frontend/app-components/other-components/badge' -slug: '/projects/frontend/app-components/other-components/badge' ---- - -# Badge - -The _Badge_ component is a visual element that adds a badge to the top right of a child component, such as an icon. - -### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
badgeContentnumberThe badge counter value.
showZeroboolfalseIf true, the badge counter displays a zero value.
invisibleboolflaseIf true, the badge is hidden.
maximumnumber99The maximum counter value to display.
- -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
variantdot
standard
string		standardSpecifies the type of variant to display.
colordefault
primary
secondary
error
info
success
warning
string		defaultDefines the color of the badge.
overlapcircular
rectangular		rectangularDefines the wrapped shape the badge should overlap.
anchorOriginHorizontalleft
right		rightThe horizontal anchor position of the badge.
anchorOriginVerticaltop
bottom		topThe vertical anchor position of the badge.
- -## Subcomponents - -The _Badge_ component requires an icon child subcomponent. - -### Icon - -Defines an _Icon_ component used to support the badge component. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large		mediumDefines the size of the icon.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Badge_ component, see the [MUI developer docs](https://mui.com/material-ui/api/badge/). diff --git a/docs/projects/frontend/app-components-other-components-breadcrumbs.md b/docs/projects/frontend/app-components-other-components-breadcrumbs.md deleted file mode 100644 index 047b5b1..0000000 --- a/docs/projects/frontend/app-components-other-components-breadcrumbs.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 'app-components-other-components-breadcrumbs' -sidebar_label: 'Breadcrumbs' -redirect_from: '/frontend/app-components/other-components/breadcrumbs' -slug: '/projects/frontend/app-components/other-components/breadcrumbs' ---- - -# Breadcrumbs - -The _Breadcrumbs_ component displays a list of links that help the user visualize a page's location within the structure of a website and allows navigation to any page within the list. The component uses either _Typography_ or _Link_ components to create the location list. - -### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
separatornodeOpens the typography subcomponent used to define the separator for the breadcrumbs.
maxItemsinteger8Specifies the maximum number of breadcrumbs to display. The items before collapse and the items after collapse, will display with an ellipsis between them if the maximum number is exceeded.
itemsBeforeCollapseinteger1If the max items is exceeded, the number of items to show before the ellipsis.
itemsAfterCollapseinteger1If the max items is exceeded, the number of items to show after the ellipsis.
expandTextstringshow pathOverrides the default label for the expand button.
- -## Subcomponents - -The _Breadcrumbs_ component has a _Typography_ subcomponent that allows for a separator character between breadcrumb items. - -### Typography - -Specifies a separator character to separate the breadcrumb items. - -For further details, see the *Typography* component. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to use as a separator character.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string		inheritDefines the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string		inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.
- -For more detail on the _Breadcrumbs_ component, see the [MUI developer docs](https://mui.com/material-ui/api/breadcrumbs/). diff --git a/docs/projects/frontend/app-components-other-components-chip.md b/docs/projects/frontend/app-components-other-components-chip.md deleted file mode 100644 index 2a36a19..0000000 --- a/docs/projects/frontend/app-components-other-components-chip.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: 'app-components-other-components-chip' -sidebar_label: 'Chip' -redirect_from: '/frontend/app-components/other-components/chip' -slug: '/projects/frontend/app-components/other-components/chip' ---- - -# Chip - -The _Chip_ component represents an input, attribute or action. It allows the user to enter information, make selections, filter content or trigger actions. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
labelnodeDefines the text label for the chip.
clickableboolfalseIf true, the chip appears clickable and will raise when pressed.
disabledboolfalseIf true, the chip is disabled.
- -### Style Attributes - - - - - - - - - -
NameTypeDefaultDescription
variantfilled
outlined
string		filledDefines the display type to use.
sizesmall
medium
string		mediumDefines the size of the chip.
- -For more detail on the _Chip_ component, see the [MUI developer docs](https://mui.com/material-ui/api/chip/). diff --git a/docs/projects/frontend/app-components-other-components-divider.md b/docs/projects/frontend/app-components-other-components-divider.md deleted file mode 100644 index 8cb4b80..0000000 --- a/docs/projects/frontend/app-components-other-components-divider.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 'app-components-other-components-divider' -sidebar_label: 'Divider' -redirect_from: '/frontend/app-components/other-components/divider' -slug: '/projects/frontend/app-components/other-components/divider' ---- - -# Divider - -The _Divider_ component is a thin line that separates content areas. - -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
variantfull width
inset
middle
string		full widthDefines the display type to use.
orientationhorizontal
vertical
string		horizontalSpecifies the orientation of the divider.
absoluteboolfalseIf true, the divider will have absolute positioning.
flexItemboolfalseIf true, a vertical divider will have the correct height when used inside a flex container.
lightboolfalseIf true, the divider will have a lighter color.
- -For more detail on the _Divider_ component, see the [MUI developer docs](https://mui.com/material-ui/api/divider/). diff --git a/docs/projects/frontend/app-components-other-components-heading.md b/docs/projects/frontend/app-components-other-components-heading.md deleted file mode 100644 index 377057e..0000000 --- a/docs/projects/frontend/app-components-other-components-heading.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: 'app-components-other-components-heading' -sidebar_label: 'Heading' -redirect_from: '/frontend/app-components/other-components/heading' -slug: '/projects/frontend/app-components/other-components/heading' ---- - -# Heading - -The _Heading_ component allows the placement of a heading on a page. - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text within the heading.
tagh1
h2
h3
h4
h5
h6
div
span
p
string		h6Defines the html tag to use for the heading.
- -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
varianth1
h2
h3
h4
h5
h6
string		h6Specifies the type of heading to display.
fontColorinitial
inherit
primary
secondary
text primary
text secondary
error
string		initialDefines the font color of the heading.
aligninherit
left
center
right
justify
string		inheritDefines the alignment of the heading.
gutterBottomboolfalseIf true, adds a gutter to the bottom of the heading.
noWrapboolfalseIf true, prevents the heading from wrapping.
diff --git a/docs/projects/frontend/app-components-other-components-icon-button.md b/docs/projects/frontend/app-components-other-components-icon-button.md deleted file mode 100644 index 0b1a4b6..0000000 --- a/docs/projects/frontend/app-components-other-components-icon-button.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 'app-components-other-components-icon-button' -sidebar_label: 'Icon Button' -redirect_from: '/frontend/app-components/other-components/icon-button' -slug: '/projects/frontend/app-components/other-components/icon-button' ---- - -# Icon Button - -The _Icon Button_ component is a button represented as an icon. It functions the same way as the button component. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
typebutton
reset
submit		buttonSpecifies the type of icon button.
disabledboolfalseIf true, the icon button is disabled.
hrefstringA URL to navigate to after pressing the icon button.
- -### Style Attributes - - - - - - - - - - - - - -
NameTypeDefaultDescription
fontColordefault
inherit
primary
secondary
string		defaultDefines the font color of the icon button.
sizesmall
medium
large
mediumDefines the size of the icon button.
fullWidthboolfalseIf true, the icon button takes up the full width of its container.
disableElevationboolfalseIf true, the icon button will sit flat on the background surface.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf true, the ripple effect is disabled.
- -## Subcomponents - -The _Icon Button_ component has one subcomponent that uses an icon as a button face. - -### Icon - -The _Icon_ component allows the user to select an icon to place on the icon button. - -For further details, see the *Icon* component. - -#### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large
string		smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
diff --git a/docs/projects/frontend/app-components-other-components-icon.md b/docs/projects/frontend/app-components-other-components-icon.md deleted file mode 100644 index cdf8979..0000000 --- a/docs/projects/frontend/app-components-other-components-icon.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 'app-components-other-components-icon' -sidebar_label: 'Icon' -redirect_from: '/frontend/app-components/other-components/icon' -slug: '/projects/frontend/app-components/other-components/icon' ---- - -# Icon - -The _Icon_ component allows an icon on a page or as an adornment on other components. - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
iconnodehelp iconSpecifies the icon image.
customIconLinkstringProvides a link to a custom icon, which will override the default icon.
- -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string		inheritDefines the color of the icon.
sizeinherit
small
medium
large		mediumDefines the size of the icon.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5		The fill color of the icon.
strokehex #ffffff
rgb 5,5,5		The stroke color of the icon.
- -For more detail on the _Icon_ component, see the [MUI developer docs](https://mui.com/material-ui/api/icon/). diff --git a/docs/projects/frontend/app-components-other-components-image.md b/docs/projects/frontend/app-components-other-components-image.md deleted file mode 100644 index 624ddef..0000000 --- a/docs/projects/frontend/app-components-other-components-image.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: 'app-components-other-components-image' -sidebar_label: 'Image' -redirect_from: '/frontend/app-components/other-components/image' -slug: '/projects/frontend/app-components/other-components/image' ---- - -# Image - -The _Image_ component allows an image to be placed on a page. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
sourcestringSpecifies the path to the image.
altTextstringSpecifies the alt text attribute for the image.
sourceSetstringSpecifies the srcSet attribute for the image.
diff --git a/docs/projects/frontend/app-components-other-components-link.md b/docs/projects/frontend/app-components-other-components-link.md deleted file mode 100644 index c61ff16..0000000 --- a/docs/projects/frontend/app-components-other-components-link.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 'app-components-other-components-link' -sidebar_label: 'Link' -redirect_from: '/frontend/app-components/other-components/link' -slug: '/projects/frontend/app-components/other-components/link' ---- - -# Link - -The _Link_ component provides a link to either a document or a location. - -### Properties - - - - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to use as a link.
absoluteboolfalseIf true, enables the href and target properties and disables the to property.
tostringSpecifies the document to link to.
hrefstringSpecifies the URL to link to.
target_blank
_self
string		Sets the window target.
- -#### Style Attributes - - - - - - - - - - -
NameTypeDefaultDescription
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
srOnly
inherit
string		inheritSpecifies the display type to use.
underlinenone
hover
always
string		noneSpecifies whether the link is underlined.
fontColordefault
inherit
primary
secondary
string		primaryDefines the font color of the link.
- -For more detail on the _Link_ component, see the [MUI developer docs](https://mui.com/material-ui/api/link/). diff --git a/docs/projects/frontend/app-components-other-components-list-item.md b/docs/projects/frontend/app-components-other-components-list-item.md deleted file mode 100644 index edd4788..0000000 --- a/docs/projects/frontend/app-components-other-components-list-item.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 'app-components-other-components-list-item' -sidebar_label: 'List Item' -redirect_from: '/frontend/app-components/other-components/list-item' -slug: '/projects/frontend/app-components/other-components/list-item' ---- - -# List Item - -The _List Item_ component is a text-based item contained within a list. - -### Properties - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
textstringSpecifies the text for the list item.
buttonboolfalseIf true, the list item is a button and enables the selected and disabled properties.
selectedboolfalseIf true, a selected style is applied to the list item.
disabledboolfalseIf true, the list item is disabled.
tooltipTitlestringDefines a tooltip for the list item.
tooltipPlacementbottom-end
bottom-start
bottom
left-end
left-start
left
right-end
right-start
right
top-end
top-start
top
string		bottomDefines the placement of the tooltip on the list item.
loopDataarrayDefines an array of options in the format id, label, value. The id must be is small letters.
itemNamestringDefines a unique identifier name for each menu item.
- -You do not need to add a *Looper* component to a *List* to create list items dynamically. Each *List Item* has a built-in looper, called a Loop, that allows you to create list items dynamically. - -The **Add Left Component** allows the placement of an _icon_, _badge_, _chip_ or _container_ to the left-hand side of a list item. - -### Style Attributes - - - - - - - - - - - -
NameTypeDefaultDescription
alignItemscenter
flex-start		centerDefines the alignment applied to the list item.
denseboolfalseIf true, compact vertical padding is used for the list item.
disableGuttersboolfalseIf true, removes the gutter on the left-hand side of the list item.
dividerboolfalseIf true, adds a line beneath the list item.
- -For more detail on the _List Item_ component, see the [MUI developer docs](https://mui.com/material-ui/api/list-item/). diff --git a/docs/projects/frontend/app-components-other-components-list.md b/docs/projects/frontend/app-components-other-components-list.md deleted file mode 100644 index ac5abd5..0000000 --- a/docs/projects/frontend/app-components-other-components-list.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 'app-components-other-components-list' -sidebar_label: 'List' -redirect_from: '/frontend/app-components/other-components/list' -slug: '/projects/frontend/app-components/other-components/list' ---- - -# List - -The _List_ component is a continuous vertical index of text or images. The _List_ component uses _List Item_ or _Nav-List Item_ components to create a list. - -### Style Attributes - - - - - - - - - -
NameTypeDefaultDescription
denseboolfalseIf true, compact vertical padding is used for the list and list items.
disablePaddingboolfalseIf true, the vertical padding is removed from the list.
- -## Subcomponents - -The _List_ component has two possible subcomponents, the _List Item_ and the _Nav-List Item_. - -### List Item - -A text-based item for a list. - -For further details, see the *List Item* component. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringThe text for the list item.
buttonboolfalseIf true, the list item is a button and enables the selected and disabled properties.
selectedboolfalseIf true, a selected style is applied to the list item.
disabledboolfalseIf true, the list item is disabled.
- -### Nav-List Item - -A navigational element within a list. - -For further details, see the *Nav-List Item* component. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringThe text for the nav list item.
pathstringThe navigational path for the nav list item.
exactboolfalseIf true, the active style will be applied if the location is matched exactly.
disabledboolfalseIf true, the nav list item is disabled.
- -The **Add Left Component** allows the placement of an _icon_, _badge_, _chip_ or _container_ to the left-hand side of a list item or nav-list item. - -For more detail on the _List_ component, see the [MUI developer docs](https://mui.com/material-ui/api/list/). diff --git a/docs/projects/frontend/app-components-other-components-nav-list-item.md b/docs/projects/frontend/app-components-other-components-nav-list-item.md deleted file mode 100644 index 78c86f4..0000000 --- a/docs/projects/frontend/app-components-other-components-nav-list-item.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 'app-components-other-components-nav-list-item' -sidebar_label: 'Nav List Item' -redirect_from: '/frontend/app-components/other-components/nav-list-item' -slug: '/projects/frontend/app-components/other-components/nav-list-item' ---- - -# Nav List Item - -The _Nav List_ component is a navigational element contained within a list. - -### Properties - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
textstringSpecifies the text for the nav list item.
pathstringSpecifies the navigational path for the nav list item.
exactboolfalseIf true, the active style will be applied if the location is matched exactly.
disabledboolfalseIf true, the nav list item is disabled.
tooltipTitlestringDefines a tooltip for the nav list item.
tooltipPlacementbottom-end
bottom-start
bottom
left-end
left-start
left
right-end
right-start
right
top-end
top-start
top
string		bottomDefines the placement of the tooltip on the nav list item.
loopDataarrayDefines an array of options in the format id, label, value. The id must be is small letters.
itemNamestringDefines a unique identifier name for each menu item.
- -The **Add Left Component** allows the placement of an _icon_, _badge_, _chip_ or _container_ to the left-hand side of a nav list item. - -### Style Attributes - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
alignItemscenter
flex-start		centerThe alignment applied to the nav list item.
denseboolfalseIf true, compact vertical padding is used for the nav list item.
disableGuttersboolfalseIf true, removes the gutter on the left-hand side of the nav list item.
dividerboolfalseIf true, adds a line beneath the nav list item.
backgroundColorhex#666666
rgb 5,5,5		Defines the background color.
textColorhex#666666
rgb 5,5,5		Defines the text color.
iconColorhex#666666
rgb 5,5,5		Defines the icon color if the nav list item has an attached icon.
selectedBackgroundColorhex#666666
rgb 5,5,5		Defines the background color if the nav list item is selected.
selectedTextColorhex#666666
rgb 5,5,5		Defines the text color if the nav list item is selected.
selectedIconColorhex#666666
rgb 5,5,5		Defines the icon color if the nav list item has an attached icon and is selected.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf true, the ripple effect is disabled.
diff --git a/docs/projects/frontend/app-components-other-components-table.md b/docs/projects/frontend/app-components-other-components-table.md deleted file mode 100644 index 3a1a900..0000000 --- a/docs/projects/frontend/app-components-other-components-table.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 'app-components-other-components-table' -sidebar_label: 'Table' -redirect_from: '/frontend/app-components/other-components/table' -slug: '/projects/frontend/app-components/other-components/table' ---- - -# Table - -The _Table_ component displays data in a table format on a page. - -Adding a new *Table* component to your page creates a default set of columns. The columns are generated based on the array in the *Data* field on the *Properties* pane. - -Each object in the array represents a **row** in a *Table*, and the **properties** in the object represent the **columns** in a *Table*. - -Each object's **id** property is a *primary key*, which is required for the column to display in a *Table*. - -The following is an example of an object's appearance in a data array. - -~~~ js -{ -"id": 1, -"lastName": "Snow", -"firstName": "Jon", -"age": 35, -"birthday": "1975-03-12", -"balance": 186  -} -~~~ - -You can modify your columns by editing the array in the Data field. Any changes made will not take effect until you click the "Auto Generate Columns" button, which deletes the old columns and creates your new columns. - -If you scroll down in the *Properties* pane to the *Columns* section, you can see the list of columns that were autogenerated when you added the *Table* component to your page. - -Each column has its own properties that you can customize by clicking the *gear* icon to the right of the column name, which opens a *Settings* panel. - -**Important Column Properties** - -- Key - this is a code level name used for the column. -- Name - the column name that displays in the table. -- Format - this allows you to define the type of data in the column. - - USD - currency symbol - - URL link - a web link - - Drop down - a drop down menu - -  - -> [!NOTE] Example: How to render pictures in a Table -> Let's create a small example to see how rendering images in a *Table* works. -> -> 1. Drag a *Table* component onto a *Page* in your Frontend project. -> 2. Click the expand arrow on the *Data* field to open the code panel. -> 3. Delete all the objects in the array except for two. -> 4. Modify the objects so they have **id**, **gallery**, and **photo** columns. -> 5. Add a name for each **gallery** and a link for each **photo**. -> 6. Each object should look something like this: `{"id":1,"gallery":"Henry Art","photo":"https://henryart.org/_images/img/_largeImage/230331_henry_art_gallery_175.jpg"}` -> 7. Click "Auto Generate Columns" to delete the old columns and create new ones. -> 8. Scroll down to the *Columns* section in the *Properties* pane, and click the *gear* icon next to the Photo column name to open the *Settings* panel. -> 9. Click the "Add Render Cell" button and choose **Container** in the drop-down, which creates a container to hold your image within the column. -> 10. Close the pop-up window and *Settings* panel. -> 11. Click the arrow to the left of the table name in the *Properties* pane, which opens the *Components* pane. -> 12. Enter the word "image" in the *Search* box and drag an *Image* component onto the *Container* within the Photo column. -> 13. The *Image* component should be selected in the table. -> 14. In the *Properties* pane, enter `{{item.photo}}` in the **Source** field. You should now see the images in the table. -> -> Under the *Container* is a *Looper* component that accesses each object's "photo" key in the array. The render cell option allows each "photo" to display as an image within the column. - -  - -### Properties - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
dataarrayDefines the data for the table in the format column name, column value. The array may use static or dynamic data, must have an id field for each array element, and the id must be lowercase.
autoGenerateColumnsThe table will populate based on what is in the data field.
rowCountintegerSpecifies the total number of rows in the table.
loadingboolfalseIf true, displays a loading animation.
columnsAddItemAdds a new column to the table. (See column settings).
rowsPerPageinteger5Defines the number of table rows to display per page.
rowsPerPageOptionsarrayDefines an array of options for the rows per page selection.
hideFooterboolfalseIf true, hides the footer at the bottom of the table.
hideFooterPaginationboolfalseIf true, hides the pagination information in the footer.
hideFooterSelectedRowCountboolfalseIf true, hides the selected row counter in the footer.
checkboxSelectionboolfalseIf true, adds a column of checkboxes to the table.
disableSelectionOnClickboolfalseIf true, disables clicking on a column to select it.
disableColumnSelectorboolfalseIf true, disables access to the column selector to show or hide columns.
- -**Column Settings** -Clicking on the gear on the right-hand side of a column brings up the settings panel for the column. - - - - - - - - - - - - - - -
NameTypeDefaultDescription
keystringSpecifies a unique key for the column.
namestringSpecifies a unique name for the column.
hideboolfalseIf true, hides the column in the table.
widthintegerSpecifies the width of each cell in the column.
transformDefines a transformation on the column.
addRenderCelltext
link
container
node		Specifies the component to render the cell content.
formattext
usd
usd(cents)
boolean
date
dateTime
float
integer
percent
url
button
checkbox
datePicker
dropDown
modal
object
radioButton
textInput
string		Defines the data type in the column.
- -### Style Attributes - - - - - - - - - - - -
NameTypeDefaultDescription
showRightCellBorderboolfalseIf true, displays the right-hand border on all cells except those in the last column.
showColumnRightBorderboolfalse
showTableBorderboolfalseIf true, displays the table border.
rowHeightintegerDefines the height of the table rows.
- -## Subcomponents - -The _Table_ component has three possible subcomponents _Text_, _Link_, or _Container_ used to render the cell data within the table. - -### Text - -The _Text_ component creates a text value for another component. - -For further details, see the *Text* component. - -#### Properties - - - - - - - - -
NameTypeDefaultDescription
textstringSpecifies a text value for the multiselect item.
- -### Link - -The _Link_ component provides a link to either a document or a location. - -For further details, see the *Link* component. - -### Properties - - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to use as a link.
absoluteboolfalseIf true, enables the href and target properties and disables the to property.
tostringSpecifies the document to link to.
- -### Container - -Defines the margin and padding around a multiselect item. - -For further details, see the *Container* component. diff --git a/docs/projects/frontend/app-components-other-components-text.md b/docs/projects/frontend/app-components-other-components-text.md deleted file mode 100644 index bbb7907..0000000 --- a/docs/projects/frontend/app-components-other-components-text.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 'app-components-other-components-text' -sidebar_label: 'Text' -redirect_from: '/frontend/app-components/other-components/text' -slug: '/projects/frontend/app-components/other-components/text' ---- - -# Text - -The _Text_ component is unique in that it provides a **Rich Text Editor** (RTE) that allows the user to style text. - -The RTE has the following features. - -- B - bold text -- I - italic text -- Unordered list - create an unordered list -- Ordered list - create an ordered list -- Quotes - add quotes -- Link - add a link -- Undo - undo the previous change -- Redo - redo the previous change - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
stylenormal
heading1
heading2
heading3
heading4
heading5
heading6
string		normalDefines the style of the text within the RTE container.
textstringDefines the text within the RTE container.
diff --git a/docs/projects/frontend/app-components-other-components-tooltip.md b/docs/projects/frontend/app-components-other-components-tooltip.md deleted file mode 100644 index e243024..0000000 --- a/docs/projects/frontend/app-components-other-components-tooltip.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 'app-components-other-components-tooltip' -sidebar_label: 'Tooltip' -redirect_from: '/frontend/app-components/other-components/tooltip' -slug: '/projects/frontend/app-components/other-components/tooltip' ---- - -# Tooltip - -The _Tooltip_ component displays informative text when a user hovers over, focuses on, or taps an element. - -### Properties - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
titlenodeOpens the typography subcomponent used to define the text for the tooltip.
openboolfalseIf true, the tooltip component is shown.
disableInteractiveboolfalseIf true, the tooltip is non-interactive.
disableFocusListenerboolfalseIf true, will not respond to focus events.
disableHoverListenerboolfalseIf true, will not respond to hover events.
disableTouchListenerboolfalseIf true, will not respond to long press touch events.
enterDelaynumber100Defines the number of milliseconds to wait before showing the tooltip.
enterNextDelaynumber0Defines the number of milliseconds to wait before showing the tooltip when one was recently opened.
enterTouchDelaynumber700Defines the number of milliseconds a user must touch an element before the tooltip is shown.
leaveDelaynumber0Defines the number of milliseconds to wait before hiding the tooltip.
leaveTouchDelaynumber1500Defines the number of milliseconds after a user stops touching an element before hiding the tooltip.
- -### Style Attributes - - - - - - - - - -
NameTypeDefaultDescription
placementbottom-end
bottom-start
bottom
left-end
left-start
left
right-end
right-start
right
top-end
top-start
top
string		bottomDefines the placement of the tooltip.
arrowboolfalseIf true, adds an arrow to the tooltip.
- -## Subcomponents - -The _Tooltip_ component has two typography subcomponents used to create text for a typography element and the tooltip text. - -### Typography - -Specifies text for the typography element and the tooltip. - -For further details, see the *Typography* component. - -#### Properties - - - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to use.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string		inheritDefines the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string		inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.
- -For more detail on the _Tooltip_ component, see the [MUI developer docs](https://mui.com/material-ui/api/tooltip/). diff --git a/docs/projects/frontend/app-components-other-components-typography.md b/docs/projects/frontend/app-components-other-components-typography.md deleted file mode 100644 index b5e80ae..0000000 --- a/docs/projects/frontend/app-components-other-components-typography.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 'app-components-other-components-typography' -sidebar_label: 'Typography' -redirect_from: '/frontend/app-components/other-components/typography' -slug: '/projects/frontend/app-components/other-components/typography' ---- - -# Typography - -The _Typography_ component allows the placement of text elements within a page or other components. - -### Properties - - - - - - - - - -
NameTypeDefaultDescription
textstringDefines the text to display.
paragraphboolfalseIf true, the element will be a paragraph element.
- -### Style Attributes - - - - - - - - - - - - -
NameTypeDefaultDescription
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string		inheritDefines the type of typography to display.
aligninherit
left
center
justify
string		inheritSpecifies the text alignment.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string		inheritDefines the color of the typography.
noWrapboolfalseIf true, the text will be truncated and display a text overflow ellipsis.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.
- -For more detail on the _Typography_ component, see the [MUI developer docs](https://mui.com/material-ui/api/typography/). diff --git a/docs/projects/frontend/app-components-other-components.md b/docs/projects/frontend/app-components-other-components.md deleted file mode 100644 index 10c116c..0000000 --- a/docs/projects/frontend/app-components-other-components.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 'app-components-other-components' -sidebar_label: 'Other Components' -slug: '/projects/frontend/app-components/other-components' ---- - -# Other Components - -The following components add stylish UI elements, such as icons, avatars, lists, and tables. - -- [Accordion](projects/frontend/app-components-other-components-accordion.md) -- [Alert](projects/frontend/app-components-other-components-alert.md) -- [Avatar](projects/frontend/app-components-other-components-avatar.md) -- [Badge](projects/frontend/app-components-other-components-badge.md) -- [Breadcrumbs](projects/frontend/app-components-other-components-breadcrumbs.md) -- [Chip](projects/frontend/app-components-other-components-chip.md) -- [Divider](projects/frontend/app-components-other-components-divider.md) -- [Heading](projects/frontend/app-components-other-components-heading.md) -- [Icon](projects/frontend/app-components-other-components-icon.md) -- [Icon Button](projects/frontend/app-components-other-components-icon-button.md) -- [Image](projects/frontend/app-components-other-components-image.md) -- [Link](projects/frontend/app-components-other-components-link.md) -- [List](projects/frontend/app-components-other-components-list.md) -- [List Item](projects/frontend/app-components-other-components-list-item.md) -- [Nav List Item](projects/frontend/app-components-other-components-nav-list-item.md) -- [Table](projects/frontend/app-components-other-components-table.md) -- [Text](projects/frontend/app-components-other-components-text.md) -- [Tooltip](projects/frontend/app-components-other-components-tooltip.md) -- [Typography](projects/frontend/app-components-other-components-typography.md) diff --git a/docs/projects/frontend/app-components-setting-event-listeners-on-components.md b/docs/projects/frontend/app-components-setting-event-listeners-on-components.md deleted file mode 100644 index abbbaa3..0000000 --- a/docs/projects/frontend/app-components-setting-event-listeners-on-components.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 'app-components-setting-event-listeners-on-components' -sidebar_label: 'Setting Event Listeners on Components' -redirect_from: '/frontend/app-components/setting-event-listeners-on-components' -slug: '/projects/frontend/app-components/setting-event-listeners-on-components' ---- - -# Setting Event Listeners on Components - -This article describes how developers can set Event Listeners on their Components when working in App Builder. - ---- - -![App Builder's Component Events](./_images/ab-component-settings-events-1.png) - -Events (event listeners) allow developers to specify functions, requests, scripts, or other actions that will be called automatically when a user interacts with a UI element. This allows developers to run their own actions in response to events triggered by the user. - -## Global Default Events - -App Builder lets developers set event listeners on Components in the **Events** section of the Component's **Settings** (see screenshot above). Every component allows for the following event listeners to be set: - -• **On Click** - Triggered when the user clicks on the element. - -• **On Mouse Over** - Triggered when the user's mouse enters the element. - -• **On Mouse Out** - Triggered when the user's mouse leaves the element. - -• **On Mouse Down** - Triggered when the user presses down on the element. - -• **On Mouse Up** - Triggered when the user releases the element. - -• **On Mouse Enter** - Triggered when the user's mouse enters the over the element. - -• **On Mouse Leave** - Triggered when the user's mouse moves off the element. - -• **Mouse Wheel** - Triggered when the user scrolls up or down while the mouse is over an element. - -• **Context** - Triggered when the user right-clicks on an element. - -• **Aux Click** - Triggered when the user middle-clicks on an element. - -## Global Default Input Events - -App Builder also allows for the following input event listeners to be set on Components: - -• **On Change** - Triggered when the value of a form element (input, select, etc) is changed by the user. - -• **Validate** - Triggered when the user attempts to submit a form. - -## Form Block `On Submit` Event - -The **On Submit** event is available for Form Blocks only. This event fires when the user clicks the submit button on a Form Block. - -• **On Submit** - Triggered when the user submits a form. - -## Event Actions - -Every event listener set in App Builder is associated with an Action. An Action is a thing that will happen when the associated event is triggered by a user. - -Actions are set in the same place that Event Listeners are set: in the **Events** section of the Component's **Settings** (see screenshot below). There are currently 4 action types available to choose from. - -• **Navigate** - Go to another Screen or open a URL in the default web browser. - -• **Run Function** - Call a custom JavaScript function. - -• **Run Request** - Run a request. - -• **Run Custom Code** - Run a custom script. diff --git a/docs/projects/frontend/app-components-using-component-property-inputs.md b/docs/projects/frontend/app-components-using-component-property-inputs.md deleted file mode 100644 index b73d2a2..0000000 --- a/docs/projects/frontend/app-components-using-component-property-inputs.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 'app-components-using-component-property-inputs' -sidebar_label: 'Using Component Property Inputs' -redirect_from: '/frontend/app-components/using-component-property-inputs' -slug: '/projects/frontend/app-components/using-component-property-inputs' ---- - -# Using Component Property Inputs - -This article describes how a developer uses component properties when working with App Builder. - ---- - -![App Builder's Component Properties](./_images/ab-component-settings-properties-1.png) - -Every component in App Builder exposes many different properties inputs. Some of these properties are default, such as _id_ or _class_, while others are unique to the component itself. Regardless of the property, all components share some everyday purposes: they accept static or dynamic values that will affect the behavior or data of the component. - -## Global Component Properties - -The first set of properties that all components have are global properties. These inputs apply to every component and include things like _id_, _class_, and _visible_. These properties include: - -• **id** - The name of the component. This name gets displayed in the Page Structure and the accessible State name of the component. - -• **title** - The id of the component. This is the ID attribute value added to the parent element of the component. - -• **name** - The native browser tooltip title value of the component. - -• **class** - The class(es) of the component. This is the class attribute value added to the parent element of the component. - -• **show if** - A dynamic value for whether the component is or isn't displayed on the Canvas (true/false). - -• **draggable** - A dynamic value for whether the component is or isn't draggable (native draggable property). - -• **translate** - A dynamic value for whether the component's text contents should or shouldn't be automatically translated by the browser. - -• **language** - Allows for the setting of the language within a specific component container. - -## Global Input Component Properties - -Components that are _Input_ type components, like _Textbox_ and _Checkbox_, have a few extra global properties. These inputs are: - -• **value** - The initial/default value of the input. - -• **disabled** - A dynamic value for whether the component is or isn't disabled (native disabled property). - -• **required** - A dynamic value for whether the component is or isn't required (native required property). - -• **autocomplete** - A dynamic value for whether the component is or isn't autocomplete (native autocomplete property). - -• **autofocus** - Automatically focus the form control when the page is loaded. - -• **readonly** - A dynamic value for whether the component is or isn't read-only (native read-only property). - -## Handlebars Enabled Inputs - -Nearly all property inputs are handlebars enabled. This means that you can use handlebars expressions to dynamically set the value of a property based on other values in your app or data. - -For example, you may want the value of a _Textbox_ to be set to the value of an item in your app's data object. You would set the _value_ property to `{{ item.name }}` to accomplish this. diff --git a/docs/projects/frontend/app-editor-introduction.md b/docs/projects/frontend/app-editor-introduction.md deleted file mode 100644 index 3423675..0000000 --- a/docs/projects/frontend/app-editor-introduction.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 'app-editor-introduction' -sidebar_label: 'App Editor' -redirect_from: '/frontend/app-editor/introduction' -slug: '/projects/frontend/app-editor/introduction' ---- - -# App Editor - -![App Editor](./_images/ab-editor-header-menu-1.png) - -The App Builder Editor is a powerful tool for creating mobile applications. It offers a visual interface for designing your app and code editors for more advanced customization. In this article, we'll tour the App Builder Editor's anatomy and explore it, so you know how things get organized. - -The App Builder Editor is divided into five main sections: - - • Header Menu - • Page Context Menu - • Settings, Assets, Resources, & Themes - • Page Canvas - • Components Drawer - -## Header Menu - -![Heade menu](./_images/ab-editor-header-2.png) - -The Header Menu is intended for the following features/capabilities: - - • Back/redo button (undo/redo) - • Viewport Selector (Mobile, Desktop, Tablet, etc.) - • Backup Selector and Executor - • Save - • Preview - • Deploy - • Help - • Account Avatar (Logout) - -This area is mainly intended for general project-level actions and utilities during development, like save, undo, and redo. - -## Page Context Menu - -![Page context](./_images/ab-editor-page-context-1.png) - -The Page Context Menu is where you'll find all things relevant to the current page you're working on and some other things. These areas include: - - • Pages List & Settings - • State (Frontend Data) - • Page Structure - • Requests (API Calls) - • Functions (Frontend Logic) - -The default for any of these sections is to show the Local elements. However, these areas can be toggled to display the Global elements in any other state. - -## Settings, Assets, Resources, & Themes - -![Editor app settings](./_images/ab-editor-app-context-1.png) - -The Settings, Assets, Resources, and Themes area is where your most critical project-level settings can be accessed. This area is important for elements that are not specific to a particular page or component but more general and project-wide. Here you'll find in this area are: - - • Theme (Global Styles) - • Assets (Static Assets) - • Resources (Data Sources) - • App Settings - -Each option opens full-page modals for their settings and configurations, except for Assets. - -## Page Canvas - -![Page canvas for Editor](./_images/ab-editor-page-canvas-1.png) - -The Page Canvas is strictly reserved for Components and building screens in a WYSIWYG drag and drop environment. It is the center of attention for most of the development process in App Builder. - -## Components Drawer - -![Component library](./_images/ab-editor-components-drawer-1.png) - -The Components Drawer is where all available Components are displayed and where a Component Instance gets configured once added to the Page Canvas. - -When no Components are selected, the Component Library will be displayed here, along with a tab for Component Groups. Meanwhile, when a Component is selected, it will render the three configuration tabs: - - • Properties - • Styles - • Events - -![Component settings](./_images/ab-editor-components-drawer-2.png) - -These configuration screens are where you'll spend the most time customizing the components' look, feel, and behavior. - -## Next Steps - -By now, you should understand the App Builder Editor and where to find things. In the next section, we'll take a more in-depth look at each area. diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-components-drawer.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-components-drawer.md deleted file mode 100644 index 5d475a2..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-components-drawer.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface-editor-components-drawer' -sidebar_label: 'Editor Components Drawer' -redirect_from: '/frontend/app-editor/understanding-the-app-builder-interface/editor-components-drawer' -slug: '/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-components-drawer' ---- - -# App Editor Components Drawer - -Inside the App Editor, the Component Drawer is where you can access the Component Library and your Component Groups. - -## Using Components - -The Component Library is a collection of all the Components you can drag and drop onto the Page Canvas to build your app. App Builder provides the most common components, such as inputs, containers, cards, etc. - -## Creating Component Groups - -!(How to create a group in App Builder)[./_images/ab-component-library-groups-1.png] - -Component Groups are a way to save a reusable grouping of Components, so they're easy to find and reuse. For example, you might create a group for a specific type of submission form that you use throughout your app. - -To create a Group, select the outermost parent Component that wraps the Group. This is usually some container. Once selected, make sure that it has an ID property set. You can then click the ellipsis dropdown menu on the highlighted Component and select **Create Group**. - -!(Creating a component group in App Builder)[./_images/ab-component-library-groups-2.png] - -App Builder will automatically give the new Group a name and add it to your Component Groups list. - -Component Groups are only available in the current app you're working on. To use a Component Group in another app, you'll need to create it again. - -## Configuring Components - -Once a Component or Group instance is added to the Page Canvas, you can customize its properties, styles, and event listeners in the right-screen same Component Settings area of the Editor. - -## Component Properties - -![App Builder's Component Properties](./_images/ab-component-settings-properties-1.png) - -You can set Component properties to affect the behavior of a component and its data. For example, you can set the "isLoading" property of a Button component to true to make the button disabled and display a loading spinner instead of the button's label. You can also set properties in the Component Settings area of the Editor. - -Most inputs are Handlebars enabled, meaning that you can write expressions and use functions inside the inputs to determine values. For example, you can get a greeting message on a Text component to be `{{ new Date().getHours() < 12 ? "Good Morning!" : "Good Afternoon!" }}` to dynamically render a time-sensitive (get it) message to your user. - -## Component Styles - -![App Builders Component Styles](./_images/ab-component-settings-styles-1.png) - -You can also use the Styles pane to update the appearance of a Component. For example, you can change the background color, font size, and padding of a Button component. Styles changes will immediately be reflected on the rendered Component so that you can see exactly what your Component will look like before you save any changes. - -App Builder also provides several different ways to customize the look and feel of your Components. You can use the built-in themes or create your custom themes. You can also use the CSS Editor to style your Component's styling pane directly. This gives you full control over how your Component looks and feels. - -## Component Events - -![App Builder's Component Events](./_images/ab-component-settings-events-1.png) - -You can add event listeners to components in the Component Settings area of the Editor. Click on the "+" icon button in the "Events" tab of the Component Settings and select the event you want to trigger an Action on. You can then choose what action to take when that event is triggered. For example, you can navigate to a different page when a button is clicked, or you can run custom Javascript code. - -Adding event listeners is a quick and easy way to add interactivity to your components without writing any – or not too much – code. This makes creating UIs that are interactive and responsive to user input easy. diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-header-menu-tools.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-header-menu-tools.md deleted file mode 100644 index 8682ec9..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-header-menu-tools.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface-editor-header-menu-tools' -sidebar_label: 'Editor Header Menu Tools' -redirect_from: '/frontend/app-editor/understanding-the-app-builder-interface/editor-header-menu-tools' -slug: '/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-header-menu-tools' ---- - -# Editor Header Menu Tools - -![Header menu](./_images/ab-editor-header-2.png) - -When working inside the Editor, the Header Menu area is intended for the following features/capabilities: - -## Back/redo button (undo/redo) - -The back button on the left allows you to undo your last change. The redo button on the right allows you to redo your last change. - -## Viewport Selector (Mobile, Desktop, Tablet, etc.) - -The viewport selector allows you to change what device you're viewing your app on. This is helpful for seeing how your app will look on different devices or screensizes. - -Note that changing the viewport does not isolate the styling changes to that particular device. All changes made in the Editor will apply to all devices unless you use media queries or the element selector to target a specific device! - -You can read more about this in the media query docs (Coming soon...). - -## Backup Selector and Executor - -You are able to make a backup of your app at any time by clicking the "Backup" button. This will create a snapshot of your app as it currently exists so that you can always revert back to it. Using the drop-down selector located next to the backup button, you can choose which backup to revert to. - -## Save - -The "Save" Button simply saves your work. You should use it often! If you don't save your work and reload the page, the app will revert back to your last change and will lose your progress. - -## Preview - -If you want to see your app running in the browser, use the "Preview" button! This will open your app in the browser and display it as you'd expect for users. - -## Deploy - -When you're ready to deploy your app, click on the "Deploy" button located in the top navigation bar of the App Builder editor. This will open a drop-down that shows your deployment history and allows you to click on the second "Deploy" button. Every new deployment is automatically assigned a version number that automatically increments. However, you have the ability to specify. However, you as the developer have the ability to manually specify it. - -![Deploy dropdown](./_images/ab-deploy-dropdown-1.png) - -This will start the process of compiling, building, and deploying your app. All apps are automatically deployed to an S3 bucket. The bucket will be assigned a static URL that is mapped to it. - -![Deploy pending process](./_images/ab-deploy-pending-1.png) - -## Help - -If you need any help or support while using the App Builder, click on the "?" icon in the top navigation bar. This will open a modal with links to our documentation, support site, and feedback form. - -## Account Avatar (Logout) - -The account avatar lets you log out. diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-hidden-canvas.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-hidden-canvas.md deleted file mode 100644 index 67dd275..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-hidden-canvas.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface-editor-hidden-canvas' -sidebar_label: 'Editor Hidden Canvas' -redirect_from: '/frontend/app-editor/understanding-the-app-builder-interface/editor-hidden-canvas' -slug: '/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-hidden-canvas' ---- - -# Editor Hidden Canvas - -The Hidden Canvas area gets used to build your application's "not-seen-by-default" when working inside the Editor (a.k.a, dialog boxes). - -## Accessing the Hidden Canvas - -![Opening the hidden canvas](./_images/ab-editor-hidden-canvas-1.png) - -To open the Hidden Canvas, open the Page Structure modal from the left menu. Using the dropdown under "Page Canvas", select "Hidden Canvas Nodes." - -Thisin will show you a list of all the Hidden Components on your page and allow you to toggle their visibility. By toggling visibility to "on" by clicking the eye icon, you can bring these components into view the Editor. - -## Creating Dialogs - -To create a new dialog, click the "+" icon Hidden Canvas Nodes area of Page Structure. It will be hidden by default, so adding content to your dialog toggle its visibility. - -## Adding Components to Dialogs - -![Adding components to dialog boxes](./_images/ab-editor-hidden-canvas-2.png) - -To add components to a dialog box, drag and drop them into the dialog once it's visible. If you're having trouble, try adding the dragging and dropping the component into the Page Structure. Sometimes, this approach can be more accurate. diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-canvas.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-canvas.md deleted file mode 100644 index c3bcb5a..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-canvas.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface-editor-page-canvas' -sidebar_label: 'Editor Page Canvas' -redirect_from: '/frontend/app-editor/understanding-the-app-builder-interface/editor-page-canvas' -slug: '/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-page-canvas' ---- - -# Editor Page Canvas - -![App Builder Page Canvas](./_images/ab-editor-page-canvas-1.png) - -The Page Canvas area gets used to build your application when working inside the Editor. - -The Page Canvas is a WYSIWYG editor, meaning you can see how your app will look as you build it. To build your user interface, you can drag and drop components onto the Page Canvas. - -![App Builder Page Canvas](./_images/ab-editor-page-canvas-1.png) - -Most often, when developing an App in App Builder, your Pages will be built using a combination of Layouts and Views. - -Most often, when developing an App in App Builder, your Pages will be built using a combination of *Layouts* and *Components*. - -A **Layout** is a reusable container you can use to arrange components on the Page Canvas. App Builder ships with a few different Layout components, such as the **Authenticated** and **Empty**. You can also create custom Layouts. - -### Layouts - -A *Layout* is a reusable container to arrange components on the Page Canvas. The App Builder has a few different Layouts, such as **Authenticated** and **Empty**. You can also create custom layouts. - -### Components - -All this said Layouts and Views are always displayed and updated through the Page Canvas. - -You can find more information about Layouts and Views in the _Components_ in their docs page (Coming soon...) diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-context-menu.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-context-menu.md deleted file mode 100644 index 3b22efa..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-context-menu.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface-editor-page-context-menu' -sidebar_label: 'Editor Page Context menu' -redirect_from: '/frontend/app-editor/understanding-the-app-builder-interface/editor-page-context-menu' -slug: '/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-page-context-menu' ---- - -# Page Context Menu - -![Page context](./_images/ab-editor-page-context-1.png) - -The Page Context Menu is where you'll find all things relevant to the current page you're working on and some other things. - -## Pages - -The Pages tab is where you can add, delete, and reorder the pages in your app. You can also access page settings from here. - -!["Page context"](./_images/ab-editor-page-context-2.png) - -Any page settings are accessed by clicking on the gear icon to the right of the page name. This will open a side panel with the page settings, where you can update and delete pages. - -## State (Frontend Data) - -The State tab is where you can manage your app's frontend data. This is where you access, add, edit, and delete states. - -!["Page context"](./_images/ab-editor-page-context-3.png) - -For any element in App Builder, its local or global state can be accessed by opening the state pane and finding the element's name under its category group (i.e., Resource, Request, Component). - -Note that only "Custom Entries" can be edited. States for other elements other than Custom Entries can only be viewed and accessed. - -## Page Structure - -![Using the page structure in App Builder](./_images/ab-page-structure-1.png) - -The Page Structure pane shows the hierarchy of components in a list. You can use this pane to re-organize the hierarchy of a page. This is useful if you want to change the order in which components are rendered on the page or find nested components and containers that may be visually hard to find in the application visually. - -Drag and drop a component from the Page Structure pane onto the canvas to use this feature. Conversely, you can also drag and drop components from the canvas into the Page Structure. This will change the parent-child relationship of the components and update the page accordingly. - -## Requests (API Calls) - -Requests are where you create and manage the API calls for your app. This is where you access, add, edit, and delete requests. - -![Request Modal](./_images/ab-resources-requests-1.png) - -To create an API request, click on the "+" button in the top-right corner of the Request modal. - -In the Request create form, you can select which Resource you want to request and the different settings for that Request. The input variables, headers, and operation type can all be set. These options will vary based on the type of data source you're sending the Request to (e.g., GraphQL, REST, 8base Backend). - -![Requesting the Request Modal](./_images/ab-resources-request-2.png) - -After you've made your Request, you'll see the response. The data also gets stored in the State pane, making it accessible by components and other parts of your app. - ---- - -## Functions (Frontend Logic) - -Functions in App Builder allow you to author and use Javascript functions locally and globally within your frontend app. They can be invoked from other parts of your app - for example, a button or an API call. - -![App Builder functions](./_images/ab-page-context-functions-1.png) - -Functions are found in the Page Context Menu under the 'Functions' tab. To create your first function, click the '+' button. A modal will appear where you can name your function, configure its settings, and begin writing code. - -## Global vs. Local Elements - -The default for any of these sections is to show the Local elements. This means that while a Local element can only be used on the page where it was created, a Global element can be used throughout your app - on every page. - -!['Global vs Local'](./_images/ab-page-context-globalvslocal-1.png) diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-settings-and-global-shortcuts.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-settings-and-global-shortcuts.md deleted file mode 100644 index c996067..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface-editor-settings-and-global-shortcuts.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface-editor-settings-and-global-shortcuts' -sidebar_label: 'Editor Settings and Global Context' -redirect_from: '/frontend/app-editor/understanding-the-app-builder-interface/editor-settings-and-global-shortcuts' -slug: '/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-settings-and-global-shortcuts' ---- - -# Editor Settings and Global Context - -![Editor app settings](./_images/ab-editor-app-context-1.png) - -The Settings, Assets, Resources, and Themes area is where your most critical project-level settings can be accessed. This area is important for elements that are not specific to a particular page or component but more general and project-wide. - -## Theme (Global Styles) - -![Theme global settings](./_images/ab-global-context-theme-1.png) - -Your application Theme sets the default styling of your application. This includes things like colors, fonts, and component styles. The Theme area is where you can manage all the global styles for your app. - -By default, App Builder provides components that have been built using an implementation of Material UI. Due to this, Material UI is the default Theme CSS Design Framework. However, we'll be rolling out other CSS design frameworks over time. Meanwhile, you can go in and customize the default CSS associated with components and manage styling assets like fonts and media queries. - -## Assets (Static Assets) - -![Global assets in App Builder](./_images/ab-global-context-assets-1.png) - -The Assets tab allows you to upload static images, videos, or document files. These can be used/displayed throughout your app using the relevant components. All document formats are currently supported. - -Note that these files are **deployed with your app bundle.** - -## Resources (Data Sources) - -The Resources tab shows data sources you can send requests from your app to get data to your pages and interact with APIs. Think of each one as an API Client to quickly send requests. We currently support the following types of data sources: - -- **REST API Client**: This allows you to connect to a REST API and get data from it. - -- **GraphQL API Client**: This allows you to connect to a GraphQL API and get data from it. - -- **8base Backend Client**: This allows you to connect to an 8base Backend easily. - -### Configuring an 8base Backend Data Source - -To set up a data source, click on the Resources icon in the left-side menu. It will open a modal that lists all of the available data sources. - -![Resources in App Builder](./_images/ab-resources-1.png) - -8base makes it easy to connect to an 8base Backend. In the "Add a Resource" area, click on any of your 8base Backends listed to set it up as a Resource. This will add it to your Resources list on the left modal area. - -After your 8base Backend is selected, click on it in the list of the available resources. You'll then be able to choose the endpoint and environment (if connecting to a backend that has CI/CD) and set any default headers you want to send with requests. - -![Configuring a resource](./_images/ab-resources-configure-1.png) - -## App Settings - -![App Settings](./_images/ab-global-context-settings-1.png) - -The App Settings tab is where you'll configure general settings for your application that are not specific to any particular page, component, or data source. - -This is where you can configure your app's name, description, 3rd party libraries, and more. Additionally, this is also where you'll be able to manage features like application deployment and global router hooks. - -We'll cover all of this in more detail in upcoming sections. diff --git a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface.md b/docs/projects/frontend/app-editor-understanding-the-app-builder-interface.md deleted file mode 100644 index c762df2..0000000 --- a/docs/projects/frontend/app-editor-understanding-the-app-builder-interface.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: 'app-editor-understanding-the-app-builder-interface' -sidebar_label: 'Understanding The App Builder Interface' -slug: '/projects/frontend/app-editor/app-editor-understanding-the-app-builder-interface' ---- - -# Understanding the App Builder Interface - -Learn about the different menus and canvases in App Builder. - -- [Editor Header Menu Tools](app-editor-understanding-the-app-builder-interface-editor-header-menu-tools.md): The Header Menu is at the top of the interface, and has commands such as save, redo, preview, and deploy. -- [Editor Page Canvas](app-editor-understanding-the-app-builder-interface-editor-page-canvas.md): The Page Canvas is on the right-hand side. This is where you build your user interface. You can drag and drop components onto the canvas. -- [Editor Hidden Canvas](app-editor-understanding-the-app-builder-interface-editor-hidden-canvas.md): The Hidden Canvas area is used to build elements that only appear under certain circumstances, such as error dialog boxes. -- [Editor Components Drawer](app-editor-understanding-the-app-builder-interface-editor-components-drawer.md): The Component Drawer contains the Component Library and your Component Groups. These are the elements you drag onto the Page Canvas. -- [Editor Page Context menu](app-editor-understanding-the-app-builder-interface-editor-page-context-menu.md): The Page Context Menu is on the left, and contains your Pages, Requests, Functions, and more. -- [Editor Settings and Global Context](app-editor-understanding-the-app-builder-interface-editor-settings-and-global-shortcuts.md): Editor settings are on the lower left-hand side. This contains your themes, assets, and data sources. \ No newline at end of file diff --git a/docs/projects/frontend/app-navigation-404-and-error-pages.md b/docs/projects/frontend/app-navigation-404-and-error-pages.md deleted file mode 100644 index 1bfe331..0000000 --- a/docs/projects/frontend/app-navigation-404-and-error-pages.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: 'app-navigation-404-and-error-pages' -sidebar_label: '404 and Error Pages' -redirect_from: '/frontend/app-navigation/404-and-error-pages' -slug: '/projects/frontend/app-navigation/404-and-error-pages' ---- - -# 404 and Error Pages - -This article describes how developers can use 404 and Error Pages. - ---- - -By default, when a user navigates to a page that doesn't exist, they will see a 404 error page. This is because the App Builder does not know where to route the user. In order to fix this, developers need to add 404 and Error Pages to their app. - -App Builder includes a 404 (Not Found Page) and Error Page by default in every project. A developer can style them however they want and add any additional functionality. - -![404 Page](./_images/ab-app-navigation-404-and-error-pages-1.png) - -These pages are no different than any other pages in the app. If you want to create your own error pages, you can create them just like any other page and then navigate to them in the event of an error using `router.navigate.go("/error_page_path")`. - -The 404 page is only special in that it's hard-wired to be displayed when the user navigates to a URL that doesn't exist. For example, if the user navigates to `/about`, but there is no `/about` page in the app, the 404 page will be displayed. - -If you want to change this default behavior, you can intercept the 404 page in its `beforeRouteEnter` hook and redirect the user to another route that you prefer. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-access-states-for-routes.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-access-states-for-routes.md deleted file mode 100644 index ce83c65..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-access-states-for-routes.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-access-states-for-routes' -sidebar_label: 'Access States for Routes' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/access-states-for-routes' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/access-states-for-routes' ---- - -# Accessing States for Routes - -This article describes how developers can access states for routes. - ---- - -In App Builder, the `router` is a global state entry that is provided to every page. This entry allows developers to determine the currently active route, as well as any parameters that were passed to that route. - -![Router state](./_images/ab-app-navigation-create-and-editing-app-pages-access-states-for-routes-1.png) - -This makes it so that you can use the `router` module in any function, request, or custom script. - -To access the `router` state or the state of any named route, you can look in the global namespace of the state management pane. There you will find a state entry for each named route, as well as one for the `currentRoute`: - -```js -// Accessing the path of the current page from the router -var currentPagePath = router.currentRoute.path; -``` - -On this object, all properties, query params, fragment params, and other settings are available as well. - -```js -// Accessing the query params of the current page from the router -var currentPageQueryParams = router.currentRoute.queryString; -``` - -While the examples above show storing a value in a variable, know that the object can also be accessed in Component property inputs and evaluated in handlebar expressions. - -```js -{ - { - router.currentRoute.params.id; - } -} -``` diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events.md deleted file mode 100644 index 31aad29..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events' -sidebar_label: 'Adding Logic to Navigation events' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/adding-logic-to-navigation-events' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/adding-logic-to-navigation-events' ---- - -# Adding Logic to Navigation events - -This article describes how developers add logic to navigation events. - ---- - -Router Hooks allow developers to run Requests, Functions, or Router Function at different points during the routing life-cycle. - -A Router Function is almost like a transform on a Resource Request. However, it provides different arguments to the function for the developer to have access to: - -```js -// ARGS -// **to**: the Route being navigated to with associated state and params. -// **from**: the Route being navigated away from with associated state and params. -// **state**: the state object local state object. -return function ({ from, to, state }) { - // type here -}; -``` - -> NOTE: The Router Function’s return value isn’t considered or evaluated. - -The following Router Hooks are available at both the Global and Local. - -### Global - -Global router hooks get specified in the _Settings > Global Route Hooks_ of and App Builder project. They run on every Route transition unless the Route. - -![Configuring Global Hook](./_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-2.png) - -The available global hooks are: - -- **beforeEach** - runs before any Route is entered. -- **afterEach** - runs after any Route is entered. - -### Local - -Local router hooks get specified in the Page Settings when editing a specific View. They run only when the associated Route is being navigated. - -![Configuring Local Hook](./_images/ab-app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events-1.png) - -The available global hooks are: - -- **beforeRouteEnter** - runs before the Route is entered. -- **beforeRouteUpdate** - runs before the Route is entered. For example, Route /users/:id is changed from /users/20 to /users/83. -- **beforeRouteExitLeave** - runs before the Route is left. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-handling-redirects.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-handling-redirects.md deleted file mode 100644 index 15262e0..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-handling-redirects.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-handling-redirects' -sidebar_label: '- Handling Redirects' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/handling-redirects' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/handling-redirects' ---- - -# - Handling Redirects - -...coming soon. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-how-to-create-layouts.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-how-to-create-layouts.md deleted file mode 100644 index 6de14ff..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-how-to-create-layouts.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-how-to-create-layouts' -sidebar_label: 'How to create Layouts' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/how-to-create-layouts' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/how-to-create-layouts' ---- - -# How to create Layouts - -_Layouts_ are used to create common constructs for use in multiple pages. - -We'll create a small example to demonstrate how to work with layouts. - -![App Builder Layouts Create Layout](./_images/ab-layouts-create-layout.png) - -To create a new layout in the App Builder, click the plus button next to the _Layout_ name in the _Pages_ pane, and a fly-out panel will open. Enter the name of your layout and click "Save". - -The name of your layout appears above the _Pages_ pane and in the upper left corner of your canvas. - -Click on the page icon in the left-hand tool bar; this will collapse the panel and expand the size of your canvas. - -## Working with Layouts - -Working in a layout is almost the same as working on a page, except for _View_ components. A _View_ component tells the application where in your layout to render pages. - -### Adding Components to a Layout - -You can add components to your _Layout_ by dragging them from the right-hand _Components_ menu onto your canvas. - -The right-hand menu is context-sensitive and will switch depending on whether you are working with a _Layout_ or a _Component_. - -![App Builder Layouts Create Component](./_images/ab-layouts-layout-create-component.png) - -Drag a _Container_ component onto the canvas and enter the name "menuContainer" in the field above the components menu. - -Click on the canvas. This will highlight the layout name in blue indicating the layout is selected. - -![App Builder Layouts Set Styles](./_images/ab-layouts-layout-set-styles.png) - -Click on the _Grid_ icon in the _Styles_ menu and enter the following. _Grid Template Columns:_ 20% 80%, _Grid Template Rows:_ none, _Grid Column Gap:_ 15px. - -Click in the left column on the canvas, to select the container component, and set a _Background_ color in the _Styles_ menu. - -Click on the canvas outside the left column to switch the right-hand menu back to the _Components_ menu. - -In the _Search_ type "list", this will display all the list components. - -![App Builder Layouts Add List Component](./_images/ab-layouts-layout-add-list-component.png) - -Drag a _List_ component onto the left-hand column of the canvas. - -![App Builder Layouts Add View Component](./_images/ab-layouts-layout-add-view-component.png) - -Drag a _View_ component onto the empty area of the canvas; this is where your pages will be displayed. _(If your View accidentally ends up on the left side of the canvas, just drag it to the right to reposition it.)_ - -Click on the _Page_ icon in the left-hand tool bar to switch from Layouts to Pages. - -Click on the _Home Page_ item, which will load the page onto the canvas. - -Locate the _Heading_ component under the _Other_ section and drag it onto the canvas. - -![App Builder Layouts Set Page Stles](./_images/ab-layouts-layout-set-page-styles.png) - -In the _Styles_, menu set the _Basic_ Variant to H1. -Click on the _Properties_ tab, and under _Custom Properties_, enter Home in the _Text_ field. - -### Adding a Layout to a Page - -Continuing with our example, we need to set up the Home Page to use a layout. - -![App Builder Layouts Set Page Layout](./_images/ab-layouts-layout-page-set-layout.png) - -Click the _Pages_ icon on the left-hand tool bar, and then click on the _Gear_ icon on the _Home Page_ item. - -In the _Page Settings_ panel under _Page Layout_, select your layout from the Layout drop down, and click "Save". _(Only layouts in your App that have a View component are displayed in this list.)_ - -If you return to the Home Page, the page will now be displayed using your layout. - -### Adding Data to a Layout - -A Layout can access _Data_. More specifically, it can access _Routes_ for the page. - -Click on the _Pages_ icon on the left-hand tool bar and select your Layout to switch to the Layout view. Then click on the _State_ icon, which opens the _State_ panel. - -![App Builder Layouts Page Routes](./_images/ab-layouts-layout-routes.png) - -Under the _Routes_ section, click on the small green arrow next to the "currentRoute" name to see a list of attributes. - -Hover to the right of the "path" attribute, which will display a clipboard icon. Click on the icon to copy the path to the clipboard. - -Click on the _State_ icon to collapse the _State_ panel and return to the Layout view. - -![App Builder Layouts Add Page Route](./_images/ab-layouts-layout-routes-add-route.png) - -Select any _List Item_ and click on the _Properties_ tab in the right-hand menu. In the _Basic_ section, paste the copied "path" attribute into the _Text_ field. Add two brace brackets to the start and end of the "path" attribute. - -![App Builder Layouts Page Path](./_images/ab-layouts-layout-routes-dynamic-path.png) - -The _List Item_ you selected will not display anything in the Layout view, but if you switch to the _Page_ view and select your _Home Page_, you will see the "path" displayed in your menu. - -Click on the _Page_ icon to return to the list, and then click on the _Gear_ icon next to the _Contact_ page; set the _Layout_ to your current layout. - -If you have not yet created a contact page, do that now. - -### Testing a Layout - -Let's add some navigation so we can test the layout. - -Click on the _Page_ icon and select the _Home Page_. In the _Components_ menu, search for "button" and drag a button component onto your page. - -![App Builder Layouts Add Page Navigation](./_images/ab-layouts-layout-page-navigation.png) - -Select the _Button_ component on your page and click on the _Events_ tab in the right-hand menu. Click the plus button to add an event and select an _On Click_ event. - -Click on the _Gear_ icon next to the Action name and select _Navigate_ from the drop-down menu. Enter "/contact" as the path in the _Page_ field. - -To preview the _Home Page_ in a web browser, click on the _Preview_ button in the top tool bar. - -Clicking the _Button_ on the _Home Page_ will take you to the _Contact_ page. Notice the path for the contact page is displayed in the menu. - -### Finishing Up - -A Layout can access global objects like the router to access information within the page, which helps to create the dynamic aspects of your application. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-page-url-settings.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-page-url-settings.md deleted file mode 100644 index d3976fe..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-page-url-settings.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-page-url-settings' -sidebar_label: 'Page URL Settings' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/page-url-settings' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/page-url-settings' ---- - -# App Navigation Page URL Settings - -This document describes how a developer can set and manage Page URLs when working in App Builder. - ---- - -![Page URL Settings](./_images/ab-app-navigation-create-and-editing-app-pages-page-url-settings-1.png) - -Every Page in App Builder requires a unique path at which it can be accessed. This path is known as the Page URL. When you create a new Page in App Builder, it will be given a URL based on its page name. For example, if you create a new Page called "My New Page," its default URL will be "/my-new-page". - -You can customize the URL for any Page in App Builder. Simply navigate to the Page Settings you wish to modify, and update the values set in the "Route" section of its settings. Once done, use the "Save" button to save your changes. - -**Page Name** is solely used for internal purposes. Meanwhile, the **Path** is what defines how the Page will be accessed/referenced. - -## Impact of Changing Existing URLs - -It's important to note that changing a Page URL will break any links that were using the old URL. As such, it's generally recommended that you only update URLs for new Pages or for Pages whose URL needs to be changed for some other reason. - -If you need to change the URL of an existing Page, we recommend that you create a new Page with the desired URL, and then move the content from the old Page to the new one. Once all content has been moved over, you can delete the old Page. - -:::info - -App Builder currently doesn't offer a native redirect capability. If you wish to redirect users from the old URL to the new one, you'll need to use a `beforeRouteEnter` local hook and the `router.navigate('DESTINATION_PATH')` method. -::: - -## Best Practices for URL Management - -When working with App Builder, we recommend following a few best practices for managing Page URLs: - -• Always create new Pages with unique URLs. Do not reuse URLs for different purposes. - -• When renaming an existing Page, update its URL simultaneously to avoid confusion. - -• Use descriptive Page names and URLs. Descriptive names and URLs make it easier for you and other developers to understand the purpose of each Page. - -• Use consistent URL patterns across your app. This makes it easier to remember how to access specific Pages, and also makes your app's structure more predictable. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages.md deleted file mode 100644 index 2384462..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages' -sidebar_label: 'Using Metadata Stored on Pages' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/using-meta-data-stored-on-pages' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/using-meta-data-stored-on-pages' ---- - -# Using Metadata Stored on Pages - -This article describes how developers can use metadata stored on a Page. - ---- - -In App Builder, the `router` is a global state entry provided to every page. On the currently active and all other routes, App Builder includes and makes available any metadata set in the Page Settings. - -![Page metadata state](./_images/ab-app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages-1.png) - -This makes it so that you can access `meta` for the current route in any function, request, or custom script. - -```js -// Accessing the meta of a page from the router -var pageMeta = router[PAGE_NAME || 'currentRoute'].fragments; -``` diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-fragment-parameters.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-fragment-parameters.md deleted file mode 100644 index ab00244..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-fragment-parameters.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-using-url-fragment-parameters' -sidebar_label: 'Using URL Fragment Parameters' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/using-url-fragment-parameters' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/using-url-fragment-parameters' ---- - -# Using URL Fragment Params - -This article describes how developers use URL fragment parameters. - ---- - -In App Builder, the `router` is a global state entry provided to every page. On the currently active route, App Builder parses and makes available any fragment params included in the URL path. - -![Fragment params state](./_images/ab-app-navigation-create-and-editing-app-pages-using-url-fragment-parameters-1.png) - -This makes it so that you can access `fragments` for the current route in any function, request, or custom script. - -```js -// Accessing the fragments of the current page from the router -var urlFragments = router.currentRoute.fragments; -``` diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-parameters.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-parameters.md deleted file mode 100644 index f63bc4f..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-parameters.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-using-url-parameters' -sidebar_label: 'Using URL Parameters' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/using-url-parameters' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/using-url-parameters' ---- - -# Using URL Params - -This document describes how developers can leverage URL parameters in their App Builder projects. - ---- - -![Using URL Params](./_images/ab-app-navigation-creating-and-editing-app-pages-url-settings-1.png) - -Dynamic URL parameters are when a URL's path contains a dynamic value. For example, in the following URL: - -`http://www.example.com/users/123` - -The value "123" would likely be a dynamic URL parameter for a path set to `/users/:id`. This kind of capability can be helpful when creating a single app Page that dynamically loads different data, think profiles for users, articles on a blog, or a specific task in a task management app. - -## Setting a URL Param - -In App Builder, developers can take advantage of dynamic URL parameters by declaring it in a Page's settings using the following notation. - -`/static-param/:dynamic-param` - -For example, in a blog app, you may want to dynamically load an article based on the article ID. In this case, your path for an Article page could look something like `/article/:articleId.` With this setup, when a user navigates to `/article/123`, the URL param `articleId` would be set to the value `123`. - -To access this parameter in your code, you'll be able to find it in the Page's State. - -## Things to Avoid - -When using URL params, there are a few main things to avoid: - -- **Don't use URL parameters for data that isn't dynamic.** This applies mostly when creating nested pages. For example, if you have an app with Pages for `/users` and `/articles`, it would be incorrect to set the path of an `/articles/:articleId` page to something like `/users/:userId/articles/:articleId`. The URL param `userId` in this case would never change because the Page is a child of the `/users` Page. - -- **Don't use URL parameters at the root of a path. ** All dynamic parameters should have a static value in front of them. For example, the following paths `/:pageName` or `/:articleId` are not valid as they would end up being catch-all paths. - -## Summary - -Setting dynamic URL parameters in App Builder is a great way to create single-use pages that can load different data based on the value of a URL param. Keep in mind, however, to use URL parameters thoughtfully as misusing them could lead to issues down the road. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-query-parameters.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-query-parameters.md deleted file mode 100644 index 2747acd..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages-using-url-query-parameters.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages-using-url-query-parameters' -sidebar_label: '- Using URL Query Parameters' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages/using-url-query-parameters' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages/using-url-query-parameters' ---- - -# - Using URL Query Parameters - -...coming soon. diff --git a/docs/projects/frontend/app-navigation-create-and-editing-app-pages.md b/docs/projects/frontend/app-navigation-create-and-editing-app-pages.md deleted file mode 100644 index 6466219..0000000 --- a/docs/projects/frontend/app-navigation-create-and-editing-app-pages.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 'app-navigation-create-and-editing-app-pages' -redirect_from: '/frontend/app-navigation/create-and-editing-app-pages' -slug: '/projects/frontend/app-navigation/create-and-editing-app-pages' ---- - -# Creating, cloning, and editing App Pages - -This article describes how developers can create or clone _Pages_ and edit their _Page Settings_. - ---- - -## Creating Pages - -Assuming you have an App already created in App Builder, to Create a new Page, simply select the "+" button on the _Pages_ pane. - -![Creating page](./_images/ab-app-navigation-create-and-editing-app-pages-1.png) - -Pages have the following properties that can be set: - -• Name: A unique name for the page. This will be used internally by App Builder and is required. - -• Path: The path for the page. This is required and must be unique. - -• HTML Meta Tags: These are HTML Meta tags that will be placed in the `` section of the page. - -• Default Path Parameters: These are parameters that will be set on the page. The format is `ParameterName=DefaultValue`. - -• Route Metadata: This is metadata that will be associated with the page. The format is `MetaKey=MetaValue`. - -• Local Route Hooks: These are functions that will be called when the page is navigated to. The format is `FunctionName(to, from, state)`. - -After you have set all of the properties for the page, simply click the "Save" button to save the page. - -## Cloning Pages - -To Clone an existing _Page_, click the "Clone" button on the top of the Page Settings panel. You will be prompted to confirm you want to clone the page. - -![Cloning page](./_images/ab-app-navigation-create-and-editing-app-pages-3.png) - -A copy of the _Page_ will be created with the same name and the word "Copy" added to the end of the page name. The page will show up in the **Pages** section of the _Pages_ pane. - -![Cloning Copy](./_images/ab-app-navigation-create-and-editing-app-pages-4.png) - -When a _Page_ is cloned the following features are preserved in the cloned page. - -- Page settings -- Components -- Events -- Local states -- Global states -- Custom code - -![Cloned Page](./_images/ab-app-navigation-create-and-editing-app-pages-5.png) - -## Editing Pages - -To Edit an existing _Page_, simply change the values in the Pages Settings panel and click "Save": - -![Editing page](./_images/ab-app-navigation-create-and-editing-app-pages-2.png) diff --git a/docs/projects/frontend/app-navigation-introduction.md b/docs/projects/frontend/app-navigation-introduction.md deleted file mode 100644 index 4ea2998..0000000 --- a/docs/projects/frontend/app-navigation-introduction.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: 'app-navigation-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/app-navigation/introduction' -slug: '/projects/frontend/app-navigation/introduction' ---- - -# App Navigation Introduction - -This document describes at a high level how to think about app navigation when working in App Builder. - ---- - -![App Builder App Navigation Intro](./_images/ab-app-navigation-intro-1.png) - -When working in App Builder, you primarily develop Pages, each of which is assigned a route. For example, a page that displays a User's profile may get given the path "/profile/:userId." When a user navigates to that page, the ":userId" portion of the route will get replaced with the actual User ID. Meanwhile, many navigation events occur during that process. - -As your app grows in complexity, you will likely add many Pages, some of which users only assigned specific roles are allowed to access. The process of a user moving from page to page in an application, and different life-cycle events that occur during that journey, are what we refer to as App Navigation in App Builder. - -There are many different ways to think about app navigation. In the following sections, we will explore some of the various aspects and concepts of app navigation so that you can better understand how it works in App Builder. diff --git a/docs/projects/frontend/application-layouts-adding-nested-layouts.md b/docs/projects/frontend/application-layouts-adding-nested-layouts.md deleted file mode 100644 index 3d50c26..0000000 --- a/docs/projects/frontend/application-layouts-adding-nested-layouts.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'application-layouts-adding-nested-layouts' -sidebar_label: 'Adding nested Layouts' -# redirect_from: '/frontend/application-layouts/adding-nested-layouts' -# slug: '/projects/frontend/application-layouts/adding-nested-layouts' ---- - -# Adding nested Layouts - -...coming soon. diff --git a/docs/projects/frontend/application-layouts-creating-and-editing-layouts.md b/docs/projects/frontend/application-layouts-creating-and-editing-layouts.md deleted file mode 100644 index 1ca4488..0000000 --- a/docs/projects/frontend/application-layouts-creating-and-editing-layouts.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -id: 'application-layouts-creating-and-editing-layouts' -sidebar_label: 'Creating and editing Layouts' -redirect_from: '/frontend/application-layouts/creating-and-editing-layouts' -slug: '/projects/frontend/application-layouts/creating-and-editing-layouts' ---- - -# Creating and editing Layouts -This document describes how a developer can create and edit Layouts in the App Builder. -_____ - -## Introduction -When developing an application in the App Builder, you use *Layouts* and *Components* to build your pages. - -A *Layout* is a reusable container to arrange components on the Page Canvas. The App Builder has a few different Layouts, such as **Authenticated** and **Empty**. You can also create custom layouts. - -A *Component* is a specific functionality you add to your layout or page. The App Builder has numerous pre-built components, such as **Menu**, **Header**, **Table**, **Date Picker**, **Icon**, and **Breadcrumbs**. - -Every page in your application requires a layout. If you want a standard header, footer, and sidebar to appear on multiple pages in your application, you can create this as a layout and then use it on various pages. - -## Working with Layouts -Working on a layout is almost the same as working on a page, except for *View* components. A *View* component tells the application where in your layout to render pages. - -## How to create Layouts -We'll create a small example to demonstrate how to work with layouts. - -Click the _Pages_ icon on the left-hand toolbar to display the *Pages* pane. - -To create a new layout, click the "+" next to the *Layout* name in the *Pages* pane, and a fly-out panel will open. Enter the name of your layout and click "Save". - -![App Builder Layouts Create Layout](./_images/ab-layouts-create-layout.png) - -The App Builder saves your new layout, collapses the *Pages* pane, and expands the size of your canvas. The name of your new layout appears in the upper left corner of your canvas. - -### Adding Components to a Layout -You can add components to your *Layout* by dragging them onto your canvas from the right-hand *Components* pane. - -The right-hand pane is context-sensitive and will switch depending on whether you are working with a *Layout* or a *Component*. - -Drag a *Container* component onto the canvas and enter "menuContainer" in the field above the components pane. - -![App Builder Layouts Create Component](./_images/ab-layouts-layout-create-component.png) - -Click on the canvas to select the Layout; the name will be highlighted in blue, indicating it's selected. - -Click on the **Grid** icon in the **Layout** section on the *Styles* pane and enter the following. **Grid Template Columns:** 20% 80%, **Grid Template Rows:** none, **Grid Column Gap:** 15px. - -![App Builder Layouts Set Styles](./_images/ab-layouts-layout-set-styles.png) - -Click in the left column on the canvas to select the menuContainer, and set a **Background** color in the *Styles* pane. - -Click the arrow next to the menuContainer name to switch the right-hand pane back to the *Components* pane. - -In the *Search*, type "list" to display all the List components. - -Drag a *List* component onto the left-hand column of the canvas, which creates a list with two *List Items*; this is your menu. Give your list a name, then click the arrow next to the list name to switch back to the *Components* pane. - -![App Builder Layouts Add List Component](./_images/ab-layouts-layout-add-list-component.png) - -Drag a *View* component (orange button) onto the empty area of the canvas; this is where your pages will display. *(If your View component accidentally ends up on the left side of the canvas, just drag it to the right to reposition it.)* - -![App Builder Layouts Add View Component](./_images/ab-layouts-layout-add-view-component.png) - -Click the *Page* icon in the left-hand toolbar to switch from Layouts to Pages. - -Click on the *Home Page* item to load the page onto the canvas. - -Locate the *Heading* component under the **Common** section of the *Components* pane, and drag it onto the canvas. - -![App Builder Layouts Set Page Styles](./_images/ab-layouts-layout-set-page-styles.png) - -In the *Properties* menu under the **Basic** section of the *Components* pane, enter "Home" in the **Text** field. Click the *Styles* tab and set the **Variant** to H1. - -### Adding a Layout to a page - -Continuing our example, we must set up the Home Page to use a layout. - -Click the *Pages* icon on the left-hand toolbar, then click on the **Gear** icon on the *Home Page* item. - -![App Builder Layouts Set Page Layout](./_images/ab-layouts-layout-page-set-layout.png) - -In the *Page Settings* panel under **Page Layout**, select your layout from the Layout drop-down, and click "Save". *(Only layouts in your App that have a View component are displayed in this list.)* - -If you return to the Home Page, your layout will display the page. - -### Adding data to a Layout -A Layout can access *Data*. More specifically, it can access *Routes* for the page. - -Click the *Pages* icon on the left-hand toolbar and select your Layout to switch to the Layout view. Then click the *State* icon, which opens the *State* panel, and click the *Global* tab. - -![App Builder Layouts Page Routes](./_images/ab-layouts-layout-routes.png) - -Under the **Router** section, click on the small green arrow next to the "currentRoute" name to see a list of attributes. - -![App Builder Layouts Router Properties](./_images/ab-layouts-layout-routes-properties.png) - -Hover to the right of the "path" attribute, which will display a clipboard icon. Click on the icon to copy the path to the clipboard. - -Click on the *State* icon to collapse the *State* panel and return to the Layout view. - -Select the first *List Item* in the left column and click on the *Properties* tab in the right-hand pane. In the **Basic** section, paste the copied "path" attribute into the **Text** field. Add two brace brackets to the start and end of the "path" attribute. - -![App Builder Layouts Add Page Route](./_images/ab-layouts-layout-routes-add-route.png) - -The first *List Item* will not display anything in the Layout view, but if you switch to the *Page* view and select your *Home Page*, you will see the "path" displayed in your menu as a forward slash. - -![App Builder Layouts Page Path](./_images/ab-layouts-layout-routes-dynamic-path.png) - -Click on the *Page* icon to return to the list of pages, then click on the *Gear* icon next to the *Contact* page; set the *Layout* to your current layout. - -If you still need to created a *Contact* page, do that now. - -### Testing a Layout -Let's add some navigation so we can test the layout. - -Click on the *Page* icon and select the *Home Page*. In the *Components* pane, search for "button" and drag a *Button* component onto your page. - -Select your page's *Button* component and click the *Styles* tab in the right-hand pane. Set your button's **Size** to a **Width** of 100 and a **Height** of 25. - -![App Builder Layouts Add Page Navigation](./_images/ab-layouts-layout-page-navigation.png) - -Click the *Events* tab in the right-hand pane and then click the "+" to add an event and select the **On Click** event. - -Click "Choose Action" and select **Navigate** from the drop-down menu. Enter "/contact" as the path in the **Page** field. - -To preview the *Home Page* in a web browser, click the *Preview* button in the top toolbar, which opens the page in a new browser tab. - -Click the *Button* on the *Home Page*, which takes you to the *Contact* page. Notice the path for the *Contact* page displays in the menu. - -### Finishing up -A Layout can access global objects like the router to access information within the page, which helps to create the dynamic aspects of your application. - -## How to edit Layouts -We will modify our existing *Layout* to demonstrate how you can edit layouts. - -Click the _Pages_ icon on the left-hand toolbar to display the *Pages* pane. In the **Layout** section, select the layout you want to modify, which loads the layout in the App Builder. - -![App Builder Layouts Edit Layout ](./_images/ab-layouts-layout-edit-layout.png) - -### Adding a Header to a Layout - -Select a "Header" component in the **Layout** section of the *Components* pane and drag it onto your menuContainer. It will likely end up at the bottom of your *List*, but we can change the position of it. - -Click the _Page Structure_ icon on the left-hand toolbar to display the *Page Structure* pane. The easiest way to move your *Header* is to select your *List* and drag it below the *Header*. - -![App Builder Layouts Add Header ](./_images/ab-layouts-layout-edit-layout-add-header.png) - -Click the _Page Structure_ icon on the left-hand toolbar to close *Page Structure* pane. - -Select your *Header* and click the *Styles* tab in the right-hand pane. Set the **Color** to Transparent, so the background shows through your *Header*. Next, expand the **Size** section in the *Styles* pane and set the **Height** to 100px. - -![App Builder Layouts Header Properties ](./_images/ab-layouts-layout-edit-layout-header-props.png) - -Click the arrow next to the *Header* name in the right-hand pane to return to the *Components* pane. - -For this next part will show you two different options: -+ Adding an image - we will add a small image to your header -+ Adding text - we will add a text label to your header - -### Adding an image to a Header -From the **Other** section of the *Components* pane, drag an *Image* component onto your header. On the *Properties* tab, click the image icon next to **Source**; this opens an *Assets* dialog window. - -Click the "+" to open the *Upload file* dialog window, then select an image from your computer. Choose an image that is approximately 250px wide by 100px high. - -![App Builder Layouts Header Add Image ](./_images/ab-layouts-layout-edit-layout-header-add-image.png) - -From the *Assets* window select the image you just uploaded; the image will appear in your *Header*. Click the "x" to close the *Assets* window, and add the image name in the **Title** and **Alt Text** fields on the *Properties* pane. - -![App Builder Layouts Header Choose Image ](./_images/ab-layouts-layout-edit-layout-header-select-image.png) - -### Previewing your Layout changes -Click the _Pages_ icon on the left-hand toolbar to display the *Pages* pane and select *Home Page* in the **Pages** section. To preview your *Layout* changes, click the "Preview" button on the top toolbar; your *Home Page* loads in a new browser tab. - -![App Builder Layouts Header Choose Image ](./_images/ab-layouts-layout-edit-layout-preview-image-header.png) - -### Adding text to a Header -From the **Other** section of the components pane, drag a *Text* component onto your header. On the *Properties* pane in the **Basic** section where it says "Normal", select "Heading 1" in the drop-down, and where it says "Text", enter "Kids Helpline". - -![App Builder Layouts Header Add Image ](./_images/ab-layouts-layout-edit-layout-header-add-text.png) - -Select the *Styles* tab, expand the **Typography** section, and set the **Color** to Purple. - -![App Builder Layouts Header Add Image ](./_images/ab-layouts-layout-edit-layout-header-add-text2.png) - -### Previewing your Layout changes -Click the _Pages_ icon on the left-hand toolbar to display the *Pages* pane and select *Home Page* in the **Pages** section. To preview your *Layout* changes, click the "Preview" button on the top toolbar; your *Home Page* loads in a new browser tab. - -![App Builder Layouts Header Choose Image ](./_images/ab-layouts-layout-edit-layout-preview-text-header.png) - -:::info - -Remember that when you edit a Layout, any changes made will display immediately on all your pages that use that Layout. - -::: diff --git a/docs/projects/frontend/application-layouts-introduction.md b/docs/projects/frontend/application-layouts-introduction.md deleted file mode 100644 index 222e46f..0000000 --- a/docs/projects/frontend/application-layouts-introduction.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 'application-layouts-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/application-layouts/introduction' -slug: '/projects/frontend/application-layouts/introduction' ---- - -# Introduction - -This document describes what Layouts are in App Builder and why they're helpful. - ---- - -![App Builder Layouts](./_images/ab-application-layouts-introduction-1.png) - -When developing an App in App Builder, your Pages will be built using a combination of Layouts and Views. Layouts get used in App Builder to help developers not have to repeat themselves. - -Every Page in App Builder is made up of a Layout and a View. If you have a header, footer, or sidebar that you want to appear on multiple Pages in your app, you can create it once as a Layout and then use that Layout on various Pages. - -### Layouts Summary - -A **Layout** is a reusable container you can use to arrange components on the Page Canvas. App Builder ships with a few different Layout components, such as the **Authenticated** and **Empty**. You can also create custom Layouts. - -Layouts are not Page-specific and get selected on a page-by-page basis in the Page settings. - -### Views Summary - -A **View** is all components added to a specific page rendered within the Layout. This means that when editing a Page, you're adding components to a View. Meanwhile, when editing a Layout, you're adding components to the Layout that will be available on all Pages using that Layout. - -All this said Layouts and Views are always displayed and updated through the Page Canvas. - -## Next Steps - -In the following sections, we'll cover how you can add and configure Layouts in App Builder. diff --git a/docs/projects/frontend/application-layouts.md b/docs/projects/frontend/application-layouts.md deleted file mode 100644 index 4cf9451..0000000 --- a/docs/projects/frontend/application-layouts.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'application-layouts' -sidebar_label: 'Application Layouts' -redirect_from: '/frontend/application-layouts' -slug: '/projects/frontend/application-layouts' ---- - -# Application Layouts - -Layouts are reusable containers that you can use to arrange components on the Page Canvas. App Builder has some pre-configured Layouts, such as Authenticated and Empty. You can also create custom Layouts. - -Layouts are not Page-specific and get selected on a page-by-page basis in the Page settings. - -- [Creating and editing Layouts](application-layouts-creating-and-editing-layouts.md): Learn how to add components and data to a Layout, and how to edit Layout styling. diff --git a/docs/projects/frontend/authenticating-app-users-calling-frontend-functions-introduction.md b/docs/projects/frontend/authenticating-app-users-calling-frontend-functions-introduction.md deleted file mode 100644 index 41f2c4e..0000000 --- a/docs/projects/frontend/authenticating-app-users-calling-frontend-functions-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-calling-frontend-functions-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/authenticating-app-users/calling-frontend-functions/introduction' -slug: '/projects/frontend/authenticating-app-users/calling-frontend-functions/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-0auth.md b/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-0auth.md deleted file mode 100644 index 18077d9..0000000 --- a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-0auth.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-0auth' -sidebar_label: '- How to Setup Authentication for 0Auth' -redirect_from: '/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-0auth' -slug: '/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-0auth' ---- - -# - How to Setup Authentication for 0Auth - -...coming soon. diff --git a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-basic-email-password.md b/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-basic-email-password.md deleted file mode 100644 index c21632b..0000000 --- a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-basic-email-password.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-basic-email-password' -sidebar_label: '- How to Setup Authentication for Basic EmailPassword' -redirect_from: '/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-basic-emailpassword' -slug: '/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-basic-emailpassword' ---- - -# - How to Setup Authentication for Basic EmailPassword - -...coming soon. diff --git a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-hosted-login-w-redirect.md b/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-hosted-login-w-redirect.md deleted file mode 100644 index 1165d92..0000000 --- a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-hosted-login-w-redirect.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-hosted-login-w-redirect' -sidebar_label: '- How to Setup Authentication for Hosted Login w Redirect' -redirect_from: '/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-hosted-login-w-redirect' -slug: '/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-hosted-login-w-redirect' ---- - -# - How to Setup Authentication for Hosted Login w Redirect - -...coming soon. diff --git a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-json-web-tokens.md b/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-json-web-tokens.md deleted file mode 100644 index 3585d3a..0000000 --- a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-json-web-tokens.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-supported-authentication-strategies-how-to-setup-authentication-for-json-web-tokens' -sidebar_label: '- How to Setup Authentication for JSON Web Tokens' -redirect_from: '/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-json-web-tokens' -slug: '/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-json-web-tokens' ---- - -# - How to Setup Authentication for JSON Web Tokens - -...coming soon. diff --git a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-setting-up-protected-pages-in-app-builder.md b/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-setting-up-protected-pages-in-app-builder.md deleted file mode 100644 index e1d8edc..0000000 --- a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-setting-up-protected-pages-in-app-builder.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-supported-authentication-strategies-setting-up-protected-pages-in-app-builder' -sidebar_label: 'Setting up Protected Pages in App Builder' -redirect_from: '/frontend/authenticating-app-users/supported-authentication-strategies/setting-up-protected-pages-in-app-builder' -slug: '/projects/frontend/authenticating-app-users/supported-authentication-strategies/setting-up-protected-pages-in-app-builder' ---- - -# Setting up Protected Pages in App Builder - -...coming soon. diff --git a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-testing-authentication-in-development-mode.md b/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-testing-authentication-in-development-mode.md deleted file mode 100644 index 593a586..0000000 --- a/docs/projects/frontend/authenticating-app-users-supported-authentication-strategies-testing-authentication-in-development-mode.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'authenticating-app-users-supported-authentication-strategies-testing-authentication-in-development-mode' -sidebar_label: 'Testing Authentication in Development Mode' -redirect_from: '/frontend/authenticating-app-users/supported-authentication-strategies/testing-authentication-in-development-mode' -slug: '/projects/frontend/authenticating-app-users/supported-authentication-strategies/testing-authentication-in-development-mode' ---- - -# Testing Authentication in Development Mode - -...coming soon. diff --git a/docs/projects/frontend/billing-inviting-managing-collaborators-billing-spec-tbd.md b/docs/projects/frontend/billing-inviting-managing-collaborators-billing-spec-tbd.md deleted file mode 100644 index c1c892f..0000000 --- a/docs/projects/frontend/billing-inviting-managing-collaborators-billing-spec-tbd.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'billing-inviting-managing-collaborators-billing-spec-tbd' -sidebar_label: 'BILLING SPEC TBD' -redirect_from: '/frontend/billing/inviting/managing-collaborators/billing-spec-tbd' -slug: '/projects/frontend/billing/inviting/managing-collaborators/billing-spec-tbd' ---- - -# BILLING SPEC TBD - -...coming soon. diff --git a/docs/projects/frontend/billing-inviting-managing-collaborators-introduction.md b/docs/projects/frontend/billing-inviting-managing-collaborators-introduction.md deleted file mode 100644 index 654d39c..0000000 --- a/docs/projects/frontend/billing-inviting-managing-collaborators-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'billing-inviting-managing-collaborators-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/billing/inviting/managing-collaborators/introduction' -slug: '/projects/frontend/billing/inviting/managing-collaborators/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/billing-inviting-managing-collaborators-upgrading-downgrading-subscription-tiers.md b/docs/projects/frontend/billing-inviting-managing-collaborators-upgrading-downgrading-subscription-tiers.md deleted file mode 100644 index 1cbe07f..0000000 --- a/docs/projects/frontend/billing-inviting-managing-collaborators-upgrading-downgrading-subscription-tiers.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'billing-inviting-managing-collaborators-upgrading-downgrading-subscription-tiers' -sidebar_label: 'UpgradingDowngrading Subscription Tiers' -redirect_from: '/frontend/billing/inviting/managing-collaborators/upgradingdowngrading-subscription-tiers' -slug: '/projects/frontend/billing/inviting/managing-collaborators/upgradingdowngrading-subscription-tiers' ---- - -# UpgradingDowngrading Subscription Tiers - -...coming soon. diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-accessing-frontend-data.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-accessing-frontend-data.md deleted file mode 100644 index fe370af..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-accessing-frontend-data.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-accessing-frontend-data' -sidebar_label: 'Accessing frontend data' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/accessing-frontend-data' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/accessing-frontend-data' ---- - -# Accessing frontend data in Projects - -Frontend applications use a State management system to store data and reflect the attributes and data of elements, like Components and Requests. The State object is accessible to any element within the frontend. Any data that needs to be accessed by multiple elements can be stored in this object for easy retrieval. - -Additionally, states can be either Local or Global. While Global states are accessible by any element within a frontend application, Local states are only accessible by elements within the Page they were created. - -## Opening the State pane - -The first step in managing state data is to open the *State* pane by clicking the "{...}" icon in the left menu. - -![Opening the state pane in a frontend](./_images/ab-state-1.png) - -The *State* pane has tabs for Local and Global state data and gives you access to four different data types. - -- **Custom Entries** - Custom data that you create. -- **Requests** - Data accessed through a database request. -- **Resources** - Data related to specific resources. For example, under the Global State tab, you will find data in the Resource section about your project, such as the project name, title, API, and workspace. -- **Router** - Data related to your application pages. - -![State Pane details](./_images/ab-state-pane-detail.png) - -## Accessing State data in a Component - -To access state data in a component, you must drag and drop a component onto the Page first. Try dragging a *Text Field* component onto your Page. - -![State Pane TextField Component](./_images/ab-state-pane-textField-component.png) - -Open your *State* pane and expand the **textField_1** entry under Custom Entries. Let's add a default value to our *Text Field* so the user knows what to enter in the field. - -Click the "pencil icon" to the right of the **textField_1** in the *State* pane, which opens a properties dialog. In the **Default Value** field, enter the text "Please enter an address" without the quotes, and click "Save". The text will be saved in the **textField_1** value property. - -![State Pane TextField Value](./_images/ab-state-pane-textField-value.png) - -When hovering over any key or value, you'll see a small clipboard icon to the right of the entry. Clicking this icon will copy the **state accessor** for you to use as input in your Component. - -In frontend projects, all inputs are handlebars enabled, meaning you can dynamically read any state value as an input in your Component's properties. - -For example, click the "clipboard icon" next to the **textField_1** value property and paste it into the _Text Field_ component **Value** field in the *Properties* pane. Add handlebars to the front and back of the pasted text in the field. Your **Value** should look like this {{textField_1.value}}. - - -![State Pane TextField Clipboard](./_images/ab-state-pane-textField-clipboard.png) - -Once done, you should see the rendered value on your page canvas within the component instance. - -![State entry used as component property](./_images/ab-state-component-states.png) - -## Data Binding examples - -The following examples demonstrate how to bind different types of data to commonly used components. - -1. [Binding a Request to a Table](/projects/frontend/data-binding-example-binding-request-to-table-component.md) -2. [Binding Custom Entries to a Card](/projects/frontend/data-binding-example-binding-custom-entries-to-card-component.md) -3. [Binding a Request to a Looper](/projects/frontend/data-binding-example-binding-request-to-looper-component.md) -5. [Binding a Function to a Looper](/projects/frontend/data-binding-example-binding-function-to-looper-component.md) diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-connecting-to-a-data-source-8base-be-workspace.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-connecting-to-a-data-source-8base-be-workspace.md deleted file mode 100644 index 86c659c..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-connecting-to-a-data-source-8base-be-workspace.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-connecting-to-a-data-source-8base-be-workspace' -sidebar_label: 'Connecting to a Data Source (8base BE Workspace)' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/connecting-to-a-data-source-8base-be-workspace' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/connecting-to-a-data-source-8base-be-workspace' ---- - -# Connecting to a Data Source (8base BE Workspace) - -A data source is an API client you can send requests from your app to get data to your pages and interact with APIs. In this document, we'll walk through the steps of getting one set up. - -## Setting up an 8base Backend Data Source - -To set up a data source, click on the Resources icon in the left-side menu. It will open a modal that lists all of the available data sources. Currently, App Builder supports connecting to an API via REST or GraphQL, as well as an 8base Backend. - -![Resources in App Builder](./_images/ab-resources-1.png) - -8base makes it easy to connect to an 8base Backend. In the "Add a Resource" area, click on any of your 8base Backends listed to set it up as a Resource. This will add it to your Resources list on the left modal area. - -App Builder also supports both REST APIs and GraphQL APIs. - -## Configuring an 8base Backend Data Source - -After your 8base Backend is selected, click on it in the list of the available resources. You'll then be able to choose the endpoint and environment (if connecting to a backend that has CI/CD) and set any default headers you want to send with requests. - -![Configuring a resource](./_images/ab-resources-configure-1.png) - -With 8base, it's easy to connect to the data source of your choice and start building the app of your dreams. Get started today! - -## Making an API Request to the Data Source - -Once your Resource gets configured, it will become available in your app! You can then make API requests to it using the Request Modal. - -![Request Modal](./_images/ab-resources-requests-1.png) - -To create an API request, click on the "+" button in the top-right corner of the Request modal. - -In the Request create form, you can select to which Resource you want to request and the different settings for that Request. The input variables, headers, and operation type can all be set. These options will vary based on the type of data source you're sending the Request to (e.g, GraphQL, REST, 8base Backend). - -![Making a request in the Request Modal](./_images/ab-resources-request-2.png) - -After you've made your request, you'll see the response. The data also gets stored in the State pane, making it accessible by components and other parts of your app. diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-deploying-publishing-an-app.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-deploying-publishing-an-app.md deleted file mode 100644 index 5643aa7..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-deploying-publishing-an-app.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-deploying-publishing-an-app' -sidebar_label: 'Deploying / Publishing an App' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/deploying-publishing-an-app' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/deploying-publishing-an-app' ---- - -# Deploying / Publishing an App - -When you're ready to deploy your app, click on the "Deploy" button located in the top navigation bar of the App Builder editor. This will open a drop-down that shows your deployment history and allows you to click on the second "Deploy" button. Every new deployment is automatically assigned a version number that automatically increments. However, you have the ability to specify. However, you as the developer have the ability to manually specify it. - -![Deploy dropdown](./_images/ab-deploy-dropdown-1.png) - -This will start the process of compiling, building, and deploying your app. All apps are automatically deployed to an S3 bucket. The bucket will be assigned a static URL that is mapped to it. - -![Deploy pending process](./_images/ab-deploy-pending-1.png) - -## Deployment Settings - -You can find more deployment options in the Deployment area of your app's Settings. Different deployment options are available, such as configuring SSL certificates, enabling a CDN, and the instructions for mapping a Custom Domain with your DNS provider. - -Note that these options will only become available once your first deployment is completed. - -![Deploy settings](./_images/ab-deploy-settings-1.png) - -### Adding a Custom Domain - -If you want to map a custom domain (like www.example.com) with your app, you need to configure it with your DNS. In the Settings > Deployment area of the Editor, you'll find instructions for adding a CNAME entry with your DNS provider. - -Once you've added the CNAME entry, come back and enter your custom domain in the App Builder editor and click Save. Your app will soon be accessible at your custom domain (note that it may take up to 48 hours for DNS changes to propagate). - -### Enabling SSL - -To enable SSL for a Custom Domain, you need to create an SSL certificate with your DNS provider or another SSL tool. - -![Enabling SSL in deploy settings](./_images/ab-deploy-ssl-1.png) - -App Builder will require that you input the Certificate (CRT), Private Key (KEY), and Certificate Authority Bundle (CABUNDLE). Once you've done this, click the upload button. - -**If you have any issues, contact support@8base.com** - -### Enabling CDN - -![Enabling CDN in App Builder](./_images/ab-deploy-cdn-1.png) - -A premium feature in 8base is CDN. By clicking the enable button and agreeing to the terms, 8base will configure your application to be accessed through a global CDN. This improves load speed. diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-dragging-and-dropping-components.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-dragging-and-dropping-components.md deleted file mode 100644 index 83fc25c..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-dragging-and-dropping-components.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-dragging-and-dropping-components' -sidebar_label: 'Dragging and dropping Components' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/dragging-and-dropping-components' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/dragging-and-dropping-components' ---- - -# Dragging and dropping Components - -App Builder provides a simple way to create custom user interfaces using pre-built components. You can quickly create UIs using pre-built components and customize their properties, styles, and event listeners. This makes it easy to get started with building your web application's pages. - -![The App Builder Component Library](./_images/ab-component-library-2.png) - -To use this feature, simply drag-and-drop a component from the Component Library located in the right-screen area of the editor onto the canvas. You can then customize its properties, styles, and event listeners in the right-screen Component Settings area of the editor. This makes it quick and easy to create custom UIs without having to write any code. - -## Component Properties - -![App Builder's Component Properties](./_images/ab-component-settings-properties-1.png) - -You can set Component properties to affect the behavior of a component and its data. For example, you can set the "isLoading" property of a Button component to true to make the button disabled and display a loading spinner instead of the button's label. You can also set properties in the Component Settings area of the Editor. - -Most inputs are Handlebars enabled, meaning that you can write expressions and use functions inside the inputs to determine values. For example, you can a greeting message on a Text component to be `{{ new Date().getHours() < 12 ? "Good Morning!" : "Good Afternoon!" }}` to dynamically render a time-sensitive (get it) message to your user. - -## Component Styles - -![App Builders Component Styles](./_images/ab-component-settings-styles-1.png) - -You can also use the Styles pane to update the appearance of a Component. For example, you can change the background color, font size, and padding of a Button component. Styles changes will immediately be reflected on the rendered component so that you can see exactly what your component will look like before you save any changes. - -App Builder also provides a number of different ways to customize the look and feel of your Components. You can use the built-in themes, or you can create your own custom themes. You can also use the CSS Editor to directly style your component's styling pane. This gives you full control over how your component looks and feels. - -## Component Events - -![App Builder's Component Events](./_images/ab-component-settings-events-1.png) - -You can add event listeners to components in the Component Settings area of the Editor. Simply click on the "+" icon button in the "Events" tab of the Component Settings and select the event you want to trigger an Action on. You can then choose what action to take when that event is triggered. For example, you can navigate to a different page when a button is clicked, or you can run custom Javascript code. - -Adding event listeners is a quick and easy way to add interactivity to your components without having to write any – or not too much – code. This makes it easy to create UIs that are interactive and responsive to user input. - -## Using the Page Structure Pane - -![Using the page structure in App Builder](./_images/ab-page-structure-1.png) - -The Page Structure pane shows the hierarchy of components in a list. You can use this pane to re-organize the hierarchy of a page. This is useful if you want to change the order in which components are rendered on the page or find nested components and containers that may be visually hard to find in the application visually. - -To use this feature, simply drag and drop a component from the Page Structure pane onto the canvas. Conversely, you can also drag and drop components from the canvas into the Page Structure. This will change the parent-child relationship of the components and update the page accordingly. diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-introduction.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-introduction.md deleted file mode 100644 index d835894..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-introduction.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-introduction' -sidebar_label: 'Building Frontends App Builder Walkthrough' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/introduction' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/introduction' ---- - -# Building Frontends App Builder Walkthrough - -![App Builder Editor interface](./_images/app-builder-editor-1.png) - -The 8base App Builder Editor is a fully hosted drag-and-drop environment that lets Javascript developers quickly build web applications using pre-built UI/UX components. It is simple to use and makes it easy to get started with building web applications. Inside the Editor, there are a number of different interface areas and concepts that are important to understand. - -So let's jump right into them! diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-managing-app-pages.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-managing-app-pages.md deleted file mode 100644 index 5905f24..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-managing-app-pages.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-managing-app-pages' -sidebar_label: 'Managing App Pages' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/managing-app-pages' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/managing-app-pages' ---- - -# Managing App Pages - -When building an app in the 8base App Builder, you will typically have multiple pages that make up the overall app. Each page can have its own name, path with URL path parameters, layout, and other configurations. To manage pages in your app, go to the "Pages" section in the left sidebar of the App Builder Editor. - -![Creating new pages in App Builder](./_images/ab-creating-pages-1.png) - -## Creating a New Page - -To create a new page, click the "+" button in the "Pages" modal. This will open up a nested modal where you can enter the name and path of the new page. The name is for internal use and will be used to reference the page in the App Builder Editor. The path is the URL path that will be used to access the page when viewing the app in a web browser. - -After you have entered a name and path for the new page, click the "Save" button at the bottom of the modal. This will add the new page to your app and open it up in the App Builder Editor. - -## Editing a Page's Settings - -![Editing page settings in App Builder](./_images/ab-editing-page-settings-1.png) - -To edit an existing page, click on the gear icon to the right of the page name in the "Pages" section. This will open up the nested page settings modal in the App Builder editor. From here, you can change the name, path, layout and other settings of the page. When you are finished, click the "Save" button at the top of the modal. - -## Changing the Page Layout - -To change the layout of a page, click on the "Layout" tab in the "Page Layout" panel. This will open up a select menu where you can select from all your different layouts. When you have selected a layout, click the "Save" button at the top of the modal. - -## Deleting a Page - -To delete a page, click the "Delete" button in the top-right corner of the "Page Settings" panel. This will open up a modal asking you to confirm that you want to delete the page. If you are sure that you want to delete the page, click the "Delete" button at the bottom of the modal. Otherwise, click the "Cancel" button. - -## URL Path Parameters - -Each page in your app can have its own set of URL path parameters. These parameters can be used to dynamically generate the URL path for a page. For example, if you have a page with the path "product/:id", you can use the id parameter to specify the product that will be displayed on the page. - -To manage URL path parameters for a page, click on the "Path" input in the "Page Settings" panel. In here, you can simply type in the path value you that you want and prefix any path section with a `:` to denote it being a dynamic param. - -When adding dynamic path parameter, you can also enter its name and default value in the "Default Path Parameters" section. The default value is the value that will be used if no value is provided for the parameter. - -![Default path parameters App Builder Page settings](./_images/ab-editing-page-settings-1.png) - -After you have added a parameter, you can edit its name and default value by changing the input key or value. - -To delete a parameter, click on the trash can icon button next to the parameter declaration. - -When you are finished managing parameters, click the "Save" button at the bottom of the modal. diff --git a/docs/projects/frontend/building-frontends-app-builder-walkthrough-selecting-a-design-theme.md b/docs/projects/frontend/building-frontends-app-builder-walkthrough-selecting-a-design-theme.md deleted file mode 100644 index 8eb41a2..0000000 --- a/docs/projects/frontend/building-frontends-app-builder-walkthrough-selecting-a-design-theme.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: 'building-frontends-app-builder-walkthrough-selecting-a-design-theme' -sidebar_label: 'Selecting a design theme' -redirect_from: '/frontend/building-frontends-app-builder-walkthrough/selecting-a-design-theme' -slug: '/projects/frontend/building-frontends-app-builder-walkthrough/selecting-a-design-theme' ---- - -# Selecting a design theme - -![App Builder global settings selecting a design theme](./_images/ab-global-settings-theme-1.png) - -8base App Builder provides an easy way for you to select a custom design theme for your web application in the `Settings > Theme` area of the editor. You can choose from a number of predefined theme options, or you can create your own theme by modifying the Custom CSS style sheet. - -When you select a theme, it will be applied to your entire web application. This includes the colors, fonts, and overall styling of your application. You can customize any of these elements to match your brand or company's style guide. For example, setting a custom primary or secondary color. - -You can also create your own custom theme by modifying the Custom CSS stylesheet. This is a great way to get exactly the look and feel that you want for your web application. - -Once you've selected a Theme and updated any inputs, make sure to hit save! diff --git a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-graphql-api.md b/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-graphql-api.md deleted file mode 100644 index e656b3c..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-graphql-api.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 'connecting-to-data-sources-creating-api-connections-connecting-to-a-graphql-api' -sidebar_label: 'Connecting to a GraphQL API' -redirect_from: '/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-graphql-api' -slug: '/projects/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-graphql-api' ---- - -# Connecting to a GraphQL API - -This article describes how developers can quickly create a Resource connected to a 3rd party GraphQL API - ---- - -To set up a GraphQL API as a data source, click on the Resources icon in the left-side menu. It will open a modal that lists all of the available data sources. - -![Resources in App Builder](./_images/ab-resources-1.png) - -In the "Add a Resource" area, select "GraphQL API." This will open up a configuration window in which you can specify the name of your API, endpoint URL, and any default headers. - -Click "Save" to save your changes. Once saved, the new data source will be visible in the Resources list when creating Requests. - -## Making an API Request to the Data Source - -Once your Resource gets configured, it will become available in your app! You can then make API requests to it using the Request Modal. - -![Request Modal](./_images/ab-resources-requests-1.png) - -To create an API request, click on the "+" button in the top-right corner of the Request modal. - -In the Request create form, you can select which Resource you want to request and the different settings for that Request. The input variables, headers, and operation type can all be set. These options will vary based on the type of data source you're sending the Request to (e.g, GraphQL, REST, 8base Backend). - -![Making a request in the Request Modal](./_images/ab-resources-request-2.png) - -After you've made your request, you'll see the response. The data also gets stored in the State pane, making it accessible by components and other parts of your app. - -## Understanding the different operation types - -### Query (lazy) -This GraphQL query is expected to be executed in response to an event. This is the default option when fetching data, as most applications will prefer to be in control of when a query is executed. You can execute lazy queries as part of [component events](/projects/frontend/connecting-to-data-sources/how-to-make-api-calls-requests/how-to-execute-a-graphql-querymutation#setting-a-request-to-run-on-an-event) or [navigation events](/projects/frontend/app-navigation/create-and-editing-app-pages/adding-logic-to-navigation-events/). You can also execute it from any code block using the [run method](/projects/frontend/connecting-to-data-sources/how-to-make-api-calls-requests/how-to-execute-a-graphql-querymutation#setting-a-request-to-run-on-an-event). - -### Query -This GraphQL query will be executed when the global or local scope, where is defined, is mounted. At runtime, your app should assume query results will be present in the state if the scope is mounted. You cannot select queries as targets of component events or navigation events. You could execute them using the run method, but please consider that would be an additional execution. - -### Mutation -Mutations are used to send data to the server and usually, they would add or modify data. Mutations behave like lazy queries, letting the app decide when is the appropriate time to execute them. \ No newline at end of file diff --git a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.md b/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.md deleted file mode 100644 index 8c6edbf..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 'connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api' -sidebar_label: 'Connecting to a REST API' -redirect_from: '/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-rest-api' -slug: '/projects/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-rest-api' ---- - -# Connecting to a REST API - -This article describes how developers can quickly create a Resource connected to a 3rd party REST API - ---- - -To set up a REST API as a data source, click on the Resources icon in the left-side menu. It will open a modal that lists all of the available data sources. - -![Resources in App Builder](./_images/ab-resources-1.png) - -In the "Add a Resource" area, select "REST API." This will open up a configuration window in which you can specify the name of your API, Base URL, and any default headers and URL parameters. - -Click "Save" to save your changes. Once saved, the new data source will be visible in the Resources list when creating Requests. - -![Configuring a REST API](./_images/ab-connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api.png) - -## Making an API Request to the Data Source - -Once your Resource gets configured, it will become available in your app! You can then make API requests to it using the Request Modal. - -![Request Modal](./_images/ab-resources-requests-1.png) - -To create an API request, click on the "+" button in the top-right corner of the Request modal. - -In the Request create form, you can select which Resource you want to request and the different settings for that Request. The input variables, headers, and operation type can all be set. These options will vary based on the type of data source you're sending the Request to (e.g, GraphQL, REST, 8base Backend). - -![Making a request in the Request Modal](./_images/ab-resources-request-2.png) - -After you've made your request, you'll see the response. The data also gets stored in the State pane, making it accessible by components and other parts of your app. diff --git a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-an-8base-be-workspace.md b/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-an-8base-be-workspace.md deleted file mode 100644 index c2ad84b..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-an-8base-be-workspace.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 'connecting-to-data-sources-creating-api-connections-connecting-to-an-8base-be-workspace' -sidebar_label: 'Connecting to an 8base BE Workspace' -redirect_from: '/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-an-8base-be-workspace' -slug: '/projects/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-an-8base-be-workspace' ---- - -# Connecting to an 8base BE Workspace - -This article describes how developers can quickly create a Resource connected to an 8base Backend Workspace. - ---- - -To set up an 8base Backend Workspace as a data source, click on the Resources icon in the left-side menu. It will open a modal that lists all of the available data sources. - -![Resources in App Builder](./_images/ab-resources-1.png) - -8base makes it easy to connect to an 8base Backend. In the "Add a Resource" area, click on any of your 8base Backends listed to set it up as a Resource. This will add it to your Resources list on the left modal area. - -## Configuring an 8base Backend Data Source - -After your 8base Backend is selected, click on it in the list of available resources. You'll then be able to choose the endpoint and environment (if connecting to a backend that has CI/CD) and set any default headers you want to send with requests. - -![Configuring a resource](./_images/ab-resources-configure-1.png) - -With 8base, it's easy to connect to the data source of your choice and start building the app of your dreams. - -## Making an API Request to the Data Source - -Once your Resource gets configured, it will become available in your app! You can then make API requests to it using the Request Modal. - -![Request Modal](./_images/ab-resources-requests-1.png) - -To create an API request, click on the "+" button in the top-right corner of the Request modal. - -In the Request create form, you can select which Resource you want to request and the different settings for that Request. The input variables, headers, and operation type can all be set. These options will vary based on the type of data source you're sending the Request to (e.g, GraphQL, REST, 8base Backend). - -![Making a request in the Request Modal](./_images/ab-resources-request-2.png) - -After you've made your request, you'll see the response. The data also gets stored in the State pane, making it accessible by components and other parts of your app. diff --git a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections.md b/docs/projects/frontend/connecting-to-data-sources-creating-api-connections.md deleted file mode 100644 index b6c7754..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-creating-api-connections.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: 'connecting-to-data-sources-creating-api-connections' -redirect_from: '/frontend/connecting-to-data-sources/creating-api-connections' -slug: '/projects/frontend/connecting-to-data-sources/creating-api-connections' ---- - -# API Connecting Types - -This article describes how developers can think about Resources (API Clients) in App Builder. - ---- - -When you add a Resource to your app, App Builder creates what's essentially an API connection. The Resource becomes the API Client that you send any relevant request to get executed. - -![Resource types](./_images/ab-connecting-to-data-sources-creating-api-connections-1.png) - -There are three types of APIs you can connect to: - -- **REST API's** are the most common, and likely the ones you'll be working with most often. They use standard HTTP methods like `GET`, `POST`, `PUT`, and `DELETE`. -- **GraphQL API's** are becoming more popular, and use a single endpoint for all requests. -- **8base Workspace API's** are GraphQL APIs specific to 8base, and provide an easy way to query your data without having to write any code. - -The process for connecting to each type of API is slightly different, but the end result is the same: you have a Resource that contains all the methods necessary to fetch or update data in your app. diff --git a/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-(requests)-how-to-execute-a-graphql-query-mutation.md b/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-(requests)-how-to-execute-a-graphql-query-mutation.md deleted file mode 100644 index 5822fcf..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-(requests)-how-to-execute-a-graphql-query-mutation.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 'connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation' -sidebar_label: 'How to execute a GraphQL Query / Mutation' -redirect_from: '/frontend/connecting-to-data-sources/how-to-make-api-calls-requests/how-to-execute-a-graphql-querymutation' -slug: '/projects/frontend/connecting-to-data-sources/how-to-make-api-calls-requests/how-to-execute-a-graphql-querymutation' ---- - -# How to execute a GraphQL Query/Mutation - -This article describes how developers can execute a GraphQL Query/Mutation request to an API. - ---- - -There are several strategies for running GraphQL Queries and Mutations in App Builder; both in development and the built app. They include: - -• Using the "Run" button in the Request Pane - -• Setting a Request to run on an Event (i.e. Button Click) - -• Calling the Request in code - -## Using the "Run" button in the Request Pane - -When viewing a GraphQL Query or Mutation Request request in App Builder, you'll notice a "Run" or "Save & Run" button at the top of the Request pane. - -![Running GraphQL Request](./_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-1.png) - -Pressing this button will run the request and populate the response pane with the result so you can preview it. Know too that running the request will save the response data in the state. This means you can bind this data to UI elements in the app during development. - -## Setting a Request to run on an Event - -App Builder allows you to set a request to run automatically on certain events in your app. For example, you could set a Request to run when a user clicks a Button. We refer to these as actions. - -![Running GraphQL Request on an Action](./_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-2.png) - -To do this, select a component on the canvas on which the event listener will be set. Then, in the **Events** pane, click the **+** button to add an appropriate event listener, then select **Run Request** from the Actions menu. Finally, select the Request you want to run. - -Now when the user interacts with the element on the screen, your GraphQL Query or Mutation will automatically execute and populate the state in App Builder so you can reference what data is returned. - -## Executing a Request with code - -Requests can be executed from any location where code can be used. - -```javascript -//Assuming the request is called myQuery -Promise p = myQuery.run(); -``` - -Request will return a Promise, so if the code block wants to wait for the results to be recieved the code should look like this - -```javascript -let results = await myQuery.run(); -``` - -If the request needs variables, those can be passed using a object - -```javascript -let results = await myQuer.run({ - variables: { - variableName: variableValue, - otherVariableName: otherValue, - }, -}); -``` - -Please note these variables values will take precedence over the definitions within the Request configurations. - -## Executing a Request with Variables - -When a Query or Mutation requires variables to be used, those variables can be set in the Request's settings. - -!["Running GraphQL Request with Variables](./_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-3.png) - -Variables can be set dynamically by adding expressions to the value input. For example, a request may pull its' variables values from different inputs in a form by referencing their state accessors or another object stored in the state. diff --git a/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-(requests)-how-to-execute-a-rest-api-call.md b/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-(requests)-how-to-execute-a-rest-api-call.md deleted file mode 100644 index 067ac3b..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-(requests)-how-to-execute-a-rest-api-call.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 'connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call' -sidebar_label: 'How to execute a REST API Call' -redirect_from: '/frontend/connecting-to-data-sources/how-to-make-api-calls/how-to-execute-a-rest-api-call' -slug: '/projects/frontend/connecting-to-data-sources/how-to-make-api-calls/how-to-execute-a-rest-api-call' ---- - -# How to execute a REST API Call - -This article describes how developers can execute a REST API Call. - ---- - -There are several strategies for running REST API Calls in App Builder; both in development and the built app. They include: - -• Using the "Run" button in the Request Pane - -• Setting a Request to run on an Event (i.e. Button Click) - -• Calling the Request in code - -## Using the "Run" button in the Request Pane - -When viewing a REST API Request request in App Builder, you'll notice a "Run" or "Save & Run" button at the top of the Request pane. - -![Running REST Request](./_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-1.png) - -Pressing this button will run the request and populate the response pane with the result so you can preview it. Know too that running the request will save the response data in the state. This means you can bind this data to UI elements in the app during development. - -## Setting a Request to run on an Event - -App Builder allows you to set a request to run automatically on specific events in your app. For example, you could set a Request to run when a user clicks a Button. We refer to these as actions. - -![Running REST Request on an Action](./_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation-2.png) - -To do this, select a component on the canvas on which the event listener will be set. Then, in the **Events** pane, click the **+** button to add an appropriate event listener, then select **Run Request** from the Actions menu. Finally, select the Request you want to run. - -Now when the user interacts with the element on the screen, your GraphQL Query or Mutation will automatically execute and populate the state in App Builder so you can reference what data is returned. - -## Executing a Request with code - -Requests can be executed from any location where code can be used. - -```javascript -//Assuming the request is called myQuery -Promise p = myQuery.run(); -``` - -Request will return a Promise, so if the code block wants to wait for the results to be recieved the code should look like this - -```javascript -let results = await myQuery.run(); -``` - -## Executing a REST Request with Variables - -When a REST requires variables to be sent with it (i.e., query params, form data), those data can be set in the Request's settings. - -!["Running GraphQL Request with Variables](./_images/ab-connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call-2.png) - -Variables can be set dynamically by adding expressions to the value input. For example, a request may pull its' variables values from different inputs in a form by referencing their state accessors or another object stored in the state. diff --git a/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-requests.md b/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-requests.md deleted file mode 100644 index e13b601..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-how-to-make-api-calls-requests.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: 'connecting-to-data-sources-how-to-make-api-calls' -redirect_from: '/frontend/connecting-to-data-sources/how-to-make-api-calls' -slug: '/projects/frontend/connecting-to-data-sources/how-to-make-api-calls' ---- - -# How to make API Calls (Requests) - -This article describes how developers can think about making API Calls (Requests) in App Builder. - ---- - -When building an app, you'll often need to fetch data from a remote source via an API. This data could be anything from a user's profile information to the latest news stories. Regardless of what the data is, the process for fetching it is generally the same. - -In App Builder, we differentiate between Resources and Requests. A Resource is an object that represents a specific API, such as https://myapi.com/v1/. A Request is an object that gets sent to a Resource for execution and contains the parameters necessary to fetch specific data from that API, such as https://myapi.com/v1/users?id=123. - -**When you want to fetch data from an API in App Builder, you'll need to first create a Resource and then a Request.** - -In the next pages, we'll demonstrate how to create both GraphQL and REST API Requests. diff --git a/docs/projects/frontend/connecting-to-data-sources-introduction.md b/docs/projects/frontend/connecting-to-data-sources-introduction.md deleted file mode 100644 index 40c6578..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-introduction.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 'connecting-to-data-sources-introduction' -redirect_from: '/frontend/connecting-to-data-sources/introduction' -slug: '/projects/frontend/connecting-to-data-sources/introduction' ---- - -# Introduction - -This article describes how developers can connect to Data Sources (APIs) in App Builder. - ---- - -A data source is an API client you can send requests to from your app to get data to your pages and interact with APIs. InApp Builder, all data sources get set up as a Resource in the left-side menu of the Editor. Currently, App Builder supports connecting to an API via REST or GraphQL, as well as an 8base Backend. - -![Resources in App Builder](./_images/ab-resources-1.png) - -Once your Resource gets configured, it will become available in your app! You can then make API requests to it using the Request Modal. Requests are created and managed in the Requests tab of your Editor. - -## Next - -In the following sections, we'll describe how to configure each data source type. diff --git a/docs/projects/frontend/connecting-to-data-sources-send-form-data-with-an-api-request.md b/docs/projects/frontend/connecting-to-data-sources-send-form-data-with-an-api-request.md deleted file mode 100644 index dcf0d82..0000000 --- a/docs/projects/frontend/connecting-to-data-sources-send-form-data-with-an-api-request.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 'connecting-to-data-sources-send-form-data-with-an-api-request' -sidebar_label: 'Send Form Data with an API Request' -redirect_from: '/frontend/send-form-data-with-an-api-request' -slug: '/projects/frontend/send-form-data-with-an-api-request' ---- - -# Send form data with an API Request - -This article describes the process a developer must go through to send data with an API request collected in a form. - ---- - -In App Builder, developers can send form data to an API (GraphQL or REST). To do so, there are several concepts that they need to be familiar with. - -1. Form Components -2. Component Events -3. Custom Code (JavaScript) -4. Setting/Accessing Global State Values -5. Setting Variables in Requests - -With those listed, let's walk through each one so you can start sending data from the front end. - -## Form Components - -![Form block](./_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-1.png) - -Form Components are Inputs that are allowed to be placed in the Form Block Component. To collect values from Forms in App Builder, you must use Inputs placed inside a Form Block component. - -There are several types of inputs: - -- Text Input -- Number Input -- Date/Time Input -- Single Select Dropdown -- Multi Select Dropdown -- Checkbox Group -- Radio Button Group -- and more. - -These inputs allow you to collect user values, but only on the Form's "On Submit" event. - -## Component Events - -![Events](./_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-2.png) - -In App Builder, developers can use Component Events to trigger actions associated with custom code execution. In this case, we'll need to set an Event listener for the Forms Block's "On Submit" event. - -On a Form Block Component, go to the "Events" tab a select the "On Submit" Event. Then configure the action to run "Custom Code." Once configured, open the code editor. - -## Custom Code (JavaScript) - -![Javascript code](./_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-3.png) - -The code editor will give you a blank editor in which you can write any Javascript you want. - -**Know that the arguments that you need to use in order to collect your Form data App Builder will explicitly tell you do NOT exist and will show visual errors. Just ignore those.** - -Inside the function, know that you'll be able to access any Form data from the inputs included in the form on a hidden variable called `data` with the accessor that matches the Input component name. - -For example, if your Form has a text input component that you named "TextInput1" you'll be able to access the data on the "On Submit" event using `data.TextInput1`. - -## Setting/Accessing Global State Values - -![Global State](./_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-4.png) - -To set a global state value, you'll need to use the `setValue` function on a Global State Entry. Makes sure that you add a separate entry in the Global State (DO NOT USE LOCAL STATE) for every form Input. Once you do, you'll be able to reference it by name and use the `setValue` method. - -```js -let inputValue = data.TextInput1; -globalStateKeyName.setValue(inputValue); -``` - -Now that you've been able to store the input value in the Global State, you can reference it in the arguments/variables passed to a Request. - -## Setting Variables in Requests - -![Setting variables](./_images/ab-connecting-to-data-sources-send-form-data-with-an-api-request-5.png) - -To set a Variable in a Request, you'll need to add the entry for it in the Request's "Variables" editor of either a REST or GraphQL request. Add an entry and give it a name. Then, in the value input use handlebars syntax to reference your Global State entry value like so, `{{ globalStateKeyName.value }}`. - -## Final Step - -You'll probably now want to make sure that the actual Request runs! You can accomplish this by adding an extra line to your Javascript code that references the Request by name and then calls the `run` method. It's important that the `run` method gets called after the value is set since you will want to ensure that the Request accesses the Global State value after it's been updated. - -```js -// Access value from form Submit event -let inputValue = data.TextInput1; -// Update value -globalStateKeyName.setValue(inputValue); -// Run request AFTER value set -myRequest.run(); -``` - -That's it! Follow these 6 steps and you'll be able to start sending data with API Requests in App Builder. diff --git a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-component-styling-settings.md b/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-component-styling-settings.md deleted file mode 100644 index 872b297..0000000 --- a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-component-styling-settings.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 'custom-app-styling-creating-a-global-app-theme-component-styling-settings' -sidebar_label: 'Component Styling Settings' -redirect_from: '/frontend/custom-app-styling/creating-a-global-app-theme/component-styling-settings' -slug: '/projects/frontend/custom-app-styling/creating-a-global-app-theme/component-styling-settings' ---- - -# Component Styling Settings - -This document describes how you can use the App Builder Styling Pane to style your components once they're added to the Page Canvas. - -![Component Styling](./_images/ab-custom-styles-styling-components-1.png) - -## Styling Component Instances - -Component instances are individual instances of that component placed onto the page. They will inherit the default styling from the component library but can be individually styled as well. You're able to style them using the styling pane or add custom CSS to the component. - -## Adding Custom Styles with the Styling Pane - -The App Builder Styling pane enables you to visually style component instances using a set of tools. It provides options to change colors, font properties, spacing, and more. Pretty much, any CSS property you'd be able to add using syntax can be added using the Styling Pane. - -The changes you make with the styling pane are only applied to the component instance that's selected on the page. The changes you make will not affect other instances of the same component or affect the default styles for that component. - -You can access the styling pane in the "Style" tab of the right drawer when a component is selected. - -### Setting Style Values using Code - -![Component Styling with Code](./_images/ab-custom-styles-styling-components-2.png) - -You can determine the value of style inputs using JavaScript code. On inputs where this applies, you'll see an "Fx" button next to the input. To leverage it, click the button and then expand the input to use the code editor. - -This is useful when you want to dynamically determine a style property, such as setting the background color based on the value of a field. - -## Adding Custom CSS with the Styling Pane - -In addition to setting style values with the Styling Pane, you can also add custom CSS. This is useful when you want to add CSS properties that aren't available using the Styling Pane or if you want more control over the order in which properties are applied. - -![Component Styling with CSS](./_images/ab-custom-styles-styling-components-3.png) - -To add custom CSS, open the "Custom CSS" tab in the Styling Pane. In the "Custom CSS" editor, you can add CSS properties just as you would in a code editor. The changes will be applied to only the component that is selected on the page when you make them. diff --git a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-exporting-importing-app-themes.md b/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-exporting-importing-app-themes.md deleted file mode 100644 index 12be711..0000000 --- a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-exporting-importing-app-themes.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: 'custom-app-styling-creating-a-global-app-theme-exporting-importing-app-themes' -sidebar_label: 'Exporting / Importing App Themes' -redirect_from: '/frontend/custom-app-styling/creating-a-global-app-theme/exporting-importing-app-themes' -slug: '/projects/frontend/custom-app-styling/creating-a-global-app-theme/exporting-importing-app-themes' ---- - -# Exporting / Importing App Themes - -This document describes exporting/importing App Themes. - -![Responsive design in App Builder](./_images/ab-custom-styling-theme-import-export-1.png) - -App Builder currently doesn't support the importing or exporting of a Theme. You can, however, manually add or copy your theme's custom `css`. This is available in the `Settings > Theme > Custom CSS` tab of the editor. - -We recommend saving any custom CSS in a separate file and using a tool like `git` for versioning control. This is also considered a best practice currently when writing custom CSS in media queries. - -:::info -Adding Custom CSS to your App Builder project will result in those changes being applied globally. -::: diff --git a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-introduction.md b/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-introduction.md deleted file mode 100644 index f92a3a4..0000000 --- a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-introduction.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 'custom-app-styling-creating-a-global-app-theme-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/custom-app-styling-creating-a-global-app-theme-introduction",' -slug: '/projects/frontend/custom-app-styling-creating-a-global-app-theme-introduction",' ---- - -# Creating App Themes Introduction - -This document describes what comprises an App Theme and how to create and customize themes. - -![how to create and customize themes](./_images/ab-custom-styling-theme-introduction-1.png) - -App Builder Themes are what define the look and feel of your application across different screen sizes. As a result, there are 3 areas of focus that are relevant when we discuss Themes. They are: - -- **CSS Framework** - The set of predefined CSS classes that help with the overall layout and presentation of an application. The default App Builder theme includes Material Design as the CSS Framework. - -- **Component Defaults** - The set of default style property values for all the various components in your component library. - -- **Media Queries** - The set of breakpoints that help with how an application looks on different screen sizes. - -## CSS Framework - -App Builder ships with the Material Design CSS framework by default. However, you're not limited to using only this one CSS framework. If you want, you can include custom CSS code you can do so. We're also working to enable more CSS frameworks in the future. For example, we're planning to add support for Bootstrap and Ant Design. - -### Theme Variables - -App Builder ships with a set of variables that help with the overall look and feel of an application for the selected CSS framework. These variables vary for each framework, but all of them are available for customization using the Theme configuration pane available in `Theme`. - -![Setting theme variables](./_images/ab-custom-styles-theme-3.png) - -The goal of these variables is to provide a single place where the Theme level customizations can be changed. For example, if you wanted to change the primary color used in the CSS framework, you could do so by modifying the primary color variable. - -## Component Defaults - -Component Defaults are the set of default style property values for all the various components in your component library. These defaults can be customized as well and are available for modification in the `Theme > Components` area using CSS code. - -Changing a Component Defaults for a Theme affects the way a Component Instance is styled when first dropped onto the Page Canvas. By updating the Component Defaults to best reflect your desired end state of a component, you can save a lot of time during development. - -## Media Queries - -Media Queries are the set of breakpoints that help with how an application looks on different screen sizes. These breakpoints may vary for different CSS frameworks, but they're all available for customizations using the Media Query builder in App Builder. - -The goal of the Media Query builder is to provide an interface for creating responsive breakpoints without having to write any code. After you create your breakpoints, you can begin adding custom CSS to the breakpoints. - -## Conclusion - -Using these three different elements/concepts, you're able to develop themes for your applications in App Builder. We're currently working on capabilities for Importing/Exporting these Themes in an easy way (Last updated July 13, 2022). diff --git a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-setting-default-styles-on-components.md b/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-setting-default-styles-on-components.md deleted file mode 100644 index 968f4aa..0000000 --- a/docs/projects/frontend/custom-app-styling-creating-a-global-app-theme-setting-default-styles-on-components.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 'custom-app-styling-creating-a-global-app-theme-setting-default-styles-on-components' -sidebar_label: 'Setting default styles on Components' -redirect_from: '/frontend/custom-app-styling/creating-a-global-app-theme/setting-default-styles-on-components' -slug: '/projects/frontend/custom-app-styling/creating-a-global-app-theme/setting-default-styles-on-components' ---- - -# Setting default styles on Components - -This document describes how you can add custom CSS to style your components' default look and feel. - -![Component Default Styling](./_images/ab-custom-styles-component-defaults-1.png) - -## Understanding Component Defaults vs. Component Instances - -In App Builder, there is a distinction made between component defaults and component instances. - -Component defaults are the definitions for a component that will affect how it looks and behaves when first added to the page canvas. This is the default styling of each component in your component library. - -Component instances are individual instances of that component placed onto the page. They will inherit the default styling from the component library but can be individually styled as well. - -This distinction is important to understand when working with custom styles in App Builder because you can target either the defaults or the individual instances. - -## Customizing Component Defaults with CSS - -![Customizing Component Defaults with CSS](./_images/ab-custom-styles-component-defaults-2.png) - -You can add your custom CSS in the `Theme > Components` tab of the Editor. The following steps describe how you can do this: - -In the Theme section of the left navigation bar, click on **Components**. The Components list appears. - -Select the component you want to style from the Components list. -In the top right of the page, you'll see the code (`<\>`) icon. Click it to open the CSS editor. -All of the CSS selectors for different states of the component will be pre-populated for you. Feel free to add CSS properties to them, or create custom selectors. -Click the "Done" button when finished. - -App Builder includes a "live reload" feature so that when you make changes to the CSS in the `Theme > Components tab`, those changes are automatically reflected in the Component Preview and Editor. - -![Customizing Component Defaults with CSS](./_images/ab-custom-styles-component-defaults-3.png) diff --git a/docs/projects/frontend/custom-app-styling-introduction.md b/docs/projects/frontend/custom-app-styling-introduction.md deleted file mode 100644 index 5634c39..0000000 --- a/docs/projects/frontend/custom-app-styling-introduction.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -id: 'custom-app-styling-introduction' -sidebar_label: 'Custom App Styling' -redirect_from: '/frontend/custom-app-styling/introduction' -slug: '/projects/frontend/custom-app-styling/introduction' ---- - -# Custom App Styling - -App Builder makes it easy to customize the look and feel of your apps. Using existing CSS Design Frameworks, you can create unique and consistent app designs without having to start from scratch. - -![Themes pane in App Builder for Custom Styling](./_images/ab-custom-styles-1.png) - -There are three ways to style your apps in App Builder: - -1. **Themes** – App Builder includes a number of built-in themes that you can apply to your app with just a few clicks. Themes also let you create Component Default Styling. - -2. **Custom CSS** – You can also use your own CSS stylesheets to style your app. - -3. **App Builder Styling Panes** – App Builder Editor allows you to visually edit the CSS styles for your app. - -When you first create an app in App Builder, it will use the Default Theme. This can be changed at any time from the Themes area of the Editor. There are a number of built-in themes to choose from, or you can create your own custom theme. - -If you want more control over the look and feel of your app, you can use Custom CSS. This is CSS that you write yourself and can be applied to any element in your app. - -That said, we'll further break down all of these in the upcoming sections! diff --git a/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-adding-custom-fonts-and-icons-to-your-app.md b/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-adding-custom-fonts-and-icons-to-your-app.md deleted file mode 100644 index bc41ff0..0000000 --- a/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-adding-custom-fonts-and-icons-to-your-app.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 'custom-app-styling-understanding-the-app-builder-interface-adding-custom-fonts-and-icons-to-your-app' -sidebar_label: 'Adding custom Fonts and Icons to your App' -redirect_from: '/frontend/custom-app-styling/understanding-the-app-builder-interface/adding-custom-fonts-and-icons-to-your-app' -slug: '/projects/frontend/custom-app-styling/understanding-the-app-builder-interface/adding-custom-fonts-and-icons-to-your-app' ---- - -# Adding custom Fonts and Icons to your App - -To add custom Fonts and Icons to your App Builder project, you must include them in your project's theme resources. You can do this by navigating to the "Font Management" section of your project's Themes area! - -![Custom fonts in App Builder](./_images/ab-custom-styles-fonts-1.png) - -## Ways to add Custom Fonts - -There are two ways to add Custom Fonts to your project: - -- **Upload a new font**: If you have a .ttf (TrueType Font) or .otf (OpenType Font) file, you can upload it directly into your project. - -- **Import a Google Font**: If you want to use a Google Font in your project, search for it by name and select the import button. - -### Selecting a Google Font - -The "Add Google Font" dropdown lets you search for any Google Font by name or select one from the list. Type in the name of the Font you want to use, and click on the list item to import it. - -!["Add Google Font" dropdown](./_images/ab-custom-styles-fonts-2.png) - -Once the Font is imported, it will be available in the App Builder interface for you to select and use. - -## Uploading Custom Fonts - -You can upload a TTF, OTF, WOFF, or WOFF2 font file directly to App Builder using the "Upload Font" button in the App Builder interface. - -!["Upload Font" button](./_images/ab-custom-styles-font-3.png) - -Once the Font is uploaded, it will be available in the App Builder interface for you to select and use. - -## Using an Uploaded Font - -You can specify which fonts get used at the Global, Component Default, or Component Instance level of your App. Any uploaded/imported font will become available in the dropdown list on a font input. - -![Selecting a font](./_images/ab-custom-styles-font-4.png) - -Know that the font name can also be input manually into a CSS rule, such as `font-family: Pacifico;` - -## Adding Custom Icons - -Custom Icons are currently not supported. Please use the Icon Component that's available in the Component Library. diff --git a/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-configurations-in-the-theme-editor.md b/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-configurations-in-the-theme-editor.md deleted file mode 100644 index b260e41..0000000 --- a/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-configurations-in-the-theme-editor.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 'custom-app-styling-understanding-the-app-builder-interface-configurations-in-the-theme-editor' -sidebar_label: 'Configurations in the Theme Editor' -redirect_from: '/frontend/custom-app-styling/understanding-the-app-builder-interface/configurations-in-the-theme-editor' -slug: '/projects/frontend/custom-app-styling/understanding-the-app-builder-interface/configurations-in-the-theme-editor' ---- - -# Configurations in the Theme Editor - -Different Frameworks have different customization options under the active frameworks name under the active frameworks name. When you select hown that Framework's unique options. The categorized sections will appear in the nested left menu under the active frameworks name. - -![Theme variables in the Theme editor](./_images/ab-custom-styles-theme-2.png) - -## Framework Variables - -The variables exposed by each Frameworks section will overwrite the default values set by App Builder. For example, Material UI exposes specific color variables that customize the color palette of your applications. - -![Setting color in Material UI Framework Theme](./_images/ab-custom-styles-theme-3.png) - -Through the "Colors" interface you can quickly change an app's primary color, secondary color, and others. The changes you make through these settings will be reflected across all parts of the app and components that use these colors. - -**Framework Variables are static and do not allow for dynamic (handlebars enabled) inputs**. That said, you're able to dynamically toggle class names and CSS selectors on components to dynamically change styles. - -## Changing Framework Variables - -App Builder provides relevant input types for the Framework Variables. By clicking the slider icon next to the design element, you can open the styling panel for that element and make changes. - -![Editing font settings for typography](./_images/ab-custom-styles-theme-4.png) - -## Changing Framework Defaults using Custom CSS - -You can also use custom CSS to overwrite any default framework values set in the Framework defaults. - -By clicking the `<\>` icon next to the design element. This will open the CSS panel for that element with all of the selector classes pre-defined. - -![Custom CSS interface in App Builder](./_images/ab-custom-styles-theme-5.png) diff --git a/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-using-a-css-design-framework.md b/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-using-a-css-design-framework.md deleted file mode 100644 index def4ec8..0000000 --- a/docs/projects/frontend/custom-app-styling-understanding-the-app-builder-interface-using-a-css-design-framework.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: 'custom-app-styling-understanding-the-app-builder-interface-using-a-css-design-framework' -sidebar_label: 'Using a CSS Design Framework' -redirect_from: '/frontend/custom-app-styling/understanding-the-app-builder-interface/using-a-css-design-framework' -slug: '/projects/frontend/custom-app-styling/understanding-the-app-builder-interface/using-a-css-design-framework' ---- - -# Using a CSS Design Framework - -App Builder is designed to let you use a CSS Design Framework to change the look and feel of your app and all its components, making it look exactly the way you want. This means you can leverage the same popular CSS Frameworks that you're used to and are widely supported/available! - -## Accessing the CSS Framework Menu - -![Accessing the Themes Pane](./_images/ab-custom-styles-css-1.png) - -You'll need to open the CSS Framework Menu to change your app's CSS Framework. You can do this by clicking on the "Theme" button in the App Builder left toolbar. - -This will open the Themes Pane on the right side of the App Builder. Available Frameworks will be shown by default. - -## Selecting a CSS Framework - -Once in the Framework area, you can quickly change Frameworks by clicking the "Activate" button under each Framework. - -## Additional Customization Options - -Different Frameworks have different customization options. When you select a specific Framework, you'll be shown that Framework's unique options. These will appear in the nested left menu under the active frameworks name. - -![Color options for material UI](./_images/ab-custom-styles-1.png) - -## Current State - -The current default styling for all Components in App Builder is based on Material UI (https://material-ui.com/). This is the only supported CSS Design Framework at the moment. However, more will be coming soon! diff --git a/docs/projects/frontend/custom-components-component-library-introduction.md b/docs/projects/frontend/custom-components-component-library-introduction.md deleted file mode 100644 index ad32384..0000000 --- a/docs/projects/frontend/custom-components-component-library-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'custom-components-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/custom-components/component-library/introduction' -slug: '/projects/frontend/custom-components/component-library/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/custom-components-component-library-setting-up-your-local-development-environment.md b/docs/projects/frontend/custom-components-component-library-setting-up-your-local-development-environment.md deleted file mode 100644 index 4512d76..0000000 --- a/docs/projects/frontend/custom-components-component-library-setting-up-your-local-development-environment.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'custom-components-setting-up-your-local-development-environment' -sidebar_label: 'Setting up your Local Development Environment' -redirect_from: '/frontend/custom-components/component-library/setting-up-your-local-development-environment' -slug: '/projects/frontend/custom-components/component-library/setting-up-your-local-development-environment' ---- - -# Setting up your Local Development Environment - -...coming soon. diff --git a/docs/projects/frontend/custom-components-component-library-spec-tbd.md b/docs/projects/frontend/custom-components-component-library-spec-tbd.md deleted file mode 100644 index 32bc13f..0000000 --- a/docs/projects/frontend/custom-components-component-library-spec-tbd.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'custom-components-spec-tbd' -sidebar_label: 'SPEC TBD' -redirect_from: '/frontend/custom-components/component-library/spec-tbd' -slug: '/projects/frontend/custom-components/component-library/spec-tbd' ---- - -# SPEC TBD - -...coming soon. diff --git a/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-a-callback.md b/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-a-callback.md deleted file mode 100644 index f7a32db..0000000 --- a/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-a-callback.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 'custom-frontend-logic-calling-a-function-from-a-callback' -sidebar_label: 'Calling a function from a callback' -redirect_from: '/frontend/custom-frontend-logic/calling-a-function-from-a-callback' -slug: '/projects/frontend/custom-frontend-logic/calling-a-function-from-a-callback' ---- - -# Calling a Function from a Callback - -This article describes how developers can call a function from a Callback. - ---- - -There are multiple ways to execute a Function in App Builder. One way is on a Callback. App Builder lets developers set code to run on a callbacks that are trigged on Request responses ("On Success" or "On Error"). - -![Configuring function to run on callback](./_images/ab-custom-frontend-logic-calling-a-function-from-a-callback-1.png) - -Inside the callback function, you can execute a function object by referencing its name and calling its `function()` method. - -```js -(data) => { - const result = myCustomFunction.function(); - // more code -}; -``` - -Once saved, the Function will be executed whenever that callback is executed. diff --git a/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-a-function.md b/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-a-function.md deleted file mode 100644 index 7a07260..0000000 --- a/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-a-function.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 'custom-frontend-logic-calling-a-function-from-a-function' -sidebar_label: 'Calling a function from a function' -redirect_from: '/frontend/custom-frontend-logic/calling-a-function-from-a-function' -slug: '/projects/frontend/custom-frontend-logic/calling-a-function-from-a-function' ---- - -# Calling a Function from a Function or Script - -This article describes how developers can call a function from a function or script. - ---- - -There are multiple ways to execute a Function in App Builder. One way is in other functions and scripts. - -![Configuring function to run in other function or script](./_images/ab-custom-frontend-logic-calling-a-function-from-a-function-1.png) - -Inside another function or a script, you can execute a function object by referencing its name and calling its `function(...args)` method and passing any arguments. - -```js -return function (arg1, arg2) { - // Code calls another function and gets result - const result = myCustomFunction.function(arg1); - - // Returns sum of both values - return result + arg2; -}; -``` - -Once saved, the Function will be executed whenever the host function or script is executed. diff --git a/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-an-event.md b/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-an-event.md deleted file mode 100644 index ad3ac5d..0000000 --- a/docs/projects/frontend/custom-frontend-logic-calling-a-function-from-an-event.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: 'custom-frontend-logic-calling-a-function-from-an-event' -sidebar_label: 'Calling a function from an event' -redirect_from: '/frontend/custom-frontend-logic/calling-a-function-from-an-event' -slug: '/projects/frontend/custom-frontend-logic/calling-a-function-from-an-event' ---- - -# Calling a Function from an Event - -This article describes how developers can call a function from an event. - ---- - -There are multiple ways to execute a Function in App Builder. One way is to use an Event. App Builder lets developers set event listeners on Components in the **Events** section of the Component's **Settings** (see screenshot above). - -![Configuring function to run on event](./_images/ab-triggering-events-in-the-app-calling-frontend-functions-introduction-1.png) - -Once in the Events configuration pane of a Component, a developer can add a specific Event type by selecting it from the list of available Events. This will create an "Action" that can then get configured to "Run Function" selected from the list of available functions. - -Once configured, the Function will be executed whenever that Event is detected. diff --git a/docs/projects/frontend/custom-frontend-logic-calling-frontend-functions.md b/docs/projects/frontend/custom-frontend-logic-calling-frontend-functions.md deleted file mode 100644 index e06383f..0000000 --- a/docs/projects/frontend/custom-frontend-logic-calling-frontend-functions.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: 'custom-frontend-logic-calling-frontend-functions' -redirect_from: '/frontend/custom-frontend-logic/calling-frontend-functions' -slug: '/projects/frontend/custom-frontend-logic/calling-frontend-functions' ---- - -# Calling Frontend Functions - -This article describes how developers can call frontend functions in App Builder\_\_\_ - ---- - -In App Builder, developers can add custom frontend logic by calling frontend functions. This is useful when you want to perform an action on the client side, yet encapsulate your code in a reusable function. - -![Calling Frontend Functions](./_images/ab-custom-frontend-logic-calling-frontend-functions-1.png) - -To call a frontend function, use the `function` method on the Function's state object: - -```javascript -myCustomFunction.function(...args); -``` - -The `function` method will return a promise if it is asynchronous or the function result if it is synchronous. Know that functions can be called in any area that allows for Javascript to be written, or any input where handlebars expressions are enabled (example: `{{ myFunction.function(...args) }}`). diff --git a/docs/projects/frontend/custom-frontend-logic-creating-custom-frontend-functions-readme.md b/docs/projects/frontend/custom-frontend-logic-creating-custom-frontend-functions-readme.md deleted file mode 100644 index c9d0ff5..0000000 --- a/docs/projects/frontend/custom-frontend-logic-creating-custom-frontend-functions-readme.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: 'custom-frontend-logic-creating-custom-frontend-functions-readme' -sidebar_label: 'Custom Frontend Functions' -slug: '/projects/frontend/custom-frontend-logic/creating-custom-frontend-functions-readme' ---- - -# Custom Frontend Functions - -You can declare JavaScript functions in either the global or local scope. These functions house application logic, which makes it easy to re-use your code. - -- [Creating Custom Frontend Functions](custom-frontend-logic-creating-custom-frontend-functions.md): Learn how to create custom functions in the App Builder. diff --git a/docs/projects/frontend/custom-frontend-logic-creating-custom-frontend-functions.md b/docs/projects/frontend/custom-frontend-logic-creating-custom-frontend-functions.md deleted file mode 100644 index 5560e53..0000000 --- a/docs/projects/frontend/custom-frontend-logic-creating-custom-frontend-functions.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: 'custom-frontend-logic-creating-custom-frontend-functions' -sidebar_label: 'Creating Custom Frontend Functions' -redirect_from: '/frontend/custom-frontend-logic/creating-custom-frontend-functions' -slug: '/projects/frontend/custom-frontend-logic/creating-custom-frontend-functions' ---- - -# Creating Custom Frontend Functions - -This article describes how developers can create custom frontend functions in App Builder. - ---- - -Creating new Function in App Builder can be done by using the "Functions" tab in the left sidebar and clicking the "+" button. This will open the "Create New Function" modal. - -In the "Name" field, developers can give their Function a name. You can also optionally specify a return type and arguments for the Function. - -The "Javascript Code" field is where developers will write their custom logic for the Function. This can be done in JavaScript. - -Once satisfied with your Function, click the "Save" button to save it. Your new Function will now be available for use in App Builder (in the Global or Local namespace). - -![Create a new Function in App Builder](./_images/ab-custom-frontend-logic-creating-custom-frontend-functions-1.png) - -## Arguments - -Arguments can be specified when creating a new Function. These arguments will be available to use in the body of the function. Make sure to set the argument names in both the function code and the Arguments list, as the Arguments list will enhance your function with added validations. - -Arguments can be given a name and a type (string, number, bigint, boolean, symbol, or object) and declared as a single value or list of the specified type. - -## Return Type - -A return type can be optionally specified when creating a new Function. The return type can be string, number, bigint, boolean, symbol, or object. If no return type is specified, the function will default to returning "void". diff --git a/docs/projects/frontend/custom-frontend-logic-introduction.md b/docs/projects/frontend/custom-frontend-logic-introduction.md deleted file mode 100644 index ede3711..0000000 --- a/docs/projects/frontend/custom-frontend-logic-introduction.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: 'custom-frontend-logic-introduction' -redirect_from: '/frontend/custom-frontend-logic/introduction' -slug: '/projects/frontend/custom-frontend-logic/introduction' ---- - -# Custom Frontend Logic Introduction - -This article describes how developers can add custom state entries in their front-end applications. - ---- - -![Functions screen in edit mode](./_images/ab-custom-frontend-logic-introduction-1-updated.png) - -The idea of (Custom Frontend Logic) Functions in App Builder is the ability to author and use Javascript functions locally and globally within App Builder front-end applications. This enables developers to easily modularize and reuse any custom code they write. - -In the following sections, we'll break down exactly how to do this and explore some tips for getting the most out of Custom Frontend Logic Functions. diff --git a/docs/projects/frontend/custom-frontend-logic-typed-arguments-in-frontend-functions.md b/docs/projects/frontend/custom-frontend-logic-typed-arguments-in-frontend-functions.md deleted file mode 100644 index 438ea77..0000000 --- a/docs/projects/frontend/custom-frontend-logic-typed-arguments-in-frontend-functions.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'custom-frontend-logic-functions-typed-arguments-in-frontend-functions' -sidebar_label: 'Typed arguments in frontend functions' -redirect_from: '/frontend/custom-frontend-logic/functions/typed-arguments-in-frontend-functions' -slug: '/projects/frontend/custom-frontend-logic/functions/typed-arguments-in-frontend-functions' ---- - -# Typed arguments in frontend functions - -...coming soon. diff --git a/docs/projects/frontend/custom-frontend-logic-using-installed-js-libraries-in-scripts.md b/docs/projects/frontend/custom-frontend-logic-using-installed-js-libraries-in-scripts.md deleted file mode 100644 index 1e6fc21..0000000 --- a/docs/projects/frontend/custom-frontend-logic-using-installed-js-libraries-in-scripts.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 'custom-frontend-logic-using-installed-js-libraries-in-scripts' -sidebar_label: 'Using Installed JS LIbraries in scripts' -redirect_from: '/frontend/custom-frontend-logic/using-installed-js-libraries-in-scripts' -slug: '/projects/frontend/custom-frontend-logic/using-installed-js-libraries-in-scripts' ---- - -# Using Installed JS LIbraries in Functions and Scripts - -This article describes how developers can use installed JS LIbraries in scripts and functions - ---- - -App Builder ships with several Javascript libraries that can perform various tasks in scripts and functions. These libraries are: - -- [Lodash](https://lodash.com/): A utility library that provides various functions for manipulating objects and arrays. - -- [Moment](https://momentjs.com/): A library for parsing, validating, and formatting dates. - -- [Luxon](https://moment.github.io/luxon/#/): A library for working with dates and times. - -- [Mathjs](https://mathjs.org/): A library for performing various mathematical operations. - -Any of these libraries can be added to a project in the Settings > Libraries section. Once a library has been added, it can be used in scripts and functions by referencing the global variable created for it. - -Developers have the ability to set the global variable in the "Alias" input of the installed Library. Additionally, they can select the version number that they wish to use. - -![Configuring a Library](./_images/ab-triggering-events-in-the-app-calling-frontend-functions-introduction-1.png) - -## Using Libraries in Code - -Once a library has been installed, it can be used in code by referencing the global variable set for it. - -For example, to use the Lodash library in code, the `_` global variable can be used: - -```javascript -return function (userSettings) { - globalUserConfig.setValue( - // Using lodash "assign" method - _.assign( - { - themeMode: 'dark', - timeZone: 'GMT+5', - local: 'en', - }, - userSettings - ) - ); -}; -``` - -These libraries can be thought of as being accessed and used no differently than any other Javascript code included in the project. diff --git a/docs/projects/frontend/data-binding-example-binding-custom-entries-to-card-component.md b/docs/projects/frontend/data-binding-example-binding-custom-entries-to-card-component.md deleted file mode 100644 index 29822fb..0000000 --- a/docs/projects/frontend/data-binding-example-binding-custom-entries-to-card-component.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 'data-binding-example-binding-custom-entries-to-card-component' -sidebar_label: 'Binding Custom Entries to a Card' -redirect_from: '' -slug: '/projects/frontend/data-binding-example-binding-custom-entries-to-card-component' ---- - -# Binding Custom Entries to a Card - -This example will demonstrate how to access data in **Custom Entries** for use in a *Card* component. - -You will need a Page with no content. - -1. Select a *Card* component from the **Layout** section of the Components pane and drag it onto your page. -2. Select a *Typography* component from the **Common** section of the Components pane and drag it onto the *Card Content* area of your *Card* component. -3. Select an *Image* component from the **Other** section of the Components pane and onto the *Card Content* area of your *Card* component. -4. The *Typography* component should be above the *Image* component. If not, open the Page Structure pane and adjust the components so they are in the proper order. - -Your page should look like this. - -![Adding Card Component](./_images/ab-state-card-custom-entries-1.png) - - -Next, you will set up the data the *Card* component will use by creating four **Custom Entries** in the Local State. - -1. Click the **State** icon on the left menu and ensure the Local tab is selected. -2. Click the "+" at the top of the State pane to create a new State, which opens a small pop-up window. -3. Enter "userPic" in the **Name** field, set the **Type** to String, and enter "https://m.media-amazon.com/_images/M/MV5BNGJmMWEzOGQtMWZkNS00MGNiLTk5NGEtYzg1YzAyZTgzZTZmXkEyXkFqcGdeQXVyMTE1MTYxNDAw._V1_.jpg" in the **Default Value** field. -4. Click "Create". - -Your first custom entry should look like this. - -![Creating A State](./_images/ab-state-card-custom-entries-2.png) - -Let's add the remaining **Custom Entries**. - -As before, click the "+" to add a new State, enter the values indicated for each custom entry below, and click "Create". - -For the **second** custom entry, enter the following: -- **Name** - userName -- **Type** - String -- **Default Value** - John Wick - -For **third** custom entry, enter the following: -- **Name** - big -- **Type** - String -- **Deafult Value** - 500 - -For the **fourth** custom entry, enter the following: -- **Name** - role -- **Type** - String -- **Deafult Value** - Big Boss - -Now that you have all your **Custom Entries** set up, you will add data to the *Card* component. - -1. Select your *Card* component, which opens the *Properties* pane. -2. Click the *Styles* tab to switch to the *Styles* pane and expand the **Size** section. -3. Next to the **Width** field, click the three-way icon "\<\>" and switch to State format. -4. Select "big" from the drop-down inside the **Width** field, which sets the width of your *Card* component using your custom entry. -5. Click the *Properties* tab to switch back to the *Properties* pane. -6. In the **Custom Properties** section, click the gear icon to the right of the **Header**, which opens a pop-up settings window. -7. Next to the **Title** field, click the three-way icon "\<\>" and switch to the code format "{}". -8. Enter `Role: {{role.value}}` in the **Title** field. -9. The **value** of the **role** custom entry will appear as the title of your *Card*. - -![Adding a Title](./_images/ab-state-card-custom-entries-3.png) - -Next, you will add text to the *Typography* component to your *Card* from the **userName** custom entry. - -1. Select the *Typography* component on your *Card*, which opens the *Properties* pane. -2. Next to the **Text** field, click the three-way icon "\<\>" and switch to the State format. -3. Select "userName" from the drop-down inside the **Text** field. -4. Your *Typography* component should display **John Wick**. - -At this point your *Card* should look like this. - -![Card in Progress](./_images/ab-state-card-custom-entries-4.png) - -You will now add the final piece, which is setting up the image to display. - -1. Select the *Image* component on your card, which opens the *Properties* pane. -2. Next to the **Source** field, click the three-way icon "\<\>" and switch to the code format "{}". -3. Enter `{{userPic.value}}` in the **Source** field. - -Your completed *Card* should look like this. - -![Completed Card](./_images/ab-state-card-custom-entries-5.png) - - - - diff --git a/docs/projects/frontend/data-binding-example-binding-function-to-looper-component.md b/docs/projects/frontend/data-binding-example-binding-function-to-looper-component.md deleted file mode 100644 index 2acc238..0000000 --- a/docs/projects/frontend/data-binding-example-binding-function-to-looper-component.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 'data-binding-example-binding-function-to-looper-component' -sidebar_label: 'Binding a Function to a Looper' -redirect_from: '' -slug: '/projects/frontend/data-binding-example-binding-function-to-looper-component' ---- - -# Binding a Function to a Looper - -This example will demonstrate how to access data in a **Function** for use in a *Looper* component. - -You will set up your Page and then build your **Function** so you can dynamically add data to your components. - -1. Select your Page on the canvas, which opens the *Properties* pane. -2. Select the *Styles* tab and set the **Background Color** to black. -3. Click the arrow next to the Page name at the top of the *Styles* pane to return to the Components pane. -4. Select a *Heading* component from the **Common** section of the Components pane and drag it onto your page. -5. Enter "Paella Recipe" into the **Text** field and set the drop-down in the **Tag** field to H1 on the *Properties* pane. -6. Click the the *Styles* pane and set the drop-down in the **Variant** field to H1. -7. Check that the **Font Color** is set to Initial and the **Align** is set to Inherit. -8. Select a *Looper* component from the **Data** section of the Components pane and drag it onto your page. -9. Click the *Styles* tab in the right-hand pane and select the *grid* icon under **Display**. -10. In the **Grid Template** field enter 248.016px 392.016px / 258.656px 258.672px 258.672px / none. -11. In the **Grid Template Columns** field enter 1fr 1fr 1fr. -12. In the **Grid Template Rows** field enter 248.016px 392.016px. -13. In the **Grid Column Gap** field enter 16px. -14. In the **Grid Row Gap** field enter 16px. -15. In the **Grid Gap** field enter 16px. -16. Select a *Card* component from the **Data** section of the Components pane and drag it onto your *Looper*. -17. Click the *Styles* tab in the right-hand pane and set the **Background Color** to `#181616`. -18. Select a *Typography* component from the **Common** section of the Components pane and drag it onto the *Card Content* component. - -Your page should look similar to this. - -![Looper Page](./_images/ab-state-looper-functions-1.png) - -It's now time to build your **Function**. - -11. Click the function icon on the left-hand menu to open the *Functions* pane and select the *Global* tab. -12. Click the "+" on the top of the *Functions* pane to create a new **Function**. - -![Creating a Function](./_images/ab-state-looper-functions-2.png) - -13. Enter "spanishRecipe" at the top on the *Functions* pane where it says **newFunction**. This will be the name of your new function. -14. Click the expand arrow in the **code area** of the *Functions* pane to open the the **code panel**. -15. Copy and paste the following code into the **code panel** and click "Done". - -~~~js - return [ -  {  -  title: 'Step', -    subheader: 'Set the Rice', -    content: 'We will need some good rice', -    media: 'https://ucarecdn.com/02ef0351-393c-46f2-a4c5-fba8bc9a2f5d/looper1.png' -  }, -  { -    title: 'Step', -    subheader: 'Add some seafood', -    content: 'And some delicacies.', -    media: 'https://ucarecdn.com/9f209dae-009c-415d-ae3a-c12719318a38/looper2.png' - -  }, -   { -    title: 'Step', -    subheader: 'The secret', -    content: 'The fish broth.', -    media: 'https://ucarecdn.com/b79b1adf-c5ad-4c33-9ad3-8302cb6cef74/looper3.png' -  }, -   { -    title: 'Step', -    subheader: 'Enjoy!', -    content: 'This impressive paella is a perfect party dish and a fun meal to cook together with your guests.', -    media: 'https://ucarecdn.com/90574ffc-3d95-47e2-8d0d-627b66d91be9/looper4.png' -  } - ] -~~~ - -We will now add the *Function* data to the *Looper* component. - -16. Select your *Looper* on the Page, which opens the *Properties* pane. -17. Enter `{{ spanishRecipe() }}` in the **Loop Data** field and the word *item* in the **Item Name** field. - -The *Looper* will display four blank Cards on your Page, which is how many objects are in your **Function**. - -![Looper Output](./_images/ab-state-looper-functions-3.png) - -18. Select your *Card* component, which opens the *Properties* pane. -19. In the **Custom Properties** section, click the gear icon to the right of the **Header** item, which opens a pop-up settings window. -20. Next to the **Title** field, click the three-way icon "\<\>" and switch to the code format "{}". -21. Enter `{{ item.title + ' ' + (itemIndex+1)}}` in the **Title** field. -22. Next to the **Subheader** field, click the three-way icon "\<\>" and switch to the code format "{}". -23. Enter `{{ item.subheader}}` in the **Subheader** field and click the "x" to close the pop-out. - -![Adding Card Header Data](./_images/ab-state-looper-functions-4.png) - -24. Click the gear icon to the right of the **Media** item, which opens a pop-up settings window. -25. Next to the **Image** field, click the three-way icon "\<\>" and switch to the code format "{}". -26. Enter `{{item.media}}` in the **Image** field, set the **Height** to 120 px, and click "x" to close the pop-out. -27. Select the *Typography* component on any *Card*, which opens the *Properties* pane. -28. Next to the **Text** field, click the three-way icon "\<\>" and switch to the code format "{}". -29. Enter `{{item.content}}` in the **Text** field, and click "x" to close the pop-out. - -![Adding Typography Data](./_images/ab-state-looper-functions-5.png) - -Once you start adding data elements to your components you can see the data immediately on the page. - -![Finished Page](./_images/ab-state-looper-functions-6.png) - -As you can, see the *Looper* component is an extremely powerful component for building dynamic pages. - - - diff --git a/docs/projects/frontend/data-binding-example-binding-request-to-looper-component.md b/docs/projects/frontend/data-binding-example-binding-request-to-looper-component.md deleted file mode 100644 index 8d320f0..0000000 --- a/docs/projects/frontend/data-binding-example-binding-request-to-looper-component.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 'data-binding-example-binding-request-to-looper-component' -sidebar_label: 'Binding A Request to a Looper' -redirect_from: '' -slug: '/projects/frontend/data-binding-example-binding-request-to-looper-component' ---- - -# Binding a Request to a Looper - -This example will demonstrate how to access data in a **Request** for use in a *Looper* component. - -You will need a Page with no content and a **Request** called "queryUserList" that contains an array of objects with the following properties: **firstName**, **lastName**, **email**, **media**, **birthdate**, and **team**. - -1. Set the Viewport size to 926; this can be found at the top of the application builder. -2. Select a *Header* component from the **Layout** section of the Components pane and drag it onto your page. -3. Click the *Styles* tab in the right-hand pane and set the *grid* icon under **Background Color** to `#dfb94`. -4. Select a *Heading* component from the **Common** section of the Components pane and drag it onto your *Header*. -5. Enter "Fantasy Sports Pool" into the **Text** field and set the drop-down in the **Tag** field to H3 on the *Properties* pane. -6. Click the *Styles* pane and set the drop-down in the **Variant** field to H3. -7. Check that the **Font Color** is set to Initial and the **Align** is set to Inherit. -8. Expand the **Typography** section and set the **Color** to `#ffffff`. -9. Select a *Container* component from the **Common** section of the Components pane and drag it onto your Page. -10. At the top of the *Properties* pane to the right of the arrow, enter "Users" as the container name. -11. Click the *Styles* tab in the right-hand pane and set the **Display** to Flex and the **Direction** to column (the down arrow). -12. Expand the **Flex Child** section and set **Flex Grow** and **Flex Shrink** to 1. -13. Expand the **Size** section and set the **Height** to 100 px. -14. Select another *Container* component from the **Common** section of the Components pane and drag it onto your first *Container*. -15. Click the *Styles* tab in the right-hand pane and set the **Display** to Flex. -16. Expand the **Size** section and set the **Width** to 100%. -17. Expand the **Border** section and click the large button with a rectangle; this allows you to independently set properties on the Top, Right, Bottom, and Left borders. -18. Click the gear icon next to the **Bottom** item to open the settings pop-out. -19. Set the **Style** to solid, the **Width** to 4, and the **Color** to `#f5b609`, and click "x" to close the pop-out. -20. Select a *Heading* component from the **Common** section of the Components pane and drag it onto your second *Container*. -21. Enter "Users" into the **Text** field and set the drop-down in the **Tag** field to H3 on the *Properties* pane. -22. Click the *Styles* pane and set the drop-down in the **Variant** field to H3. -23. Check that the **Font Color** is set to Primary and the **Align** is set to Inherit. - -At this point, your page should look like this. - -![Looper Request Start Page](./_images/ab-state-looper-request-1.png) - -24. Select a *Looper* component from the **Data** section of the Components pane and drag it onto your Users *Container*. -25. Click the *Styles* pane, expand the **Size** section, and set the **Height** to 100 px. -26. Select a *Card* component from the **Common** section of the Components pane and drag it onto your *Looper*. -27. Click the *Styles* pane, expand the **Size** section, and set the **Width** to 100 %. -28. Expand the **Border** section and set the **Radius** to 15 px. -29. Select a *Container* component from the **Common** section of the Components pane and drag it onto your *Card Content*. -30. At the top of the *Properties* pane to the right of the arrow, enter "Content" as the container name. -31. Click the *Styles* tab in the right-hand pane and set the **Display** to Flex. -32. Expand the **Size** section and set the **Height** to 120 px. -33. Select a second *Container* component from the **Common** section of the Components pane and drag it onto your Content *Container*. -34. At the top of the *Properties* pane to the right of the arrow, enter "Image" as the container name. -35. Click the *Styles* pane, expand the **Size** section, and set the **Width** to 100 px. -36. Select a third *Container* component from the **Common** section of the Components pane and drag it onto your Content *Container*. -37. At the top of the *Properties* pane to the right of the arrow, enter "Text" as the container name. -38. Select an *Image* component from the **Other** section of the Components pane and drag it onto your Image *Container*. -39. Click the *Styles* pane, expand the **Size** section, and set the **Height** to 100 %. -40. Select a *Typography* component from the **Common** section of the Components pane and drag it onto your Text *Container*. -41. Select a second *Typography* component from the **Common** section of the Components pane and drag it onto your Text *Container*. -42. Click the *Styles* pane and enter "Team: none", without quotes, into the **Text** field. - -Your page should now look like this. - -![Looper Request Page without Data](./_images/ab-state-looper-request-2.png) - -Now that all your components have been set up on the page, you are ready to add data. - -43. Click the Request icon (cloud) on the left-hand menu, which opens the *Requests* pane. -44. Click on the **Global** tab and select your request *queryUsersList*, which opens the *Query* panel. -45. Click the "Run" button at the top of the panel. -46. A *Response* window will open to the right of the *Query* panel. - -You now have data that you can test in your components. - -![Looper Request Response](./_images/ab-state-looper-request-3.png) - -47. Select your *Looper* component. -48. On the *Properties* pane in the **Custom Properties** section, enter `{{ queryUserList?.data }}` in the **Loop Data** field. -49. Select your *Card* component. -50. On the *Properties* pane in the **Custom Properties** section, click the gear icon to the right of the **Header**, which opens a pop-up settings window. -51. Next to the **Title** field, click the three-way icon "\<\>" and switch to the code format "{}". -52. Enter `{{item.firstName+" "+item.lastName}}` in the **Title** field. -53. Next to the **Subheader** field, click the three-way icon "\<\>" and switch to the code format "{}". -54. Enter `{{item.email}}` in the **Subheader** field and click "x" to close the pop-out. - -![Looper Request Response](./_images/ab-state-looper-request-4.png) - -55. Select your *Image* component. -56. On the *Properties* pane, next to the **Source** field, click the three-way icon "\<\>" and switch to the code format "{}". -58. Enter `{{item.media}}` in the **Source** field. -59. Select the first *Typography* component. -60. On the *Properties* pane, next to the **Text** field, click the three-way icon "\<\>" and switch to the code format "{}". -61. Enter `Birth Date: {{lux.DateTime.fromISO(item.birthDate, "DD-MM-YYYY").toFormat('MMMM d, yyyy')}}` in the **Text** field. -62. Select the second *Typography* component. -63. On the *Properties* pane, next to the **Text** field, click the three-way icon "\<\>" and switch to the code format "{}". -64. Enter `Team: {{item.team}}` in the **Text** field. - -Your completed page should look something like this. - -![Looper Request Completed Page](./_images/ab-state-looper-request-5.png) - -This example gives you some idea of how to access **Request** data from inside a *Looper* and use it in any component within the *Looper*. \ No newline at end of file diff --git a/docs/projects/frontend/data-binding-example-binding-request-to-table-component.md b/docs/projects/frontend/data-binding-example-binding-request-to-table-component.md deleted file mode 100644 index 6eeee9b..0000000 --- a/docs/projects/frontend/data-binding-example-binding-request-to-table-component.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 'data-binding-example-binding-request-to-table-component' -sidebar_label: 'Binding a Request to a Table' -redirect_from: '' -slug: '/projects/frontend/data-binding-example-binding-request-to-table-component' ---- - -# Binding a Request to a Table - -This example will demonstrate how to access data in a **Request** for use in a *Table* component. - -You will need a Page with no content and a **Request** called *allTasks* that contains an array of objects with the following properties: **id**, **name**, **description**, **duedate**, **startdate**, and **status**. - -Adding a new *Table* component to your page creates a default set of columns. The columns are generated based on the array in the *Data* field on the *Properties* pane. - -Each object in the array represents a **row** in a *Table*, and the **properties** in the object represent the **columns** in a *Table*. - -Each object's **id** property is a *primary key*, which is required for the column to display in a *Table*. - -The following is an example of an object's appearance in a data array. - -~~~ js -{ -"id": 1, -"lastName": "Snow", -"firstName": "Jon", -"age": 35, -"birthday": "1975-03-12", -"balance": 186  -} -~~~ - -1. Select a *Table* component from the **Common** section of the Components pane and drag it onto your page. - -![Adding Table Component](./_images/ab-state-table-requests-1.png) - -2. In the *Properties* pane, click the expand arrow in the **Data** field to open the **code panel**. - -![Deleting the Array](./_images/ab-state-table-requests-2.png) - -3. Select the array, delete it, and click "Done". -4. Type your **Request** name into the **Data** field like this `{{allTasks.data}}`. -5. You must click the "Auto Generate Columns" button to create new columns from the data in your **Request**. -6. A confirmation window opens for you to confirm your action. -7. Click "Delete" to create your new columns. - -![Adding Table Component](./_images/ab-state-table-requests-3.png) - -Each column has its own properties that you can customize independently of others. - -You can see that some column sizes and names differ from what you would like them to be, so let's fix that. - -8. Scroll down to the **Columns*** section in the *Properties* pane. -9. Click the gear icon next to the **Duedate** column, which opens a pop-out settings pane. -10. Enter "Due Date" in the **Name** field and click the "X" to close the pop-out. - -![Adjusting Columns](./_images/ab-state-table-requests-4.png) - -11. Click the gear icon next to the **Startdate** column to open the pop-out settings pane. -12. Enter "Start Date" in the **Name** field and click the "X" to close the pop-out. -12. Click the gear icon next to the **Description** column to open the pop-out. -13. Enter 150 in the **Width** field and click the "X" to close the pop-out. -14. Let's hide the **Id** column because we don't need to see it. Click the gear icon next to the **Id** column to open the pop-out settings pane. -15. Switch the "Hide" toggle to **on** to hide the **Id** column and click the "X" to close the pop-out. - -![Hiding Columns](./_images/ab-state-table-requests-5.png) - -You now have all your column properties how you want them to display, and the data in your **Request** displays in your *Table*. - -![Finished Table](./_images/ab-state-table-requests-6.png) \ No newline at end of file diff --git a/docs/projects/frontend/data-binding.md b/docs/projects/frontend/data-binding.md deleted file mode 100644 index 681245e..0000000 --- a/docs/projects/frontend/data-binding.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: 'data-binding' -sidebar_label: 'Data Binding' -slug: '/projects/frontend/data-binding' ---- - -# Data Binding - -Data binding in 8base allows you to bind UI components to specific data sources. You can specify which data source or data field should be connected to a particular element. This creates a link between the UI and the data, ensuring that the displayed data is always up-to-date. - -The following pages show how to bind different types of data: - -- [Binding a Request to a Table](data-binding-example-binding-request-to-table-component.md): Learn how to access data in a Request for use in a Table component. -- [Binding Custom Entries to a Card](data-binding-example-binding-custom-entries-to-card-component.md): Learn how to access data in Custom Entries for use in a Card component. -- [Binding a Function to a Looper](data-binding-example-binding-function-to-looper-component.md): Learn how to access data in a Function for use in a Looper component. -- [Binding A Request to a Looper](data-binding-example-binding-request-to-looper-component.md): Learn how to access data in a Request for use in a Looper component. diff --git a/docs/projects/frontend/data-in-the-frontend-(state)-data-scopes-for-app-builder-elements-theme.md b/docs/projects/frontend/data-in-the-frontend-(state)-data-scopes-for-app-builder-elements-theme.md deleted file mode 100644 index 5b3505f..0000000 --- a/docs/projects/frontend/data-in-the-frontend-(state)-data-scopes-for-app-builder-elements-theme.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'data-in-the-frontend-(state)-data-scopes-for-app-builder-elements-theme' -sidebar_label: '- Theme' -redirect_from: '/frontend/data-in-the-frontend-(state)/data-scopes-for-app-builder-elements/theme' -slug: '/projects/frontend/data-in-the-frontend-(state)/data-scopes-for-app-builder-elements/theme' ---- - -# - Theme - -...coming soon. diff --git a/docs/projects/frontend/data-in-the-frontend-adding-custom-state-data-entries.md b/docs/projects/frontend/data-in-the-frontend-adding-custom-state-data-entries.md deleted file mode 100644 index 31361c6..0000000 --- a/docs/projects/frontend/data-in-the-frontend-adding-custom-state-data-entries.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 'data-in-the-frontend-adding-custom-state-data-entries' -sidebar_label: 'Adding custom state data entries' -redirect_from: '/frontend/data-in-the-frontend/adding-custom-state-data-entries' -slug: '/projects/frontend/data-in-the-frontend/adding-custom-state-data-entries' ---- - -# Adding custom state data entries - -This article describes how developers can add custom state entries in their front-end applications. - ---- - -## What are custom state data entries? - -Custom state data entries allow developers to add extra information to their applications' front-end state. This extra information can be used to track application data or temporarily persist data on the client side (in `localStorage`). - -![Creating a custom state](./_images/ab-data-in-the-frontend-understanding-local-vs-global-state-objects-1.png) - -## How do I add a custom state data entry? - -To add a custom state data entry, developers should open the State Management pane in their project and click the "+" button. This will open the "Add Custom State" dialog, where developers can choose a key, data type, and default value for their new state entry. - -**Available types:** - -- Boolean -- Number -- Object -- String -- Array - -Whether you create the custom state entry within the global or local namespace will affect its visibility to other elements' scopes. See [understanding local vs. global state](./data-in-the-frontend-understanding-local-vs-global-state-objects.md) documentation for further detail. - -## What are some use cases for custom state data entries? - -Custom state data entries can be used for a variety of purposes, including: - -- Tracking application data - : e.g. a "currentUser" entry that stores information about the logged-in user - -- Temporarily storing data on the client side - : e.g. a "cart" entry that stores information about items in a user's shopping cart - -- Debugging purposes - : e.g. an "isDebug" flag that enables/disables certain features in the application for debugging purposes - -They are a very flexible feature of App Builder that can enable anything from custom authentication flows to new theming configurations. diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-components.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-components.md deleted file mode 100644 index ba86f2b..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-components.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements-components' -sidebar_label: 'Components' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/components' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/components' ---- - -# Data Scopes for App Builder Components - -This article describes how developers can expect data scopes to be applied when working with Components. - ---- - -When working with App Builder Components, developers can expect data scopes to be applied in the following way: - -## Local Scope - -When a Component is added to a Page, a managed read-only state entry is created for it in the Local state of the page. The Component's scope then allows it to reference the state of any elements (other Components, Functions, Layout, and Requests) contained within the same Local namespace (Page). - -## Global Scope - -Components are never added to the global state namespace, as all Component instances exist within the context of a Page or Layout. However, a Component's scope gives it visibility into the global state. This allows Component's to read global state attributes, as well as write global custom state attributes. diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-functions.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-functions.md deleted file mode 100644 index ad7821f..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-functions.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements-functions' -sidebar_label: 'Functions' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/functions' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/functions' ---- - -# Data Scopes for App Builder Functions - -This article describes how developers can expect data scopes to be applied when working with Functions. - ---- - -![App Builder Requests State](./_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-functions-1.png) - -When working with App Builder Functions, developers can expect data scopes to be applied in the following way: - -## Local Scope - -If a Function is created within a Local namespace, that Function's state will be read-only accessible by only elements (other Functions, Requests, and Components) contained within the same Local namespace (Page). - -Additionally, the function will only have visibility to element states that expose their state to the same local namespace. Custom state entries are always read/write accessible, whereas most states created and managed by App Builder are always read-only. - -## Global Scope - -If a Function is created within the Global namespace, that Function's state will be read-only accessible by all App Builder elements, regardless of the namespace. - -However, the Function will only have visibility to element states that are also Global namespaces. This can be easily conceptualized as a parent (Global) and child (Local) relationship, where the child has visibility into the parent while the parent doesn't have visibility of their children. - -## Summary - -To summarize, when working with Functions within App Builder, developers can expect data scopes to be applied in the following way: - -- If a Function is created within a Local namespace, that Function's state will be read-only accessible by only elements (other Functions, Requests, and Components) contained within the same Local namespace (Page). - -- If a Function is created within the Global namespace, that Function's state will be read-only accessible by all App Builder elements, regardless of the namespace. diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-layouts.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-layouts.md deleted file mode 100644 index 17e04be..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-layouts.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements-layouts' -sidebar_label: 'Layouts' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/layouts' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/layouts' ---- - -# Data Scopes for App Builder Layouts - -This article describes how developers can expect data scopes to be applied when working with Layouts. - ---- - -![App Builder Layout State](./_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-layouts-1.png) - -When working with App Builder Layouts, developers can expect data scopes to be applied in the following way: - -## Local Scopes - -A local namespace is created for every Layout created in App Builder. This allows developers to add custom state entries with reading/write permissions from any element within the Layout; Functions, Requests, and Components. - -## Global Scopes - -Any Layout has access to any global state entries in the App, such as Resources, Router, and any custom state entries added to the global state. diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-requests.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-requests.md deleted file mode 100644 index 580e999..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-requests.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements-requests' -sidebar_label: 'Requests' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/requests' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/requests' ---- - -# Data Scopes for App Builder Requests - -This article describes how developers can expect data scopes to be applied when working with Requests. - ---- - -![App Builder Requests State](./_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-requests-1.png) - -When working with App Builder Requests, developers can expect data scopes to be applied in the following way: - -## Local Scope - -If a Request is created within a Local namespace, that Request's state will be read-only accessible by only elements (Functions, Requests, and Components) contained within the same Local namespace (Page). - -Additionally, the request will only have visibility to element states that expose their state to the same local namespace. Custom state entries are always read/write accessible, whereas most states created and managed by App Builder are always read-only. - -## Global Scope - -If a Request is created within the Global namespace, that Request's state will be read-only accessible by all App Builder elements, regardless of the namespace. - -However, the Request will only have visibility to element states that are also Global namespaces. This can be easily conceptualized as a parent (Global) and child (Local) relationship, where the child has visibility into the parent while the parent doesn't have visibility of their children. - -## Summary - -To summarize, when working with Requests within App Builder, developers can expect data scopes to be applied in the following way: - -- If a Request is created within a Local namespace, that Request's state will be read-only accessible by only elements (Functions, Requests, and Components) contained within the same Local namespace (Page). - -- If a Request is created within the Global namespace, that Request's state will be read-only accessible by all App Builder elements, regardless of the namespace. diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-resource.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-resource.md deleted file mode 100644 index dd8ab7d..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-resource.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements-resource' -sidebar_label: 'Resources' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/resource' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/resource' ---- - -# Data Scopes for App Builder Resources - -This article describes how developers can expect data scopes to be applied when working with Resources. - ---- - -![App Builder Layout State](./_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-resource-1.png) - -When working with App Builder Resources, developers can expect data scopes to be applied in the following way: - -## Local Scopes - -Resources have no visibility into local scopes, as well as no local scope in which they can be created. - -## Global Scopes - -All Resources exist in the Global state and have access to any global state entries in the App, such as other Resources, Router, and any custom state entries added to the global state. This allows them to use global state entries as inputs for Resource settings (i.e. a HTTP header value). diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-views.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-views.md deleted file mode 100644 index 34603ad..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-views.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements-views' -sidebar_label: 'Views' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/views' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/views' ---- - -# Data Scopes for App Builder Views (Pages) - -This article describes how developers can expect data scopes to be applied when working with Views (Pages). - ---- - -![App Builder View State](./_images/ab-data-in-the-frontend-data-scopes-for-app-builder-elements-views-1.png) - -When working with App Builder Views - Pages constructed using a Layout and a View component that are assigned to a unique page URL - developers can expect data scopes to be applied in the following way: - -## Local Scopes - -A local namespace is created for every View created in App Builder. This allows developers to add custom state entries with reading/write permissions from any element within the View; Functions, Requests, and Components. - -## Global Scopes - -Any View has access to any global state entries in the App, such as Resources, Router, and any custom state entries added to the global state. diff --git a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements.md b/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements.md deleted file mode 100644 index 8af63f6..0000000 --- a/docs/projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: 'data-in-the-frontend-data-scopes-for-app-builder-elements' -sidebar_label: 'Data Scopes for App Builder Elements' -redirect_from: '/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements' -slug: '/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements' ---- - -# Data Scopes for App Builder - -This section describes how data scopes are applied locally and globally for different App Builder elements. - -- [Layouts](data-in-the-frontend-data-scopes-for-app-builder-elements-layouts.md): Learn how data scopes are applied when working with Layouts. -- [Views](data-in-the-frontend-data-scopes-for-app-builder-elements-views.md): Learn how data scopes are applied when working with Views. -- [Requests](data-in-the-frontend-data-scopes-for-app-builder-elements-requests.md): Learn how data scopes are applied when working with Requests. -- [Resources](data-in-the-frontend-data-scopes-for-app-builder-elements-resource.md): Learn how data scopes are applied when working with Resources. -- [Functions](data-in-the-frontend-data-scopes-for-app-builder-elements-functions.md): Learn how data scopes are applied when working with Functions. -- [Components](data-in-the-frontend-data-scopes-for-app-builder-elements-components.md): Learn how data scopes are applied when working with Components. diff --git a/docs/projects/frontend/data-in-the-frontend-getting-and-setting-state-data.md b/docs/projects/frontend/data-in-the-frontend-getting-and-setting-state-data.md deleted file mode 100644 index edc0738..0000000 --- a/docs/projects/frontend/data-in-the-frontend-getting-and-setting-state-data.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 'data-in-the-frontend-getting-and-setting-state-data' -sidebar_label: 'Getting and setting state data' -redirect_from: '/frontend/data-in-the-frontend/getting-and-setting-state-data' -slug: '/projects/frontend/data-in-the-frontend/getting-and-setting-state-data' ---- - -# Getting and setting state data - -This article describes how developers can getting and setting state data in their front-end applications. - ---- - -![State read/set in app builder](./_images/ab-data-in-the-frontend-getting-and-setting-state-data-1.png) - -In App Builder, non-permanent data can be stored globally or locally accessible in State Management. Any data stored in the state is subject to specific scope rules, as determined by the element type it represents (i.e., Request, Function, Custom Entry) and whether it exists in a Global or Local namespace. - -## Reading State Data - -To read a piece of data from the state, you only need to reference it by its object key (dot notation) within a script or using handlebars notation (double brackets). The App Builder runtime will dynamically read the value for you. For example, to read a piece of data called "foo" from the Request namespace, you can use the following code: - -```js -// Handlebars -{ - { - objectName.value; - } -} - -// In script or function -objectName.value; -``` - -You can easily find a state's accessor by clicking the clipboard icon next to the property name in the App Builder State Management pane. The tooltip will list all available states for the highlighted element: - -![Clipboard for state value icon](./_images/ab-data-in-the-frontend-getting-and-setting-state-data-2.png) - -## Writing State Data - -While most states for different element types are read-only, developers are free to create custom state entries in both the global and local namespaces, which allows read-write access to those states. - -To write a piece of data to the Custom namespace, simply reference it by its object key and use the `setValue()` function: - -```js -// In script -return function (mode) { - themeMode.setValue(mode); - return; -}; -``` diff --git a/docs/projects/frontend/data-in-the-frontend-introduction.md b/docs/projects/frontend/data-in-the-frontend-introduction.md deleted file mode 100644 index 0951bed..0000000 --- a/docs/projects/frontend/data-in-the-frontend-introduction.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 'data-in-the-frontend-introduction' -sidebar_label: 'Data in the Frontend' -redirect_from: '/frontend/data-in-the-frontend/introduction' -slug: '/projects/frontend/data-in-the-frontend/introduction' ---- - -# Data in the Frontend - -This article describes how developers can store and access data in their front-end applications and manage the state. - ---- - -In App Builder, frontend data (State Management) refers to global or locally accessible and reactive data that can be read and updated by components, resources, functions, and other app elements. - -![State Management](./_images/ab-state-management-into-1.png) - -State entries are created for every component and other elements in your App Builder project, which are read-only and managed by the element itself. Meanwhile, developers can create their own custom read/write state entries. - -## Next - -In the following sections, we'll take a look at how to: - -• Create and Access custom state entries - -• Access managed state entries - -• Think about global vs. local states diff --git a/docs/projects/frontend/data-in-the-frontend-understanding-local-vs-global-state-objects.md b/docs/projects/frontend/data-in-the-frontend-understanding-local-vs-global-state-objects.md deleted file mode 100644 index 2b683c0..0000000 --- a/docs/projects/frontend/data-in-the-frontend-understanding-local-vs-global-state-objects.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 'data-in-the-frontend-understanding-local-vs-global-state-objects' -sidebar_label: 'Understanding Local vs Global State Objects' -redirect_from: '/frontend/data-in-the-frontend/understanding-local-vs-global-state-objects' -slug: '/projects/frontend/data-in-the-frontend/understanding-local-vs-global-state-objects' ---- - -# Understanding Local vs. Global State Objects - -This article describes the difference between Global and Local state objects when working with App Builder's state management system. - ---- - -When working with App Builder, it's essential to understand the difference between Local and Global state objects. You may want to use one or the other, depending on your needs. Here's a quick overview of each: - -![Local custom state in app builder](./_images/ab-local-v-global-state-1.png) - -**Local state objects** are specific to the Page on which the _Component_, element, or _Custom State Entry_ was created. They're only accessible (have a contained scope) within that Page's different elements. This makes them ideal for minimizing clutter in the Global namespace or storing information specific to a single page or component - -![Local custom state in app builder](./_images/ab-local-v-global-state-2.png) - -**Global state objects** are accessible from anywhere within your app. This is because they're stored at the Global level. Global state objects help store information that needs to be accessed across Pages or other parts of the application, like _Themes_ or _Resources_. - -## When should you use Local state objects? - -Local state objects are ideal when you need to: - -- Store information specific to a single Page or component. For example, if you had a _List_ element on a Page and wanted to store a custom property about a user interaction with the list, a Local state object would be a good choice. - -- Keep the Global namespace clean and organized. You can avoid polluting the Global namespace using local state objects with unnecessary variables or entries. - -## When should you use Global state objects? - -Global state objects are useful when you need to: - -- Access the same information from multiple Pages or other parts of your app. For example, a Global state object would be a good choice if you wanted to store user preferences that could be used throughout the app. - -- Minimize the risk of name collisions. Since Local state objects are specific to a Page, there's always the risk of having two different Pages with Local state objects with the same name. By using Global state objects, you can avoid this issue. - -## How are Global vs. the Local States managed? - -When creating _Requests_, _Functions_, and _Custom State Entries_, you're able to first select which namespace you want to enter the element into by selecting the relevant tab ("Global" or "Local") in the pane. - -![_Component_ being added to a Local state object](./_images/ab-local-v-global-state-3.png) - -Once either "Global" or "Local" is selected in any element's management pane, go ahead and click the "+" icon. This will show you the elements create form, and once created, add it to the relevant namespace. - -## Are Components Global or Local? - -App Builder automatically manages many different elements' scope based on where they are applied/added to your app. For example, your Theme values are always accessible from the Global State, while certain Component Instances - depending on whether they're added to a Page or Layout, will vary. - -## Next - -In the following sections, we will look at the scoping of different types of elements available in App Builder. diff --git a/docs/projects/frontend/frontend-index.md b/docs/projects/frontend/frontend-index.md deleted file mode 100644 index bb5b3d1..0000000 --- a/docs/projects/frontend/frontend-index.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 'frontend-index' -sidebar_label: 'Frontend Development' -slug: /frontend ---- - -# Frontend Development - -The 8base App Builder is a fully hosted drag-and-drop environment that lets Javascript developers quickly build web applications using pre-built UI/UX components. Inside the Editor, there are a number of different interface areas and concepts that are important to understand. - -Here is a brief overview of the subsections you will find: - -- [Getting Started](getting-started-introduction.md): Learn the fundamentals of working with App Builder. -- [Building Front-ends App Builder Walkthrough](building-frontends-app-builder-walkthrough-introduction.md): Learn how to drag components, set themes, and connect to data sources. -- [App Editor](app-editor-introduction.md): Learn how to navigate in the App Editor. -- [Custom App Styling](custom-app-styling-introduction.md): Learn how to use themes, custom css, and App Builder styling panes. -- [Responsive Design in App Builder](responsive-design-in-app-builder-introduction.md): Learn how to apply responsive design to your application. -- [Application Layouts](application-layouts.md): Learn how to work with pre-built and custom Layouts. -- [App Navigation](app-navigation-introduction.md): Learn best practices for navigation elements when building applications. -- [App Components](app-components-introduction.md): Learn about the many different App Components, such as the Looper and Form Block. -- [Connecting to Data Sources](connecting-to-data-sources-introduction.md): Learn how to connect to data sources using APIs. -- [Data in the Frontend](data-in-the-frontend-introduction.md): Learn how you can store and access data in your front-end applications and manage the state. -- [Custom Frontend Logic](custom-frontend-logic-introduction.md): Learn how to author and use Javascript functions locally and globally within App Builder front-end applications. This allows you to easily modularize and reuse any custom code you write. -- [Triggering Events in the App](triggering-events-in-the-app-introduction.md)Learn how to trigger Events at the Component and Request level. -- [Images and Files in App Builder](images-and-files-in-app-builder-introduction.md): Learn how to upload and work with static assets, such as images and CSS. -- [Publishing Apps](publishing-apps-introduction.md): Learn how App Builder compiles, builds, and deploys apps to make them publically available. - diff --git a/docs/projects/frontend/getting-started-building-fullstack-gotomarket-apps-on-8base.md b/docs/projects/frontend/getting-started-building-fullstack-gotomarket-apps-on-8base.md deleted file mode 100644 index e8787e6..0000000 --- a/docs/projects/frontend/getting-started-building-fullstack-gotomarket-apps-on-8base.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 'getting-started-building-fullstack-gotomarket-apps-on-8base' -sidebar_label: 'Building full-stack go-to-market apps on 8base' -redirect_from: '/frontend/getting-started/building-full-stack-go-to-market-apps-on-8base' -slug: '/projects/frontend/getting-started/building-full-stack-go-to-market-apps-on-8base' ---- - -# Building Full-stack Go-to-Market Apps - -Learn how App Builder allows the development of go-to-market applications across all industry verticles – like finance, health-care, social networks, software as a service (SaaS) and others. - ---- - -## How App Builder Works - -App Builder lets you quickly build, deploy, and continue to evolve both customer-facing and internal tools using an intuitive UI and JavaScript when needed. Also, App Builder is a full-stack application development tool that allows connectivity with any backend, including 8base workspaces, which include a database, API, roles & permissions, and serverless capabilities. This doesn't preclude you from connecting to other data sources, as requests to REST and GraphQL APIs are also supported. - -To best explain how go-to-market apps can get developed using App Builder, we believe it's essential to give you an overview/walk through of the standard App Builder development experience. Along the way, we'll be highlighting many of the core features and capabilities of App Builder that make it a highly dynamic and flexible tool. - -### 1. Creating your first App Builder Workspace - -![Creating an app builder project](./_images/ab-create-app.png) - -Creating an App Builder project is as simple as giving your project a name and clicking create! App Builder will handle the provisioning of all the resources required for your full-stack web application. At that point, developers can dive into either the frontend or backend tools to start developing the application. - -Once created, a workspace card will appear in your developer home area, through which you can access the App Builder Editor for your project. - -_For more information on 8base's backend tools, visit the [backend section](../backend/backend-index.md)._ - -### 2. Using Drag-and-Drop Components to Build Pages in Apps - -![Using Drag-and-Drop Components](./_images/ab-component-library-1.png) - -App Pages get built using drag-and-drop components inside the App Builder Editor. App Builder's Component Library includes many feature-packed Components, like Input Control, Switch, File Upload, Accordion, Layout Controls such as Card and Async Control, and many more. Plus, we provide State Mangement, Assets, and Navigation. Developers drag and drop components onto the page canvas before working on the three available configuration areas of any component; Component Properties, Component Styles, and Component Events. - -• **Component Properties**: The data inputs, attributes, and behavior of a component instance. - -• **Component Styles**: The visual styling configuration of a component instance. - -• **Component Events**: The event listeners associated with a component instance that trigger actions. - -### 3. Connecting to Data Sources and APIs - -![Setting up an Data Source in App Builder](./_images/ab-resources-create-1.png) - -#### Adding Resources - -Resources are the connections of your Frontend workspace connected to a Backend. The left-hand _Resources_ pane lists all your connected resources. The right-hand _Add a Resource_ pane lists all the available resources. - -To add a new 8base Backend connection, click on the name of the 8base resource in the right-hand pane. The new resource will automatically be added to your connected resource list. - -To modify the connection properties of your new resource, click on the name, which will bring up the connection properties window. Edit the connection details as needed and save your changes. - -![Modifying Resource Connection Properties](./_images/ab-resources-edit-connection-properties.png) - -You can also integrate with a Rest API or GraphQL API. Click on the appropriate icon in the _Add a Resource_ pane, fill out the connection property details, and save it. The new API resource will be added to your connected resource list. - -#### Requests - -Requests made to data sources are reusable elements it your App Builder project, allowing you to effectively organize your and optimize projects when collaborating with teams, as well as working by yourself. Meanwhile, the response data received from Requests gets stored in App Builder's State Management system, making it accessible to Components, Functions, and other App Builder elements. - -### 4. Customizing the Look and Feel of Applications - -![App Builder Theme Editor UI](./_images/ab-theme-editor-1.png) - -App Builder applications get styled at the global, component default, and component instance levels. These several levels of styling separation allow for fine-grained customization of the look and feel of applications, using both form-based styling options and pure CSS code. - -• **Global Styling**: The global CSS that defines an application's look and feel (i.e., Material Design, Typography, custom CSS) - -![App Builder Theme Editor UI Color](./_images/ab-theme-editor-color.png) - -![App Builder Theme Editor UI Typography](./_images/ab-theme-editor-typography.png) - -• **Component Default Styling**: The default appearance of a component when it's first dropped onto the canvas, overriding any global style rules. - -![App Builder Theme Editor UI Components](./_images/ab-theme-editor-components.png) - -• **Component Instance Styling**: The appearance of a single component instance configured by the developer, overriding any global style and component default style rules. - -### 5. Setting up User Authentication - -User Authentication (Docs coming soon...) - -### 6. Deploying Applications and Custom Domains - -![Deploying an App Builder app](./_images/ab-deploy-pane-1.png) - -Once an application is ready for deployment, the deploy button is available in the editor's nav bar! The deploy button triggers a process that generates a React.js application, runs the `build` command, and deploys the compiled code to an S3 bucket. - -8base automatically assigns a version number to every deployment to which the project can get restored if needed. A deployed app will quickly become available at an 8base-generated public URL (`.appbuilder.8base.com`). However, you are free to create a mapping with your DNS provider to point a custom domain to this endpoint. - -### 7. Continuous Development - -Changes made in the App Builder Editor do not affect deployed applications. Meaning that while users rely on a stable version of the deployed app, you and your team can safely make changes and update features in the Editor. There isn't any need to deploy new features and capabilities until they're fully stable and ready for prime time! The "Save" and "Backup" buttons allow you to commit/restore your work when developing. - -## Full-stack Go-to-Market Apps - -The steps detailed above are the most common steps taken during an App Builder app's lifecycle, from creating a new project to deployment and continuous development. Within each stage, core App Builder capabilities were highlighted, such as multi-level custom styling, state management, 3rd party API connectivity, backend data storage with an API, deployment, and more. These capabilities provide the building blocks for modern application development – the fundamental ones and beyond. - -Thanks to the "Building Block" approach, App Builder is well suited for any web application development project - as opposed to being only applicable for a specific vertical, like eCommerce or Blogs. Meanwhile, for projects in regulated industries with high-security requirements (HIPAA, SOC2, other), our team can work with you directly to properly configure the working environments to meet these compliance standards. diff --git a/docs/projects/frontend/getting-started-introduction.md b/docs/projects/frontend/getting-started-introduction.md deleted file mode 100644 index 1aca4e3..0000000 --- a/docs/projects/frontend/getting-started-introduction.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: 'getting-started-introduction' -sidebar_label: 'Getting Started' -redirect_from: '/frontend/getting-started-introduction' -slug: '/projects/frontend/getting-started-introduction' ---- - -# Getting Started - -Learn how developers and teams can build, deploy, and evolve full-stack web applications using App Builder. Create great UX/UI experiences for user-facing and internal applications using App Builder's drag-and-drop components, and connect to REST APIs, GraphQL APIs, and other data sources, all while using intuitive UI tools and JavaScript. - ---- - -## Getting to know App Builder - -While App Builder abstracts into interface most application development concepts that traditionally get handled using syntax, it still allows developers to write and run JavaScript code. Developers can also manipulate and store data and trigger events and actions on application user interactions and different stages in the application lifecycle, like routing. - -Here is an overview of all the sections you can start diving in to on your journey to becoming an App Builder expert! - -1. [Getting Familiar with the Editor](/projects/frontend/getting-started-what-is-app-builder.md) -2. [Custom App Styling](/projects/frontend/custom-app-styling-introduction.md) -3. [Responsive Design in App Builder](/projects/frontend/responsive-design-in-app-builder-introduction.md) -4. [Application Layouts](/projects/frontend/application-layouts-introduction.md) -5. [App Navigation](/projects/frontend/app-navigation-introduction.md) -6. [App Components](/projects/frontend/app-components/introduction) -7. [Connecting to Data Sources](/projects/frontend/connecting-to-data-sources-introduction.md) -8. [Data in the Frontend (State)](/projects/frontend/data-in-the-frontend-introduction.md) -9. [Custom Frontend Logic](/projects/frontend/custom-frontend-logic-introduction.md) -10. [Triggering Events in the App](/projects/frontend/triggering-events-in-the-app-introduction.md) - -12. [Images and Files in App Builder](/projects/frontend/images-and-files-in-app-builder-introduction.md) -13. [Publishing Apps](/projects/frontend/publishing-apps-introduction.md) - - -## Next Steps - -Ready to get going? Check out our [Getting Started](/projects/frontend/getting-started-building-fullstack-gotomarket-apps-on-8base.md) to get up and running fast, or continue to learn more about App Builder in a deeper overview on the next page. diff --git a/docs/projects/frontend/getting-started-what-is-app-builder.md b/docs/projects/frontend/getting-started-what-is-app-builder.md deleted file mode 100644 index 38004d6..0000000 --- a/docs/projects/frontend/getting-started-what-is-app-builder.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'getting-started-what-is-app-builder' -sidebar_label: 'What is App Builder' -redirect_from: '/frontend/getting-started/what-is-app-builder' -slug: '/projects/frontend/getting-started/what-is-app-builder' ---- - -# What is App Builder? - -Learn how App Builder works and why it's useful. - ---- - -## Why App Builder? - -Developing web applications can be complicated and time-consuming work. You need to be a skilled developer with years of experience to create something that's both functional and visually appealing. - -Not only do you have to be a skilled developer, but you also need to know the right programming languages, frameworks, and libraries to build an app that will work. Even then, there's no guarantee that it will look good or be easy for your customers to use. - -This is why we developed App Builder, which lets you quickly create beautiful web applications. App Builder developers can quickly put together internal or customer-facing applications using our library of components by providing an easy-to-use drag-and-drop interface. Meanwhile, they can still drop into code and write JavaScript when required. - -That said, how does it work? - -## The App Builder Editor - -![The App Builder Editor](./_images/app-builder-editor-1.png) - -As a developer working in App Builder, you'll spend most of your time in the App Builder Editor after creating a project. The editor is where you'll be able to create application pages, configure routes, drag-and-drop components, configure components, connect to data sources, write JavaScript functions, and a whole lot more! Essentially, it's your application's command center and development environment, whether you're working on your own or a team. - -The application you build inside the editor is **not your built application**. Think of it as an interactive preview of your application that 8base provides so that you have a highly engaging and interactive development environment. Meanwhile, all the changes and customizations you make to your application get stored in a catalog of Domain Specific Language (DSL) files that 8base maintains and manages. These DSL files collectively represent your application and are created/updated based on your actions in the editor. - -At any point in the development process, you can deploy your application to a public endpoint so its intended users can access it. How does this happen? - -## Build and Deploy - -The DSL files created when working in the App Builder Editor get compiled upon deployment. Currently, App Builder compiles the DSL into a React.js application that's then ushered through a build and deploy process which mirrors that of using the framework natively. - -This means that after the DSL code is compiled into – or generates – React.js application code. 8base then spins up a process that runs the `build` command, which outputs a compiled web application ready to be deployed. App Builder handles deployment by uploading the code files to an S3 bucket configured with a public URL. Your application is then available to users! - -## What Can I Build Using App Builder? - -A stated, App Builder lets you quickly create beautiful web applications. You may be wondering though, "what kind of web applications?" In the next section, we'll break how App Builder allows the development of go-to-market applications across all industry verticles – like finance, health-care, social networks, software as a service (SaaS) and others. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-general-settings.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-general-settings.md deleted file mode 100644 index d6c0344..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-general-settings.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-general-settings' -sidebar_label: 'General Settings' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/general-settings' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/general-settings' ---- - -# General Settings - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-global-app-settings-interface.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-global-app-settings-interface.md deleted file mode 100644 index 0e0398f..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-global-app-settings-interface.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-global-app-settings-interface' -sidebar_label: 'Global App Settings Interface' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/global-app-settings-interface' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/global-app-settings-interface' ---- - -# Global App Settings Interface - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-introduction.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-introduction.md deleted file mode 100644 index 1d5bd28..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/introduction' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-managing-app-billing.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-managing-app-billing.md deleted file mode 100644 index d3d639d..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-managing-app-billing.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-managing-app-billing' -sidebar_label: 'Managing App Billing' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-app-billing' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-app-billing' ---- - -# Managing App Billing - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-managing-seo-in-app-builder.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-managing-seo-in-app-builder.md deleted file mode 100644 index 322b649..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-managing-seo-in-app-builder.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-managing-seo-in-app-builder' -sidebar_label: 'Managing SEO in App Builder' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-seo-in-app-builder' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-seo-in-app-builder' ---- - -# Managing SEO in App Builder - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-seeing-app-activity-history.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-seeing-app-activity-history.md deleted file mode 100644 index d33a56a..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-seeing-app-activity-history.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-seeing-app-activity-history' -sidebar_label: 'Seeing App Activity History' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/seeing-app-activity-history' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/seeing-app-activity-history' ---- - -# Seeing App Activity History - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-using-custom-domains.md b/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-using-custom-domains.md deleted file mode 100644 index a33663a..0000000 --- a/docs/projects/frontend/global-app-settings-handling-errors-failures-in-the-editor-using-custom-domains.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-handling-errors-failures-in-the-editor-using-custom-domains' -sidebar_label: 'Using Custom Domains' -redirect_from: '/frontend/global-app-settings/handling-errors/failures-in-the-editor/using-custom-domains' -slug: '/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/using-custom-domains' ---- - -# Using Custom Domains - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-inviting-managing-collaborators-assigning-collaborators-roles.md b/docs/projects/frontend/global-app-settings-inviting-managing-collaborators-assigning-collaborators-roles.md deleted file mode 100644 index ddcb641..0000000 --- a/docs/projects/frontend/global-app-settings-inviting-managing-collaborators-assigning-collaborators-roles.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-inviting-managing-collaborators-assigning-collaborators-roles' -sidebar_label: '- Assigning Collaborators Roles' -redirect_from: '/frontend/global-app-settings/inviting/managing-collaborators/assigning-collaborators-roles' -slug: '/projects/frontend/global-app-settings/inviting/managing-collaborators/assigning-collaborators-roles' ---- - -# - Assigning Collaborators Roles - -...coming soon. diff --git a/docs/projects/frontend/global-app-settings-inviting-managing-collaborators-revoking-access-from-collaborators.md b/docs/projects/frontend/global-app-settings-inviting-managing-collaborators-revoking-access-from-collaborators.md deleted file mode 100644 index df5152d..0000000 --- a/docs/projects/frontend/global-app-settings-inviting-managing-collaborators-revoking-access-from-collaborators.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'global-app-settings-inviting-managing-collaborators-revoking-access-from-collaborators' -sidebar_label: '- Revoking access from Collaborators' -redirect_from: '/frontend/global-app-settings/inviting/managing-collaborators/revoking-access-from-collaborators' -slug: '/projects/frontend/global-app-settings/inviting/managing-collaborators/revoking-access-from-collaborators' ---- - -# - Revoking access from Collaborators - -...coming soon. diff --git a/docs/projects/frontend/handling-errors-and-debugging-handling-errors-failures-in-the-editor-displaying-form-errors-to-app-users.md b/docs/projects/frontend/handling-errors-and-debugging-handling-errors-failures-in-the-editor-displaying-form-errors-to-app-users.md deleted file mode 100644 index 52e85f0..0000000 --- a/docs/projects/frontend/handling-errors-and-debugging-handling-errors-failures-in-the-editor-displaying-form-errors-to-app-users.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'handling-errors-and-debugging-handling-errors-failures-in-the-editor-displaying-form-errors-to-app-users' -sidebar_label: '- Displaying Form Errors to App Users' -redirect_from: '/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/displaying-form-errors-to-app-users' -slug: '/projects/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/displaying-form-errors-to-app-users' ---- - -# - Displaying Form Errors to App Users - -...coming soon. diff --git a/docs/projects/frontend/handling-errors-and-debugging-handling-errors-failures-in-the-editor-handling-request-errors-in-app.md b/docs/projects/frontend/handling-errors-and-debugging-handling-errors-failures-in-the-editor-handling-request-errors-in-app.md deleted file mode 100644 index ca4aae1..0000000 --- a/docs/projects/frontend/handling-errors-and-debugging-handling-errors-failures-in-the-editor-handling-request-errors-in-app.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'handling-errors-and-debugging-handling-errors-failures-in-the-editor-handling-request-errors-in-app' -sidebar_label: '- Handling Request Errors in App' -redirect_from: '/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/handling-request-errors-in-app' -slug: '/projects/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/handling-request-errors-in-app' ---- - -# - Handling Request Errors in App - -...coming soon. diff --git a/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-adding-validations-and-custom-errors.md b/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-adding-validations-and-custom-errors.md deleted file mode 100644 index cf49aba..0000000 --- a/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-adding-validations-and-custom-errors.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'handling-errors-and-debugging-supported-authentication-strategies-adding-validations-and-custom-errors' -sidebar_label: 'Adding Validations and Custom Errors' -redirect_from: '/frontend/handling-errors-and-debugging/supported-authentication-strategies/adding-validations-and-custom-errors' -slug: '/projects/frontend/handling-errors-and-debugging/supported-authentication-strategies/adding-validations-and-custom-errors' ---- - -# Adding Validations and Custom Errors - -...coming soon. diff --git a/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-introduction.md b/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-introduction.md deleted file mode 100644 index 24ac0a2..0000000 --- a/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'handling-errors-and-debugging-supported-authentication-strategies-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/handling-errors-and-debugging/supported-authentication-strategies/introduction' -slug: '/projects/frontend/handling-errors-and-debugging/supported-authentication-strategies/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-reading-and-fixing-app-errors.md b/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-reading-and-fixing-app-errors.md deleted file mode 100644 index 794a703..0000000 --- a/docs/projects/frontend/handling-errors-and-debugging-supported-authentication-strategies-reading-and-fixing-app-errors.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'handling-errors-and-debugging-supported-authentication-strategies-reading-and-fixing-app-errors' -sidebar_label: 'Reading and fixing App Errors' -redirect_from: '/frontend/handling-errors-and-debugging/supported-authentication-strategies/reading-and-fixing-app-errors' -slug: '/projects/frontend/handling-errors-and-debugging/supported-authentication-strategies/reading-and-fixing-app-errors' ---- - -# Reading and fixing App Errors - -...coming soon. diff --git a/docs/projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-files.md b/docs/projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-files.md deleted file mode 100644 index ef6f43e..0000000 --- a/docs/projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-files.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'images-and-files-in-app-builder-available-attributes-on-uploaded-files' -sidebar_label: 'Available attributes on uploaded files' -redirect_from: '/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-files' -slug: '/projects/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-files' ---- - -# Available attributes on uploaded files - -...coming soon. diff --git a/docs/projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-images.md b/docs/projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-images.md deleted file mode 100644 index 89aa6a9..0000000 --- a/docs/projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-images.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'images-and-files-in-app-builder-available-attributes-on-uploaded-images' -sidebar_label: 'Available attributes on uploaded images' -redirect_from: '/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-images' -slug: '/projects/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-images' ---- - -# Available attributes on uploaded images - -...coming soon. diff --git a/docs/projects/frontend/images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page.md b/docs/projects/frontend/images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page.md deleted file mode 100644 index 7fb5ff9..0000000 --- a/docs/projects/frontend/images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 'images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page' -sidebar_label: 'Displaying an Image or File on a Page' -redirect_from: '/frontend/images-and-files-in-app-builder/displaying-an-image-or-file-on-a-page' -slug: '/projects/frontend/images-and-files-in-app-builder/displaying-an-image-or-file-on-a-page' ---- - -# Displaying an Image or File on a Page - -This article describes how developers can display an Asset on a page. - ---- - -When you want to display an image or file on a page in App Builder, you can use the Image (App Builder correctly only supports Images). - -## Image Component - -The Image component will display images that have been uploaded to App Builder or one hosted elsewhere using a source URL. To add an Image component to your page, select it from the Components toolbox on the right side of the App Builder canvas and drag and drop it onto the page. - -Once you've added an Image component to your page, you can configure its properties in the Properties panel on the right side of the App Builder canvas. - -![Selecting an Asset](./_images/ab-images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page-2.png) - -The "Picture Icon" button that's next to the Source attribute in the Properties panel will open the Select Asset dialog. In this dialog, you can select an image that's already been uploaded to App Builder or specify a URL for an image hosted elsewhere. - -In the Source attribute you can specify the image location using a path such as "assets/myImage" or by using handlebars `{{assets.myImage.src}}`. - -The specified Asset will be rendered in the Component. diff --git a/docs/projects/frontend/images-and-files-in-app-builder-introduction.md b/docs/projects/frontend/images-and-files-in-app-builder-introduction.md deleted file mode 100644 index 1c504a6..0000000 --- a/docs/projects/frontend/images-and-files-in-app-builder-introduction.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: 'images-and-files-in-app-builder-introduction' -sidebar_label: 'Images and Files in App Builder' -redirect_from: '/frontend/images-and-files-in-app-builder/introduction' -slug: '/projects/frontend/images-and-files-in-app-builder/introduction' ---- - -# Images and Files in App Builder - -This article describes how developers handle _Static Assets_ in App Builder - ---- - -When you build an app, there are often times when you need to include images or other files. App Builder makes it easy to upload these static assets and use them in your app. - -![Asset's pane in App Builder](./_images/ab-images-and-files-in-app-builder-introduction-1.png) - -_Static Assets_ in web applications refer to images, JavaScript, CSS, or other files that are not changed by the user or the server. They are often used for logos, icons, and background images. - -In App Builder, JavaScript and CSS are managed and stored in _Functions_ and _Themes_, as well as some other locations. Therefore, static assets in App Builder refer only to images and other file types. diff --git a/docs/projects/frontend/images-and-files-in-app-builder-uploading-an-image-or-file.md b/docs/projects/frontend/images-and-files-in-app-builder-uploading-an-image-or-file.md deleted file mode 100644 index 821a2f9..0000000 --- a/docs/projects/frontend/images-and-files-in-app-builder-uploading-an-image-or-file.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 'images-and-files-in-app-builder-uploading-an-image-or-file' -sidebar_label: 'Uploading an Image or File' -redirect_from: '/frontend/images-and-files-in-app-builder/uploading-an-image-or-file' -slug: '/projects/frontend/images-and-files-in-app-builder/uploading-an-image-or-file' ---- - -# Uploading an Image or File - -This article describes how developers upload images and files as static assets in App Builder - ---- - -When working on a project in App Builder, you may need to include some images or other files. For example, you might want to add an image to your app's home screen or upload a file that your app will use. - -![Upload modal](./_images/ab-images-and-files-in-app-builder-uploading-an-image-or-file-1.png) - -App Builder makes it easy to upload images and files. To upload an image or file: - -1. In App Builder, Click the Assets tab. -2. Click the Upload button. -3. Select the image or file you want to upload (Direct Upload or Link). -4. Click Open. - -The image or file will be uploaded to your project and available in your Asset Library. You can then use it in your app. - -## Next - -Now that you've uploaded your image or file, we'll cover how to add it to a page in the following document. diff --git a/docs/projects/frontend/publishing-apps-adding-ssl-to-custom-domains.md b/docs/projects/frontend/publishing-apps-adding-ssl-to-custom-domains.md deleted file mode 100644 index 37193eb..0000000 --- a/docs/projects/frontend/publishing-apps-adding-ssl-to-custom-domains.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'publishing-apps-adding-ssl-to-custom-domains' -sidebar_label: 'Adding SSL to Custom Domains' -redirect_from: '/frontend/publishing-apps/adding-ssl-to-custom-domains' -slug: '/projects/frontend/publishing-apps/adding-ssl-to-custom-domains' ---- - -# Adding SSL to Custom Domains - -...coming soon. diff --git a/docs/projects/frontend/publishing-apps-cname-records-for-custom-domain.md b/docs/projects/frontend/publishing-apps-cname-records-for-custom-domain.md deleted file mode 100644 index 5fe51a6..0000000 --- a/docs/projects/frontend/publishing-apps-cname-records-for-custom-domain.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'publishing-apps-cname-records-for-custom-domain' -sidebar_label: 'CNAME records for Custom domain' -redirect_from: '/frontend/publishing-apps/cname-records-for-custom-domain' -slug: '/projects/frontend/publishing-apps/cname-records-for-custom-domain' ---- - -# CNAME records for Custom domain - -...coming soon. diff --git a/docs/projects/frontend/publishing-apps-deployment-settings.md b/docs/projects/frontend/publishing-apps-deployment-settings.md deleted file mode 100644 index b0fc562..0000000 --- a/docs/projects/frontend/publishing-apps-deployment-settings.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'publishing-apps-deployment-settings' -sidebar_label: 'Deployment settings' -redirect_from: '/frontend/publishing-apps/deployment-settings' -slug: '/projects/frontend/publishing-apps/deployment-settings' ---- - -# Deployment settings - -...coming soon. diff --git a/docs/projects/frontend/publishing-apps-introduction.md b/docs/projects/frontend/publishing-apps-introduction.md deleted file mode 100644 index efe6ce2..0000000 --- a/docs/projects/frontend/publishing-apps-introduction.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: 'publishing-apps-introduction' -sidebar_label: 'Publishing Apps' -redirect_from: '/frontend/publishing-apps/introduction' -slug: '/projects/frontend/publishing-apps/introduction' ---- - -# Publishing Apps - -This article describes how App Builder compiles, builds, and deploys apps to make them publically available. - ---- - -When you're ready to publish your app, App Builder compiles, builds, and deploys your app so that it can be used by anyone. This process is straightforward and only takes a few minutes. - -![App Builder deployment](./_images/ab-publishing-apps-introduction-1.png) - -Here's how it works: - -1. App Builder is a _Design Time_ tool that generates a DSL file representing your application. -2. When you're ready to _Deploy_, App Builder uses the DSL file as the input to a _Code Generator_ -3. The _Code Generator_ output is a _React.js_ application. -4. App Builder then builds the _React.js_ application and uploads the built app to Amazon S3. -5. The S3 bucket that stores your app is configured to serve the app using HTTPS. -6. Once the app is deployed, anyone can access it at the https://{some-slug}.appbuilder.8base.com URL. - -That's it! App Builder takes care of all the details so that you can focus on building great apps. - -## Next - -Now that you have an understanding of how Deployment is handled, let's take a look at how you can actually go about the process. diff --git a/docs/projects/frontend/publishing-apps-making-an-app-public.md b/docs/projects/frontend/publishing-apps-making-an-app-public.md deleted file mode 100644 index d657849..0000000 --- a/docs/projects/frontend/publishing-apps-making-an-app-public.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 'publishing-apps-making-an-app-public' -sidebar_label: 'Making an app Public' -redirect_from: '/frontend/publishing-apps/making-an-app-public' -slug: '/projects/frontend/publishing-apps/making-an-app-public' ---- - -# Making an app Public - -This article describes how developers can make their App Builder apps public. - ---- - -When you build an app using App Builder, by default the app isn't deployed. This means that only people invited to the Workspace where the app is being built can see and test the app. - -If you want to make your app available to anyone, you need to publish it (Deploy). Deployment makes your app public, which means it's available over the web using the 8base provisioned URL. - -## How to Deploy your App - -In the top menu of App Builder, click **Deploy**. This opens the Deployment settings page where you can configure how you want to deploy your app. - -![Deployment menu](./_images/ab-publishing-apps-making-an-app-public-1.png) - -On the Deployment settings page, you are able to specify a version number for your app. App Builder will automatically increment the number, though you can also type in a specific number if you want to. - -The version number is important because it represents a snapshot of your app at a particular point in time. This is useful when you need to roll back to an older version. - -Once the version number is accurately set, go ahead and click the **Deploy** button. This will start the process of deploying your app to 8base. After the process is complete, your app URL will be available in the same menu. diff --git a/docs/projects/frontend/publishing-apps-publishing-apps-to-a-cdn.md b/docs/projects/frontend/publishing-apps-publishing-apps-to-a-cdn.md deleted file mode 100644 index 5afefcc..0000000 --- a/docs/projects/frontend/publishing-apps-publishing-apps-to-a-cdn.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'publishing-apps-publishing-apps-to-a-cdn' -sidebar_label: 'Publishing Apps to a CDN' -redirect_from: '/frontend/publishing-apps/publishing-apps-to-a-cdn' -slug: '/projects/frontend/publishing-apps/publishing-apps-to-a-cdn' ---- - -# Publishing Apps to a CDN - -...coming soon. diff --git a/docs/projects/frontend/publishing-apps-seeing-deployment-history.md b/docs/projects/frontend/publishing-apps-seeing-deployment-history.md deleted file mode 100644 index fff4e1f..0000000 --- a/docs/projects/frontend/publishing-apps-seeing-deployment-history.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: 'publishing-apps-seeing-deployment-history' -sidebar_label: 'Seeing deployment history' -redirect_from: '/frontend/publishing-apps/seeing-deployment-history' -slug: '/projects/frontend/publishing-apps/seeing-deployment-history' ---- - -# Seeing Deployment History - -This article describes how developers view their deployment history. - ---- - -When you build an app and deploy it, you'll see a new entry in the "Deployment History" section of the "Settings > Deployment > Deployment History" tab. This will show you when your app was deployed, the version number, and the deployment success status. - -![App deployment history](./_images/ab-publishing-apps-seeing-deployment-history-1.png) diff --git a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport.md b/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport.md deleted file mode 100644 index fdb7932..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport' -sidebar_label: 'Setting a custom Viewport' -redirect_from: '/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-custom-viewport' -slug: '/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-custom-viewport' ---- - -# Setting a Custom Viewport Width - -To set a custom viewport width, simply drag the Viewport slider to the desired width or enter a width value into the input field. The drag sliders are located on either side of the Page Canvas. - -![Custom viewport](./_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport-1.png) - -To find the exact width of a targeted device, we recommend using [ScreenSize.es](https://screensiz.es/). diff --git a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport.md b/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport.md deleted file mode 100644 index 1560fd6..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport' -sidebar_label: 'Setting a Desktop Viewport' -redirect_from: '/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-desktop-viewport' -slug: '/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-desktop-viewport' ---- - -# Setting a Desktop Viewport - -Select the "Large" Viewport option to set a desktop viewport option or drag the Viewport slider to anything above 1000px wide. Given that responsive design aims to accommodate many device types and screen sizes, as opposed to a single device, we recommend moving the slider around during development so that you're considering the different sizes of desktops. - -![Desktop viewport](./_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport-1.png) - -To find the exact width of a targeted device, we recommend using [ScreenSize.es](https://screensiz.es/). diff --git a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport.md b/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport.md deleted file mode 100644 index d430828..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport' -sidebar_label: 'Setting a Mobile Viewport' -redirect_from: '/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-mobile-viewport' -slug: '/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-mobile-viewport' ---- - -# Setting a Mobile Viewport - -To set a mobile viewport, you can either select the "X-Small" Viewport option or drag the Viewport slider to anything below 800px wide. Given that responsive design aims to accommodate many device types and screen sizes, as opposed to a single device, we recommend moving the slider around during development so that you're considering different size mobile devices. - -![Mobile viewport](./_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport-1.png) - -To find the exact width of a targeted device, we recommend using [ScreenSize.es](https://screensiz.es/). diff --git a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport.md b/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport.md deleted file mode 100644 index 205aa6a..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport' -sidebar_label: 'Setting a Tablet Viewport' -redirect_from: '/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-tablet-viewport' -slug: '/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-tablet-viewport' ---- - -# Setting a Tablet Viewport - -If you want to set a specific viewport for tablets, you can either select the "Small" Viewport option or drag the Viewport slider within the range of 800px to 1000px wide. Given that responsive design aims to accommodate many device types and screen sizes, as opposed to a single device, we recommend moving the slider around during development so that you're considering different size tablets. - -![Tablet viewport](./_images/ab-responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport-1.png) - -To find the exact width of a targeted device, we recommend using [ScreenSize.es](https://screensiz.es/). diff --git a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport.md b/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport.md deleted file mode 100644 index 69717c5..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-changing-the-viewport.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-changing-the-viewport' -sidebar_label: 'Changing the Viewport' -redirect_from: '/frontend/responsive-design-in-app-builder-changing-the-viewport' -slug: '/projects/frontend/responsive-design-in-app-builder-changing-the-viewport' ---- - -# Changing the Viewport - -This article describes how developers can change the viewport in App Builder to support different screen widths. - ---- - -When creating applications, it is essential to consider how your app will look on devices with different screen widths. App Builder allows you to change the viewport to optimize your app for different devices. - -To change the viewport: - -1. In App Builder, click on the 'View Port Size' dropdown in the top menu. -2. Select the viewport size that you want to use. - -Note that you can manually adjust the viewport width using drag bars on either side of the Page Canvas. - -![Changing the Viewport](./_images/ab-responsive-design-in-app-builder-changing-the-viewport-1.png) - -## Media Queries vs. Viewport - -It's important to note the difference between media queries and viewports. Media queries are used to apply different styling rules to your app based on different conditions, such as screen width. Viewport, on the other hand, is used to simply see your app's appearance when adjusting to different screen widths and ratios. - -When working in App Builder, you have 5 default viewport configurations and can manually adjust the page canvas to custom screen widths. diff --git a/docs/projects/frontend/responsive-design-in-app-builder-introduction.md b/docs/projects/frontend/responsive-design-in-app-builder-introduction.md deleted file mode 100644 index c5a8376..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-introduction.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-introduction' -sidebar_label: 'Responsive Design' -redirect_from: '/frontend/responsive-design-in-app-builder/introduction' -slug: '/projects/frontend/responsive-design-in-app-builder/introduction' ---- - -# Responsive Design - -This document describes how responsive design works in App Builder. - -![Responsive design in App Builder](./_images/ab-responsive-design-introduction-1.png) - -Responsive design is a term that is used to describe a website or web application that can adapt its layout to the size of the device it is being viewed on. This means that whether you are viewing a website on a desktop computer, laptop, tablet, or smartphone, the content will be automatically adjusted to fit the screen size. - -This is in contrast to traditional web design, where the layout is fixed and does not change regardless of the device being used. - -Responsive design has become increasingly important in recent years as the number of people using mobile devices to access the internet has grown. - -## Responsive Design Using Media Queries - -App Builder enables developers with tools to address responsive design to make sure that your app looks great on all devices. It does this by letting developers define different media queries that will be used to change the layout of the app depending on the size of the screen. - -Media queries are a CSS3 feature that allows developers to target specific styles at specific screen sizes. This means that you can have different styles for different devices, and even different styles for different Orientations (landscape or portrait). - -App Builder provides both a visual interface for working with media queries, as well as a code editor for CSS. - -When you are developing your app, you can preview how it will look on different devices by using the Viewports feature. This lets you see how your app will look on different screen sizes and orientations, and test out different media queries. - -In the following responsive design sections, we will take a look at how you can use media queries in App Builder to create responsive apps. diff --git a/docs/projects/frontend/responsive-design-in-app-builder-managing-media-query-definitions.md b/docs/projects/frontend/responsive-design-in-app-builder-managing-media-query-definitions.md deleted file mode 100644 index b37aeb6..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-managing-media-query-definitions.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-managing-media-query-definitions' -sidebar_label: 'Managing media query definitions' -redirect_from: '/frontend/responsive-design-in-app-builder/managing-media-query-definitions' -slug: '/projects/frontend/responsive-design-in-app-builder/managing-media-query-definitions' ---- - -# Managing media query definitions - -This document describes how a developer can manage media query definitions in App Builder. - -![Managing media query definitions in App Builder.](./_images/ab-custom-styling-theme-media-queries-1.png) - -When using App Builder to theme an application, a developer can take advantage of media queries to change the look and feel of their application based on different screen sizes. For example, a developer could use a media query to make their application more responsive on mobile devices by rearranging elements or changing font sizes. - -## Adding and Managing Media Query Definitions - -App Builder provides a media query manager that makes it easy to create and edit media queries. To access the media query manager, open the Theme editor and click on the "Media Queries" tab in the nested left menu. - -![Theme editor with Media Queries tab highlighted](./_images/ab-custom-styling-theme-media-queries-2.png) - -The media query manager will list all existing media queries for the currently selected theme. From here, a developer can add new media queries or edit existing ones. Just click on the "Add Media Query" or edit Icon buttons next to a media query to get started. diff --git a/docs/projects/frontend/responsive-design-in-app-builder-viewport.md b/docs/projects/frontend/responsive-design-in-app-builder-viewport.md deleted file mode 100644 index 4d5d884..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-viewport.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-viewport' -sidebar_label: 'The Viewport' -slug: '/projects/frontend/responsive-design-in-app-builder-viewport' ---- - -# The Viewport - -It is important to consider how your app will look on devices with different screen widths. You can change the Viewport to optimize your app for different devices. - -- [Changing the Viewport](responsive-design-in-app-builder-changing-the-viewport.md): Learn how to change the viewport in App Builder to support different screen widths. -- [Setting a Mobile Viewport](responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport.md): Learn how to set a mobile viewport. -- [Setting a Tablet Viewport](responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport.md): Learn which Viewports are best for tablet users. -- [Setting a Desktop Viewport](responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport.md): Learn which Viewports are best for desktop users. -- [Setting a custom Viewport](responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport.md): Learn how to set a custom viewport. \ No newline at end of file diff --git a/docs/projects/frontend/responsive-design-in-app-builder-writing-custom-media-query-rules.md b/docs/projects/frontend/responsive-design-in-app-builder-writing-custom-media-query-rules.md deleted file mode 100644 index 8de63fd..0000000 --- a/docs/projects/frontend/responsive-design-in-app-builder-writing-custom-media-query-rules.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 'responsive-design-in-app-builder-writing-custom-media-query-rules' -sidebar_label: 'Writing custom media query rules' -redirect_from: '/frontend/responsive-design-in-app-builder/writing-custom-media-query-rules' -slug: '/projects/frontend/responsive-design-in-app-builder/writing-custom-media-query-rules' ---- - -# Writing custom media query rules - -This document describes how a developer can write custom CSS rules inside media queries. - -![Managing media query definitions in App Builder.](./_images/ab-custom-styling-theme-media-queries-1.png) - -App Builder provides a graphical interface for managing media query definitions. A media query definition consists of a name, breakpoints, and zero or more CSS rules. The name is used to identify the media query definition within App Builder; the CSS rules are applied only when the specified media conditions are met. - -## How Media Queries Work - -Media Queries check the user's media type, which the user agent sets. The most common media types are "screen" and "print." If the user agent doesn't recognize the media type, it will default to "screen." - -Media queries can be used to check for a specific feature of the user agent, such as the viewport's width or the device's height. For example, you could use a media query to target only users with a screen width between 320 and 480 pixels. - -When a device's screen width is within a specified range set by the media query, all CSS rules associated with that query will be applied to the document. The CSS rules will not be used if the screen width falls outside that range. - -## Adding CSS Rules to Media Queries - -They represent the most commonly used breakpoints for responsive design. You're able to edit them, use them, or delete them! App Builder ships with some different default media queries for you to use. - -![Theme editor with CSS Rules in Media Queries](./_images/ab-custom-styling-theme-media-queries-3.png) - -To add CSS rules to a media query, click on the Viewport selector in the top nav of the Editor. You'll see a link at the bottom of your list titled "Edit Media Queries Rules." Clicking it will open a CSS editor, allowing you to add CSS rules to your media queries. - -:::info -Note that Media Queries are global. When they are active, the rules they toggle will be applied across your entire application. -::: - -## Component Level Media Queries - -While App Builder provides an interface for managing media queries and breakpoints at the application's global level, developers can still leverage media queries at the component level in "Custom CSS" input. - -![Custom CSS Rules in Media Queries on Components](./_images/ab-custom-styling-theme-media-queries-4.png) - -Leveraging media queries at the component level will override any global media query settings and allow for more granular control over how responsive design is handled on **that specific component instance**. diff --git a/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-developer-permissions-in-the-editor.md b/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-developer-permissions-in-the-editor.md deleted file mode 100644 index 0b327d0..0000000 --- a/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-developer-permissions-in-the-editor.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-developer-permissions-in-the-editor' -sidebar_label: 'Developer permissions in the editor' -redirect_from: '/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/developer-permissions-in-the-editor' -slug: '/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/developer-permissions-in-the-editor' ---- - -# Developer permissions in the editor - -...coming soon. diff --git a/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-introduction.md b/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-introduction.md deleted file mode 100644 index 35d8dfc..0000000 --- a/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-introduction.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-introduction' -sidebar_label: 'Introduction' -redirect_from: '/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/introduction' -slug: '/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/introduction' ---- - -# Introduction - -...coming soon. diff --git a/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-user-permissions-in-the-frontend-(spec-tbd).md b/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-user-permissions-in-the-frontend-(spec-tbd).md deleted file mode 100644 index 6365e8e..0000000 --- a/docs/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-user-permissions-in-the-frontend-(spec-tbd).md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: 'setting-rolebased-access-controls-and-frontend-permissions-inviting-managing-collaborators-user-permissions-in-the-frontend-(spec-tbd)' -sidebar_label: 'User permissions in the Frontend SPEC TBD' -redirect_from: '/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/user-permissions-in-the-frontend-spec-tbd' -slug: '/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/user-permissions-in-the-frontend-spec-tbd' ---- - -# User permissions in the Frontend SPEC TBD - -...coming soon. diff --git a/docs/projects/frontend/triggering-events-in-the-app-introduction.md b/docs/projects/frontend/triggering-events-in-the-app-introduction.md deleted file mode 100644 index ef40eac..0000000 --- a/docs/projects/frontend/triggering-events-in-the-app-introduction.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 'triggering-events-in-the-app-introduction' -redirect_from: '/frontend/triggering-events-in-the-app/introduction' -slug: '/projects/frontend/triggering-events-in-the-app/introduction' ---- - -# Triggering Events in the App Introduction - -This article describes how developers can expect to trigger Events in an App Builder project. - ---- - -![Configuring function to run on event](./_images/ab-triggering-events-in-the-app-calling-frontend-functions-introduction-1.png) - -When building an App in App Builder, triggering Events happens at the Component and Request level. Event listeners get set on Components with associated Actions that will run when an Event occurs. Some common examples of Events that can be triggered include: - -- A button press (click) -- A cursor hovering a container (mouseover) -- A form being submitted (submit) - -In the next two sections, we'll look at examples of these different types of Events and how to set them up in App Builder. diff --git a/docs/projects/frontend/triggering-events-in-the-app-managing-events-on-components-and-requests.md b/docs/projects/frontend/triggering-events-in-the-app-managing-events-on-components-and-requests.md deleted file mode 100644 index e6506bf..0000000 --- a/docs/projects/frontend/triggering-events-in-the-app-managing-events-on-components-and-requests.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: 'triggering-events-in-the-app-managing-events-on-components-and-requests' -sidebar_label: 'Managing Events on Components and Requests' -redirect_from: '/frontend/triggering-events-in-the-app/managing-events-on-components-and-requests' -slug: '/projects/frontend/triggering-events-in-the-app/managing-events-on-components-and-requests' ---- - -# Managing Events on Components and Requests - -This article describes how developers can manage Events of Components and Requests. - ---- - -In App Builder, while multiple Events can be added to a Component, currently only one Action can be configured per event type. If you want to create multiple Actions on a single event, you need to do so using Custom code. - -For example, let's imagine that you wanted to Fuctions to run when a Button is clicked. You can set the On Click event of the Button to trigger Custom Code that handles the execution of both functions.. - -```js -// Run first function -myFn1.function(); -// Run second function -myFn2.function(); -``` - -If you want to add multiple actions to a Request, the same logic applies. Simply script out the Requests, Functions, or Navigation that you want to occur when the Request Completes or throws an Error. - -### Updating Events - -If you need to update an Event that is already in place, simply go to the event's configuration panel and make your changes. - -For example, if you wanted to change the On Click event of a Button to trigger a different Request, simply select the new Request from the dropdown. - -### Removing Events - -If you need to remove an Event from a Component or Request, simply click on the Event's Action's gear icon and press the "Delete". This will remove the Event completely. diff --git a/docs/projects/frontend/triggering-events-in-the-app-specifying-events-in-editor.md b/docs/projects/frontend/triggering-events-in-the-app-specifying-events-in-editor.md deleted file mode 100644 index 2d4d52b..0000000 --- a/docs/projects/frontend/triggering-events-in-the-app-specifying-events-in-editor.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 'triggering-events-in-the-app-specifying-events-in-editor' -sidebar_label: 'Specifying Events in Editor' -redirect_from: '/frontend/triggering-events-in-the-app/specifying-events-in-editor' -slug: '/projects/frontend/triggering-events-in-the-app/specifying-events-in-editor' ---- - -# Specifying Events in Editor - -This article describes how developers can specify events in the App Builder editor. - ---- - -There are two areas where you can specify Events in App Builder; Components and Requests. - -## Specifying Events on Components - -When you add a Component to your app, you can specify Events that will be triggered when the component is interacted with. To do this, open the Events tab on the right-hand side of the App Builder editor. - -The Events tab will list all of the events that are available for that particular component. For example, the Button component has events for when it is clicked, hovered over, or pressed. - -![Event on Component](./_images/ab-triggering-events-in-the-app-specifying-events-in-editor-1.png) - -To add an Event, click the event you want to trigger. This will create an Action for it which you can then customize. Actions can be configured currently to: - -- Navigate -- Run a Request -- Run a Function -- Run Custom Code - -## Specifying Events on Requests - -Requests also have a similar Events tab that you can use to specify what should happen when the Request is completed; On Error and On Completed. - -![Event on Request](./_images/ab-triggering-events-in-the-app-specifying-events-in-editor-2.png) - -Unlike Component level events, these only allow for custom code to be written. That said, inside the code editor for the event, you're able to programmatically perform any of the 4 options: - -- Navigate -- Run a Request -- Run a Function -- Run Custom Code - -## Conclusion - -By specifying Events on your Components and Requests, you can fine-tune the behavior of your app to create a better user experience. The App Builder makes it easy to specify these events with its visual interface and code editor. diff --git a/docs/projects/frontend/triggering-events-in-the-app-triggering-events-in-custom-frontend-logic.md b/docs/projects/frontend/triggering-events-in-the-app-triggering-events-in-custom-frontend-logic.md deleted file mode 100644 index 4bc4420..0000000 --- a/docs/projects/frontend/triggering-events-in-the-app-triggering-events-in-custom-frontend-logic.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 'triggering-events-in-the-app-triggering-events-in-custom-frontend-logic' -sidebar_label: 'Triggering events in custom front-end logic' -redirect_from: '/frontend/triggering-events-in-the-app/triggering-events-in-custom-front-end-logic' -slug: '/projects/frontend/triggering-events-in-the-app/triggering-events-in-custom-front-end-logic' ---- - -# Triggering Events in Custom Front-end Logic - -This article describes how developers can trigger events in custom frontend logic. - ---- - -Just like an event listener can be set on the browser natively using Javascript, they can also be set in custom front-end logic using App Builder. - -In order for an Event to get trigger first, it needs to be set. You can do this either in the Page code section of your App Settings or using a Function that runs on a certain page. For example: - -```js -// Programatically set event listeners on all Button Components -document.querySelectorAll('button').forEach((el) => { - el.addEventListener('click', (e) => console.log('I was clicked: ', e.target)); -}); -``` - -This code will log `"I was clicked: Button Name"` to the console every time any button is clicked on that page. You can also set different events for different buttons using unique IDs, classes, or other attributes. - -### Emitting Events - -Currently App Builder has no way implementation of a global event bus or event emitter. You can use native browser APIs like `window.postMessage` when relevant, or develop custom emitters using global Functions or modules. diff --git a/docs/projects/gettingstarted/common-tasks-building-responsive-applications.md b/docs/projects/gettingstarted/common-tasks-building-responsive-applications.md deleted file mode 100644 index 493f5f9..0000000 --- a/docs/projects/gettingstarted/common-tasks-building-responsive-applications.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 'common-tasks-building-responsive-applications' -sidebar_label: 'Building Responsive Applications' -redirect_from: '/gettingstarted/commontasks/building-responsive-applications' -slug: '/gettingstarted/commontasks/building-responsive-applications' ---- - - -# Building Responsive Applications - -Ensuring that applications display correctly across various devices and screen sizes requires a blend of design and development strategies. In App Builder, developers have enough tools and control to set up their applications. - -## Overview - -Here are a few key concepts: - - - **Viewport**: The area in App Builder that renders the page currently being edited. Users can change the size of the viewport in three ways: - - Selecting from the viewport size selector in the center on the top bar. This selector has typical screen sizes. - - Entering a specific size in the viewport size input next to the viewport size selector. - - Dragging the edges of the viewport. - - - **Media query CSS**: This can be accessed from the bottom viewport size selector. This is the ideal location to put size-specific styling instructions. - - - **Media query breakpoints**: Managed from the theme module, this allows developers to set up the breakpoint for their media query rules used in the media query CSS. Adding or deleting breakpoints does not affect the viewport size selector. - -Let's review the steps to add responsive instructions to an existing app. Below is the **User profile** page of the "Jumpstart with accelerators”. - - -![Image](./_images/common-tasks-building-responsive-applications-02.png) - - We will use the viewport size selector to see how the app looks in other resolutions. - - -![Image](./_images/common-tasks-building-responsive-applications-03.png) - - -Once the width gets smaller, some of our elements start to overlap. We can test more by dragging the viewport's edges to understand where to add a rule. - - -![Image](./_images/common-tasks-building-responsive-applications-04.png) - - -## Editing and Deleting Breakpoints - -Let's assume we want a rule for screens of width below 992px. The first step is to ensure our breakpoints are set up to let us achieve what we want. Open the theme section and navigate to **Media Queries**. - - -![Image](./_images/common-tasks-building-responsive-applications-05.png) - - -App Builder comes with a set of default breakpoints, but users can modify these as needed. Let’s remove some breakpoints and edit others to have a breakpoint for screens smaller than 992px. - -You can delete breakpoints by clicking the trash icon next to it: - - -![Image](./_images/common-tasks-building-responsive-applications-06.png) - - -You can edit breakpoints by clicking the pencil icon: - - -![Image](./_images/common-tasks-building-responsive-applications-07.png) - - -You can lower the limit and then save it by clicking the checkmark icon. - - -![Image](./_images/common-tasks-building-responsive-applications-10.png) - -In the end, our breakpoints look like this: - - -![Image](./_images/common-tasks-building-responsive-applications-11.png) - - -## Working with CSS Selectors - -Back on our page, we aim to make the inner menu disappear on smaller resolutions. We will need a [CSS Selector](https://www.w3schools.com/cssref/css_selectors.php). When writing your media query CSS, you can use any valid CSS selector. To make our lives easier, let's just add an ID to the container we want to hide. In our example, we used `UserProfileInnerLeftBar`. - - -![Image](./_images/common-tasks-building-responsive-applications-12.png) - - -There are plenty of options for styling within App Builder. App Builder uses rules to manage the precedence of each style configuration to make its behavior predictable. In general, styling rules are evaluated in this order (with subsequent rules overriding the previous one): - - 1. Theme configuration, configured in the theme module. - 2. Component defaults, configured in the theme module. - 3. Global CSS, managed from within the theme module. - 4. Media query CSS, accessible from the viewport size selector. - 5. Component instance style, configurable from the style tab of each component instance. - 6. Component instance custom CSS, available at the bottom of the style pane of each component instance. - -In our example, we will be overriding the `display` attribute of the element, so we need to ensure it is not set from the component instance style. Otherwise, as indicated in the above rules, its presence will override our media query CSS. - -With the container in question selected, we access its style pane. - - -![Image](./_images/common-tasks-building-responsive-applications-13.png) - - -Click on the current option to make sure none is selected. - - -![Image](./_images/common-tasks-building-responsive-applications-14.png) - - -Now, we can edit our media query CSS by opening it using the viewport size selector. - - -![Image](./_images/common-tasks-building-responsive-applications-15.png) - - - -Notice how our breakpoints are represented here. In the appropriate place, we can add a CSS rule using the component identifier as the selector. - - -![Image](./_images/common-tasks-building-responsive-applications-16.png) - - -Returning to our page, we can see the element is not visible on smaller resolutions. - - -![Image](./_images/common-tasks-building-responsive-applications-17.png) - - -Although this was a straightforward example, the sequence and approach to implementing responsive design are always the same. You can use similar steps to ensure your application renders correctly in different resolutions. diff --git a/docs/projects/gettingstarted/common-tasks-configuring-role-based-access-control.md b/docs/projects/gettingstarted/common-tasks-configuring-role-based-access-control.md index 1f7fe8b..02e5b7b 100644 --- a/docs/projects/gettingstarted/common-tasks-configuring-role-based-access-control.md +++ b/docs/projects/gettingstarted/common-tasks-configuring-role-based-access-control.md @@ -9,7 +9,7 @@ When developing applications, there are two key aspects that can potentially inh Whether you are creating a simple blog or a multi-tenant SaaS solution, setting clear boundaries through roles and permissions is essential. This ensures that users only interact with the data and functionalities they are allowed to access. 8base's RBAC is tailored to offer both adaptability and potency, allowing developers to define nuanced permissions effortlessly. -In this section, we will delve into a practical example, outlining roles and permissions for a hypothetical blogging platform. For or a more in-depth exploration of RBAC in 8base, please refer to [Roles and Permissions](../backend/8base-console-roles-and-permissions.md) and [Authentication](../backend/8base-console-authentication.md). +In this section, we will delve into a practical example, outlining roles and permissions for a hypothetical blogging platform. For or a more in-depth exploration of RBAC in 8base, please refer to [Roles and Permissions](../backend/app-services/roles-and-permissions.md) and [Authentication](../backend/app-services/authentication-index.md). ## The Data @@ -27,7 +27,7 @@ There is a difference between Users and Team Members in 8base: - **Users** are individuals who sign-up for the application you have built. Their roles determine permissions within the application. -For an in-depth understanding, refer to [Project Team Management](../8basehome/projects/projects-team-management.md) and [Users](../backend/8base-console-platform-tools-users.md). +For an in-depth understanding, refer to [Project Team Management](../8basehome/projects/projects-team-management.md) and [Team and User Administration](../backend/app-services/administer-users.md). ## Setting up Roles and Permissions @@ -69,7 +69,7 @@ Now we will create another new role called "Reader". Readers will only have read We need an administrator role, which can only be given to team members. We will use the default "Administrator" role that 8base provides. This role has all permissions enabled by default, granting team members full access to manage content, users, and application settings within the 8base Management Console. -For more on roles and permissions, explore [Roles and Permissions](../backend/8base-console-roles-and-permissions.md). +For more on roles and permissions, explore [Roles and Permissions](../backend/app-services/roles-and-permissions.md). ## Authentication @@ -115,7 +115,7 @@ mutation UserSignUpWithPassword( } ``` -To learn more about authentication in 8base, see [Understanding Authentication](../backend/8base-console-authentication.md). +To learn more about authentication in 8base, see [Understanding Authentication](../backend/app-services/authentication-index.md). ## Custom Filters @@ -151,7 +151,7 @@ Custom filters control data access. Here's how to set one up: This filter ensures that Editors can only update posts from authors in their domain. -Interested in mastering custom filters? Check out [Custom Filters](/projects/backend/roles-and-permissions/#custom-filters). +Interested in mastering custom filters? Check out [Custom Filters](../backend/app-services/roles-and-permissions.md/#custom-filters). ## Creating API Tokens @@ -171,6 +171,6 @@ API Tokens allow scheduled post publication without direct user intervention. To Using this token, a server-side script can fetch scheduled posts and publish them without user intervention. Note that by default, API Tokens have no permissions, hence associating roles is crucial. -For a deeper dive into API tokens and their capabilities, visit [API Tokens](/projects/backend/roles-and-permissions/#api-tokens). +For a deeper dive into API tokens and their capabilities, visit [API Tokens](../backend/app-services/roles-and-permissions.md/#api-tokens). With these settings, your blogging platform offers differentiated access for Editors, Readers, and Administrators. It is also primed for server-side operations via API Tokens, ensuring a secure and efficient environment. diff --git a/docs/projects/gettingstarted/common-tasks-create-multiple-records-single-operation.md b/docs/projects/gettingstarted/common-tasks-create-multiple-records-single-operation.md index 93c165e..34ff2ce 100644 --- a/docs/projects/gettingstarted/common-tasks-create-multiple-records-single-operation.md +++ b/docs/projects/gettingstarted/common-tasks-create-multiple-records-single-operation.md @@ -1,7 +1,7 @@ --- id: 'common-tasks-create-multiple-records-single-operation' sidebar_label: 'Creating and Updating Multiple Records in a Single Operation' -redirect_from: '/gettingstarted/commontasks/create-multiple-records-single-operation' +redirect_from: '/projects/gettingstarted/commontasks/create-multiple-records-single-operation' slug: '/gettingstarted/commontasks/create-multiple-records-single-operation' --- diff --git a/docs/projects/gettingstarted/common-tasks-extending-the-api.md b/docs/projects/gettingstarted/common-tasks-extending-the-api.md index bbc62b5..22234c0 100644 --- a/docs/projects/gettingstarted/common-tasks-extending-the-api.md +++ b/docs/projects/gettingstarted/common-tasks-extending-the-api.md @@ -1,7 +1,7 @@ --- id: 'common-tasks-extending-the-api' sidebar_label: 'Extending the API' -redirect_from: '/gettingstarted/commontasks/extending-the-api' +redirect_from: '/projects/gettingstarted/commontasks/extending-the-api' slug: '/gettingstarted/commontasks/extending-the-api' --- # Extending the API diff --git a/docs/projects/gettingstarted/common-tasks-implementing-pagination-api-queries.md b/docs/projects/gettingstarted/common-tasks-implementing-pagination-api-queries.md deleted file mode 100644 index 664ac2d..0000000 --- a/docs/projects/gettingstarted/common-tasks-implementing-pagination-api-queries.md +++ /dev/null @@ -1,451 +0,0 @@ ---- -id: 'common-tasks-implementing-pagination-api-queries' -sidebar_label: 'Implementing Pagination Using 8base GraphQL API Queries' -redirect_from: '/gettingstarted/commontasks/implementing-pagination-api-queries' -slug: '/gettingstarted/commontasks/implementing-pagination-api-queries' ---- -# Implementing Pagination Using 8base GraphQL API Queries - -Effectively managing large data sets is a crucial aspect of any robust application. One proven way to enhance the efficiency and speed of data retrieval is through pagination. In essence, pagination works by dividing your data into smaller, more manageable segments. - -Pagination is primarily achieved using the `first` and `skip` arguments. - -## Understanding the `first` and `skip` Arguments - -The `first` argument specifies the number of items to display on a page. It essentially sets a limit on the number of records that a query returns. The default and maximum limit for this argument is 5000 records. - -On the other hand, the `skip` argument determines the number of items to skip before something is displayed. It specifies the starting point for data retrieval in the context of the entire data set. This argument is particularly useful for accessing subsequent pages of data. - -## Implementing Pagination - -When implementing pagination in a query, the `first` and `skip` arguments are manipulated to control the subset of data that is retrieved. For instance, to display the first two items, `first` is set to 2 and `skip` is set to 0. - -**Query:** - -```graphql -query { -# First consider 0 as the starting slice of paginated rcords. As this -# number is increased, the prior results leave out previously fetched -# records. (i.e., skip 0 -> skip 3 -> skip 6 -> skip 9...) - postsList(skip: 0, first: 3) { - items { - title - } - } -} -``` - -**Response:** - -```graphql -{ - "data": { - "postsList": { - "items": [ - { - "title": "Awesome Possum" - }, - { - "title": "A Sunset and Waves" - }, - { - "title": "Vapor Distilled Water for All" - } - ] - } - } -} -``` - -## The Backend Data - -Every 8base Backend automatically delivers a user table. - -![Pagination](_images/implementing-pagination-01.png ) - -To query these users, we input the following query into the **API Explorer**: - -**Query:** - -```graphql -query TeamMembers( - $filter: UserFilter -) { - usersList( - filter: $filter - - sort: { firstName: ASC } - ) { - count - - items { - id - email - firstName - lastName - status - createdAt - avatar { - downloadUrl - } - roles { - items { - id - name - } - } - } - } -} - -``` - -**Response** - -Here is a snippet of the response: - -```graphql -{ - "data": { - "usersList": { - "count": 12, - "items": [ - { - "id": "clnnv3fj3007q08ml5z3p5fft", - "email": "Bruce@wayne.com", - "firstName": "Bruce", - "lastName": "Wayne", - "status": "active", - "createdAt": "2023-10-13T00:19:49.984Z", - "avatar": { - "downloadUrl": "https://cdn.filestackcontent.com/security=policy:eyJjYWxsIjpbInJlYWQiLCJjb252ZXJ0Il0sImV4cGlyeSI6MTY5NzI0MTYwMCwiaGFuZGxlIjoiVWd1UUNESGhUb2V2ZWozMDkxYXEifQ==,signature:0988af19fa9d94c3024d88029982c90c996cbef76cad1749b3410fb9ebc52f6b/UguQCDHhToevej3091aq" - }, - "roles": { - "items": [ - { - "id": "cllye657r004t08kw5hncblc0", - "name": "Administrator" - } - ] - } - }, - { - "id": "clnnv14n2005t08mleu9b35v8", - "email": "Charles@dean.com", - "firstName": "Charles", - "lastName": "Dean", - "status": "active", - "createdAt": "2023-10-13T00:18:02.558Z", - "avatar": { - "downloadUrl": "https://cdn.filestackcontent.com/security=policy:eyJjYWxsIjpbInJlYWQiLCJjb252ZXJ0Il0sImV4cGlyeSI6MTY5NzI0MTYwMCwiaGFuZGxlIjoidFZIRDl6RGRSeGlFMGFwNExJamwifQ==,signature:ab6f47734b4fa02ecd034592cc2d731a1b7ae13da9359fa2ff7d25b2a14d0736/tVHD9zDdRxiE0ap4LIjl" - }, - "roles": { - "items": [ - { - "id": "cllye657r004t08kw5hncblc0", - "name": "Administrator" - } - ] - } - }, - { - "id": "cllyfazq000ih08jyf1ty79jw", - "email": "carlosjimenezrobayo@gmail.com", - "firstName": "Charlie", - "lastName": "Garcia", - "status": "active", - "createdAt": "2023-08-31T00:23:52.152Z", - "avatar": { - "downloadUrl": "https://cdn.filestackcontent.com/security=policy:eyJjYWxsIjpbInJlYWQiLCJjb252ZXJ0Il0sImV4cGlyeSI6MTY5NzI0MTYwMCwiaGFuZGxlIjoiN0ZmWVQ1YjhTU2EwVlRPUVhFS0gifQ==,signature:faa5f1982b733dd1a3dc117bb908a8db95dd84029efa73e4ad6f421a492dcee3/7FfYT5b8SSa0VTOQXEKH" - }, - "roles": { - "items": [ - { - "id": "cllye657r004t08kw5hncblc0", - "name": "Administrator" - } - ] - } - }, - ] - } - - } - } -``` -![Pagination](_images/implementing-pagination-02.png) - -Now we want to split the previous query response into two pages, to show the list of users in the Frontend. We will use the `first` and `skip` arguments. - -**Query:** - -```graphql -query TeamMembers( - $filter: UserFilter -) { - usersList( - skip: 0 - first: 6 - filter: $filter - sort: { firstName: ASC } - ) { - count - items { - id - email - firstName - lastName - status - createdAt - avatar { - downloadUrl - } - roles { - items { - id - name - } - } - } - } -} - -``` - -Using `skip: 0` / `first: 6` will bring only the first six records of the response. To get the following 6, we must send the following: - -`skip: 6` / `first: 6`. - -This way, we have two pages showing six records each. - -## Frontend Implementation - -### Adding the Query - -Our data is set up in the backend and we have a query ready. Let's dive into how we can leverage pagination in our frontend. We need to add a resource to our application. - -To assess the resources integrated with your frontend, navigate to the **Resources** section. This can be accomplished by selecting the corresponding icon located in the sidebar. - -![Pagination](_images/implementing-pagination-03.png ) - -You can select a specific resource to view more detailed information. - -![Pagination](_images/implementing-pagination-04.png ) - -Here is the detailed view for a resource: - -![Pagination](_images/implementing-pagination-05.png ) - - -Now let’s craft the query: - -1. On the right-hand side, click **Requests**. -![Pagination](_images/implementing-pagination-06.png) -2. Create a **Global Request** as a **Lazy Query**. -![Pagination](_images/implementing-pagination-07.gif) -3. If you want to update the `first` and `skip` values with a frontend event, you will need to modify their values to use variables. So, instead of using: - -```graphql -query TeamMembers( - $filter: UserFilter -) { - usersList( - skip: 0 - first: 6 - filter: $filter - ) -``` -Your query should look like this: - -```graphql -query TeamMembers( - $filter: UserFilter - $skip: Int - $first: Int -) { - usersList( - skip: $skip - first: $first - filter: $filter - sort: { firstName: ASC } - ) { - count - items { - id - email - firstName - lastName - status - createdAt - avatar { - downloadUrl - } - roles { - items { - id - name - } - } - } - } -} -``` - -4. Enter the query above in the query field of your new request and give it a name. -5. Click **Save & Run**. - -![Pagination](_images/implementing-pagination-08.png ) - -At this moment, we will not send the variables for `first` and `skip`. We will do this in another section, because this is not mandatory. If we execute the request, it will give us the total list without pagination. - -### Using the Query - -In this section, we will guide you through the process of using a GraphQL query in the frontend of your application. We will construct a webpage that displays a list of personnel data fetched from our backend. - -To achieve this, we will leverage a local navigation event, with the **Run custom code** option. This action is necessary as our **Lazy Query** requires the values of the `skip` and `first` variables to be passed according to the data we intend to display. - -In this scenario, the variables will be passed as follows: - -``` -- `skip: 0` -- `first: 6` -``` - -Our backend table contains twelve records. This configuration will display the first six records on the initial page. - -### Accessing Local Navigation Events - -1. Click on **Pages** in the sidebar. -![Pagination](_images/implementing-pagination-09.png ) -2. Locate your page and click on the gear icon to view its settings. -![Pagination](_images/implementing-pagination-10.png ) -3. The settings panel will appear. The Local **Navigation Events** section is located at the bottom. -![Pagination](_images/implementing-pagination-11.gif) - -### Configuring **BeforeRouteEnter** Event - - -1. Select the **BeforeRouteEnter** option. We want the query to execute when the page loads. -2. Then, choose the custom code option to enter the request execution code. -![Pagination](_images/implementing-pagination-12.png ) -3. The code should be structured as follows, sending the `skip` and `first` variables: - -```javascript -accUsersGet.run({ - variables: { - "skip": 0, - "first": 6 - } -}); -``` -![Pagination](_images/implementing-pagination-13.png ) - -4. After implementing the code, be sure to save your changes. Click on the **Save** button located at the top of the page settings. -![Pagination](_images/implementing-pagination-14.png ) - -Now your page is set up to execute the GraphQL query upon load. - -### Rendering Query Responses with the Looper Component - -The time has come to render the query response to the user. - -We will use the looper component to show the information that comes in the query response. - -The looper component is designed to iterate over an array of data, providing a repeating structure to display each array item. - -### Connecting the Query Response to the Looper - -First, we need to connect our query response to the looper component. This connection can be achieved through the Loop Data field. In this example, we will use the **Enter Code** option. - -![Pagination](_images/implementing-pagination-15.png ) - -The reference to our query response will be placed in the **Loop Data** dropdown between {{ }}: `{{ accUsersGet?.data }}`. - -![Pagination](_images/implementing-pagination-16.png ) - -By default, the **Item Name** field is set to "item". This serves as the argument we will use to access each element in our query response. - -### Configuring the Card Component - -Next, we will add a component within the looper to display the iterated information. For this instance, we will use a **Card Component** as it aligns well with our example. - -![Pagination](_images/implementing-pagination-17.png ) - -The **Card Component** should be configured as follows: - -1. **Card Header**: The header will display the first and last name of each user. Using our "item" argument, it will look like this: `{{item?.firstName}} {{item?.lastName}}`. -![Pagination](_images/implementing-pagination-18.png ) - -2. **Card Content**: The content will display the user's profile photo. The image source configuration will be: `{{item?.avatar?.downloadUrl}}`. -![Pagination](_images/implementing-pagination-19.png ) - -3. **Typography Component**: Within the card content, we will add a typography component to display the user's email. The text of this component will be: `{{item?.email}}`. -![Pagination](_images/implementing-pagination-20.png ) - - -### Previewing the Result - -Once these steps have been completed, the component is set to display the information. To preview the result, execute the request from the requests panel. - -![Pagination](_images/implementing-pagination-21.gif ) - -:::note -The pagination will not appear in the preview. When executing the query from the request panel, it is performed without a value in the `skip` and `first` variables. -::: - -### Displaying the Second Page - -Previously, we configured a local navigation event to trigger our query when the page loads. This displays the first page of our response, corresponding to the first 6 records. The next step involves providing a mechanism for the user to re-execute the query, this time aiming to display the subsequent page. - -In order to achieve this, we will enhance our application's interface by adding a button to the canvas. - -**Configuring the Button** - -Here are the steps to add an `onClick` event to the button: - - -1. Drag a button onto the canvas. -2. Go to the component and click on it. This action will open the properties panel. -![Pagination](_images/implementing-pagination-22.png ) -3. In the properties panel, select the **Events** tab. -![Pagination](_images/implementing-pagination-23.png ) -4. Under this tab, add an **On Click** event and choose **Run Custom Code**. -![Pagination](_images/implementing-pagination-24.png ) -5. Just like we did for the local navigation event, we will incorporate the code to execute our request. This code will send the values for the `skip` and `first` variables. - -``` -- `skip`: 6 -- `first`: 6 -``` - -6. These particular values will trigger the query execution and fetch the next 6 records in the response. -```javascript -accUsersGet.run({ - variables: { - "skip": 0, - "First": 6 - } -}); -``` - -![Pagination](_images/implementing-pagination-25.png ) - -7. After entering the code, save the configuration by clicking **Done**. - -With that, we have successfully configured the pagination for the second page of our application. - -### Previewing the Application - -In the editor's header menu, click the **Preview** button to launch a preview of your application. - -![Pagination](_images/implementing-pagination-26.gif ) - -Here is the first page: - -![Pagination](_images/implementing-pagination-27.png ) - -And here is the second one: - -![Pagination](_images/implementing-pagination-28.png ) - -Congratulations! Your application now has pagination. diff --git a/docs/projects/gettingstarted/common-tasks-index.md b/docs/projects/gettingstarted/common-tasks-index.md index 2ebc0d2..f438384 100644 --- a/docs/projects/gettingstarted/common-tasks-index.md +++ b/docs/projects/gettingstarted/common-tasks-index.md @@ -1,34 +1,17 @@ --- id: 'common-tasks-index' sidebar_label: 'Common tasks' -redirect_from: '/gettingstarted/commontasks/index' +redirect_from: '/projects/gettingstarted/commontasks/index' slug: '/gettingstarted/commontasks' --- # Common Tasks When working with 8base, developers frequently encounter tasks that are central to application development, regardless of the specific use-case or business logic. This section is designed to guide you through these essential activities with hands-on, practical walkthroughs based on real-life use cases. -Here's a brief overview of the subsections you will find: +In this section, you will find: - -- [Configuring Role-based Access Control](common-tasks-configuring-role-based-access-control.md): Dive into permissions configurations and understand the power of advanced filters. - -- [Using Groups and Aggregations in Queries](common-tasks-using-groups-and-aggregations-queries.md): Get a grasp on leveraging grouping and aggregation functions in a GraphQL Query. - -- [Creating and Updating Multiple Records in a Single Operation](common-tasks-create-multiple-records-single-operation.md): Explore how to utilize mutations to both create multiple records and update existing ones using filters. - +- [Configuring Role-based Access Control](common-tasks-configuring-role-based-access-control.md): Dive into permissions configurations and understand the power of advanced filters. +- [Using Groups and Aggregations in Queries](common-tasks-using-groups-and-aggregations-queries.md): Get a grasp on leveraging grouping and aggregation functions in a GraphQL Query. +- [Creating and Updating Multiple Records in a Single Operation](common-tasks-create-multiple-records-single-operation.md): Explore how to utilize mutations to both create multiple records and update existing ones using filters. - [Extending the API](common-tasks-extending-the-api.md): A walkthrough for creating custom resolvers to expand your GraphQL API. -- [Implementing Pagination Using 8base GraphQL API Queries](common-tasks-implementing-pagination-api-queries.md): Learn the nuances of creating queries for paginated results and integrating them into user interfaces. - -- [Using and Validating Forms](common-tasks-using-validating-forms.md): Understand how to leverage 8base's form controls and the form block's robust validation capabilities. - -- [Leveraging Navigation Events](common-tasks-leveraging-navigation-events.md): Dive into practical examples showcasing the varied global and local navigation events. - -- [Building Responsive Applications](common-tasks-building-responsive-applications.md): A guide on harnessing media queries and breakpoints for responsive designs. - -- [Real-time Applications: Using 8base Subscriptions with your Frontend](common-tasks-real-time-applications.md): A hands-on guide to implementing GraphQL subscriptions in 8base. - - - -As you progress through these sections, you will gain both a theoretical understanding and practical know-how, bridging the gap between conceptual knowledge and its real-world application. diff --git a/docs/projects/gettingstarted/common-tasks-leveraging-navigation-events.md b/docs/projects/gettingstarted/common-tasks-leveraging-navigation-events.md deleted file mode 100644 index e478726..0000000 --- a/docs/projects/gettingstarted/common-tasks-leveraging-navigation-events.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 'common-tasks-leveraging-navigation-events' -sidebar_label: 'Leveraging Navigation Events' -redirect_from: '/gettingstarted/commontasks/leveraging-navigation-events' -slug: '/gettingstarted/commontasks/leveraging-navigation-events' ---- - - -# Leveraging Navigation Events - -Navigation is more than transitioning between pages—it's about proactively responding to user activities. Incorporating these events strategically can heighten user experience, ensuring navigation within the application is both intuitive and meaningful. - -## About Navigation Events - -Navigation events in 8base address this in two ways: **Global** and **Local**. - -**Global Navigation Events** are actions that apply across every page transition in your application. - -You can access them by going to **Settings** > **Global Navigation Events**. - - -![Navigation events](_images/leveraging-nav-events-01.png ) - - -**Local Navigation Events** are specific to transitions into or out of a particular page. You can see them when you open a page’s settings. - - -![Navigation events](_images/leveraging-nav-events-02.png ) - - -Each event can initiate one of three actions: **Run Request**, **Run Function**, or execute **Custom Code**. - - -![Navigation events](_images/leveraging-nav-events-03.png ) - - -When opting for the **Custom Code** action, you gain access to two essential arguments: - - - -* `to`: Provides insights into the page being navigated to. -* `from`: Provides insights into the page being navigated away from. - - -![Navigation events](_images/leveraging-nav-events-04.png ) - - -There are several different hooks: - -- **`beforeEach`**: Triggered before any navigation takes place. Useful for actions or checks that need to be executed prior to any route transition, like preloading user preferences or checking authentication. - - -- **`afterEach`**: Invoked after a navigation event has completed. Beneficial for post-navigation activities, such as logging or analytics. - - -- **`beforeRouteEnter`**: Executed before navigating into a specific route. This can be employed to ascertain if the user should be allowed access to a specific route, like verifying membership for a dashboard. - - -- **`beforeRouteUpdate`**: Triggered when the route remains the same, but the route parameters change. For instance, navigating from `/project/1` to `/project/2` would activate this event. Useful for fetching updated data without a full page reload. - - -- **`beforeRouteExit`**: Invoked before navigating away from a specific route. Vital for tasks like warning users of unsaved changes. - -Now we will explore practical scenarios within a fictional SaaS Management Tool designed to streamline project management and foster team collaboration. - -## Global Navigation Events - -### `beforeEach`: Preloading User Preferences - -**Use Case**: As users move between sections of the SaaS tool, you can preload certain data or settings. For example: a user's preferred theme or language settings. This ensures a consistent and personalized experience. - -**Action**: **Run Request** - -```graphql -query GetUserPreferences { - PreferencesList( - filter: { - id: "someUserId" - } - ) { - items { - theme - language - } - } -} -``` - - -![Navigation events](_images/leveraging-nav-events-05.png ) - - -**OnComplete Callback for Request**: - -```javascript -themeService.setValue(data.preferences.items.theme); -languageService.setValue(data.preferences.items.theme); -``` -![Navigation events](_images/leveraging-nav-events-06.png ) - -### `afterEach`: After Every Route Transition - -**Use Case**: After navigation events, you can log user activity for insights on the sections most visited. - -**Action**: Execute **Custom Code** - -```javascript -analyticsService.log(`Navigated from ${from.path} to ${to.path}`) -``` - -![Navigation events](_images/leveraging-nav-events-07.png ) - -## Local Navigation Events - -### `beforeRouteEnter`: Before a Specific Route is Entered - -**Use Case**: Before displaying a project's detail page, fetch its latest data. This ensures users get the most recent information. - -**Action**: **Run Request** - -![Navigation events](_images/leveraging-nav-events-07-1.png ) - -**GraphQL Request**: - -```graphql -query GetProjectDetails( - $projectId: ID! -) { - project(id: $projectId) { - id - name - description - createdAt - updatedAt - } -} -``` - -![Navigation events](_images/leveraging-nav-events-07-2.png ) - - -### `beforeRouteUpdate`: Updating Parameters within the Same Route - -**Use Case**: On a task list, if a user clicks a specific task, update the URL and task detail view without a full page reload. - -**Action**: Execute **Custom Code** - - ```javascript - if (to.params.taskId !== from.params.taskId) { - - // Fetch and update the task detail view - - taskService.fetchAndUpdateView(to.params.taskId); - - } -``` - -![Navigation events](_images/leveraging-nav-events-08.png ) - -### `beforeRouteExit` (Local Event): Invoked Before Navigating Away from a Specific Route - -**Use Case**: Imagine you're working within the **Task Creation** page of our management tool. It is important to ensure that users have either saved their progress or are aware they might be discarding unsaved tasks before navigating away. - -**Action**: Run Function - -**Function**: `warnUnsavedChanges()` - -![Navigation events](_images/leveraging-nav-events-09.png ) - -This function could be designed to check if any changes have been made within the **Task Creation** page and, if so, display a modal or alert warning the user about potential data loss. - -```javascript - if (document.getElementById('task-input').value) { // Checking if the input field has any content - return "You have unsaved changes! Are you sure you want to leave without saving?"; - } -``` - -![Navigation events](_images/leveraging-nav-events-10.png ) - -Here, the function checks if the task input field has any content. If it does, it returns a warning message. The actual method of displaying this message can vary, but a common approach is to use a browser's default confirmation dialog. \ No newline at end of file diff --git a/docs/projects/gettingstarted/common-tasks-real-time-applications.md b/docs/projects/gettingstarted/common-tasks-real-time-applications.md deleted file mode 100644 index 95196d8..0000000 --- a/docs/projects/gettingstarted/common-tasks-real-time-applications.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 'common-tasks-real-time-applications' -sidebar_label: 'Real-time Applications: Using 8base Subscriptions with your Frontend' -redirect_from: '/gettingstarted/commontasks/real-time-applications' -slug: '/gettingstarted/commontasks/real-time-applications' ---- -# Real-time Applications: Using 8base Subscriptions with your Frontend - -In dynamic web applications, real-time updates are integral for enhancing user experience. Think of a Task Management SaaS application where team members are distributed across different locations. Being instantly notified about new tasks without having to constantly refresh the page can significantly improve the app's interactivity. GraphQL subscriptions make such real-time features — like chats, notifications, and live feeds — a reality. - -## Advantages of GraphQL Subscriptions - -- **Real-time Data**: Changes are reflected immediately, eliminating the need for manual reloads. - -- **Efficiency**: Only specific parts of the page that change are updated. - -- **Interactivity**: Enhances the responsiveness of applications, making them feel more alive. - -For the scope of this guide, we will not be building an entire Task Management SaaS. Instead, we will create a foundational piece of it: a basic React application that demonstrates the power of real-time notifications. Through this example, users will receive instant alerts whenever a new task entry is made. - -## Step 1: Backend Setup - -Start by preparing the backbone of your data model. In the 8base backend, set up a `Tasks` table with a `name` text field. This table will store the tasks that we want to monitor in real-time. - -![real time applications](_images/real-time-applications-01.png ) - -## Step 2: Setting Up the React Project - -We leverage `create-react-app` here, the official tool backed by the React team, to bootstrap our project. It effortlessly sets up a new project environment, ensuring we dive straight into coding without dealing with initial configurations. For this walkthrough, Node.js version `18.11.0` was used: - -`npm i -g create-react-app` -`create-react-app task-management-subscription-example && cd task-management-subscription-example` - -## Step 3: Integrating Apollo Client and WebSocket Support - -Apollo Client forms the cornerstone of our application. It handles tasks like data fetching, caching, and UI updates. To ensure our app can seamlessly stream real-time data, we will employ WebSockets. Hence, we include the `subscriptions-transport-ws` library to grant our GraphQL subscriptions WebSocket support. - -We will add these libraries: - -`npm i @apollo/client subscriptions-transport-ws` - -These libraries link the frontend to the backend service via Apollo Client. WebSockets ensures a channel for secure and rapid data streaming. Implement the supplied code in the `src/index.js` file, adjusting with your credentials. - -```javascript -import React from 'react'; -import ReactDOM from 'react-dom'; -import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client' -import { WebSocketLink } from "@apollo/client/link/ws"; - -import App from './App'; - -const WORKSPACE_ID = 'YOUR WORKSPACEID'; // You can find one in Backend -> Settings -const ENVIRONMENT_NAME = 'Master'; // Or any other name if you use 8base CI/CD -const TOKEN = 'YOUR_SECRET_TOKEN'; // Remember to keep your token secret! -const WS_URL = 'wss://ws.8base.com'; - -export class SubscriptionLink extends WebSocketLink { - constructor({ uri }) { - super({ - uri, - options: { - connectionParams: () => ({ - workspaceId: WORKSPACE_ID, - environmentName: ENVIRONMENT_NAME, - token: TOKEN - }), - reconnect: true, - reconnectionAttempts: 5, - lazy: true, - }, - webSocketImpl: class WebSocketWithoutProtocol extends WebSocket { - constructor(url) { - super(url); - } - }, - }); - } -} - -const wsLink = new SubscriptionLink({ - uri: WS_URL, -}); - -const client = new ApolloClient({ - link: wsLink, - cache: new InMemoryCache() -}); - -ReactDOM.render( - - - , - document.getElementById('root') -); -``` - -![real time applications](_images/real-time-applications-02.png ) - -You can get the ID of your backend and Websocket Endpoint under **Settings**. - -![real time applications](_images/real-time-applications-03.png ) - -As for `TOKEN`- you can get it two ways: - -- As the response of a `userLogin` mutation. -![real time applications](_images/real-time-applications-04.png ) -- From the local storage of your current active 8base backend in the browser. Go to your 8base backend -> **Local Storage** -> **https://app.8base.com/** -> **auth** -> **token**. Copy the token value. -![real time applications](_images/real-time-applications-05.png ) - -Finally, replace your `src/App.js` code with following: - -```javascript -import { gql, useSubscription } from '@apollo/client' - -const SUBSCRIPTION_LOCAL = gql` -subscription { - Tasks(filter:{ - mutation_in: create - }){ - node{ - id - name - } - } -} -`; - -function App() { - const subscription = useSubscription(SUBSCRIPTION_LOCAL); - - if (subscription.data) { - return ( -
- New task is created: - 
{JSON.stringify(subscription.data, null, 2)}
-
- ); - } else { - return "Waiting for new tasks..."; - } -} - -export default App; -``` - -## Step 4: Launch and Test Your App - -It's showtime! Save the changes and start the app by executing this in your terminal: - -`npm run start` - -Keep an eye on the WebSocket connection initializing in the network tab for your browser. This affirms the readiness of your application for real-time data operations. - -![real time applications](_images/real-time-applications-06.png ) - -Time to test! Emulate real-time behavior by adding a fresh task via the **Data Viewer** of your 8base backend or another method. For example, executing `tasksCreate` mutation via Postman or any other request client. - -![real time applications](_images/real-time-applications-07.png ) - -When inserting a new task to the `Tasks` table, the app will promptly display a real-time notification with the response from the subscription. - - - -## Conclusion - -We have constructed a rudimentary real-time notification feature, reminiscent of what could be part of a larger Task Management SaaS app, harnessing 8base subscriptions and a React frontend. \ No newline at end of file diff --git a/docs/projects/gettingstarted/common-tasks-using-groups-and-aggregations-queries.md b/docs/projects/gettingstarted/common-tasks-using-groups-and-aggregations-queries.md index 12dd54b..2128ad7 100644 --- a/docs/projects/gettingstarted/common-tasks-using-groups-and-aggregations-queries.md +++ b/docs/projects/gettingstarted/common-tasks-using-groups-and-aggregations-queries.md @@ -358,5 +358,5 @@ Our first query gave us a huge list of movies, organized by ID, with no filterin ## Related Articles -* [Grouping and Aggregations](https://docs.8base.com/projects/backend/graphql-api/grouping-and-aggregations) +* [Grouping and Aggregations](https://docs.8base.com/backend/graphql-api/grouping-and-aggregations) * [Grouping and Aggregations on the GraphQL API](https://www.8base.com/8base-academy/grouping-and-aggregations-on-the-graphql-api) \ No newline at end of file diff --git a/docs/projects/gettingstarted/common-tasks-using-validating-forms.md b/docs/projects/gettingstarted/common-tasks-using-validating-forms.md deleted file mode 100644 index ba56a6c..0000000 --- a/docs/projects/gettingstarted/common-tasks-using-validating-forms.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 'common-tasks-using-validating-forms' -sidebar_label: 'Using and Validating Forms' -redirect_from: '/gettingstarted/commontasks/using-validating-forms' -slug: '/gettingstarted/commontasks/using-validating-forms' ---- -# Using and Validating Forms - -Forms are essential for data collection, providing a structured method to gather user input. - -8base Frontends contains two essential items for using forms: The form block and form components. - -## Form Block - -A form block is a container component, designed to house various form components or inputs. It is frequently used in scenarios requiring user input, such as sign-up forms or survey forms. -![Forms](_images/using-forms-01.png ) - -## Form Components - -![Forms](_images/using-forms-02.png ) - -Form components are individual elements placed within a Form Block. They collect different types of user data and include: - -* **Form Autocomplete**: is a normal text input enhanced by a panel of suggested options. -* **Form Checkbox**: Input that represents a selection. -* **Form Date Picker**: Input to capture dates. -* **Form Date Time Picker**: Input that captures date and time. -* **Form Field Array**: Displays form inputs based on a data array. -* **Form File Upload**: Input to upload multiple files. -* **Form Multiselector**: Input to select one or more from multiple options. -* **Form Radio Button group**: It selects a value from a set. -* **Form Rating**: Allows users to give feedback from a range of values. -* **Form Rich Text Editor**: Input that supports entering formatted text. -* **Form Selector**: Input that allows users to select an option from multiple values. -* **Form Slider**: Allows users to make selections from a range of values. -* **Form Switch**: Input to toggle the state of a setting on / off. -* **Form Textfield**: Input that captures text. -* **Form Time Picker**: Input to select a single time. - -## Use and Validations - -Forms are used by triggering an `On Submit` event, which occurs when a user submits the form. The data collected from the form inputs is then processed and stored as needed. The `initialValues` property can be used for pre-filling specific fields in the form. - -Let's build a simple page to create users in a database using the form components: - -We will drag and drop a form block to the canvas, then add the following components inside it: - -**FormTextField** -- Name: memberName -- Label: First Name - -**FormTextField** -- Name: memberLastName -- Label: Last Name - -**FormTextField** -- Name: memberPhone -- Label: Phone Number - -**Form Autocomplete** -- Name: autocompleteRoleUserCreated -Label: Role - -**Form Date Picker** -- Name: memberJoin -- Label: Join Date - -**Submit Button** -- Name: Save - -It should look like this: - -![Forms](_images/using-forms-03.png ) - -### Validating the Form - -Now, it's time to add validations to the form components we just added. This is facilitated by the **Add Field Validation** section present within the form block. - -![Forms](_images/using-forms-04.png ) - -To add a validation, click **Add Item**. Each item will have a name field that must match the name of the form component to which we want to apply it. - -For example, to apply required validation to the `memberName` field, the item should look like this: - -![Forms](_images/using-forms-05.png ) - -Once we create an item and match it with a field within the form, to add the desired validation, click on **Add Test**. - -Depending on the field type, the available validations will be shown. In this case, for the String type, these are: - -* Length -* Min -* Max -* Matches -* Email -* Url -* Uuid - -![Forms](_images/using-forms-06.png ) - -The form validations also allow us to add regular expressions. For example, for the `memberPhone` field, let’s add a regex to validate US phone numbers: - -1. Click on **Add Item**. -2. Match the name with the field to which you want to add validation, in this case `memberPhone`. -3. Under **Type**, select **String**. -4. Click on **Add Test**. -5. Select the **Matches** option. -6. Click on the gear icon. -7. Add an error message: "Please enter a valid US phone number." -8. Fill the field with the necessary regex, in this case: `^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[ 0-9]{4}$ ->` This regular expression will only allow phone numbers with this format: `(123)123-1234` -9. Click anywhere outside the dialog window to finish. -![Forms](_images/using-forms-07.png ) - -Next, let’s set up validation for a date type. Suppose we want to limit the user's date to join the team to a maximum of one month. Then we must do the following: - -1. Click on **Add Item**. -2. Match the name with the field to which you want to add validation, in this case, `memberJoin`. -3. Select **Type Date**. -3. Click on **Add Test**. -4. Select **Max**. -5. Click on the gear icon. -6. Add an error message: "New members cannot join more than one month in advance." -7. Enter the max date. -8. Click anywhere outside the dialog window to finish. -![Forms](_images/using-forms-08.png ) - -Finally, let's test our validations. Fill in the form, but leave some fields empty or with incorrect formats. When you click **Submit**, the validations errors will appear: - -![Forms](_images/using-forms-09.png ) - - -## Configuring the `OnSubmit` Event - -We are ready to submit the new user's data with the validations in place. - -Now, it is time to configure the form block's `OnSubmit` event. - -Let's go to the component's **Events** tab and click **Edit Custom Code**. - -![Forms](_images/using-forms-10.gif ) - -In the ensuing code example, we perform three critical steps: - -![Forms](_images/using-forms-11.png ) - -1. Capture the values entered in the Form inputs. -2. Execute a request to create a user, using the captured data. -3. Display a confirmation message to the user, indicating successful data submission. - -Upon completing these steps, click **Done**. This action finalizes your code edits. - -Now, you are set to execute the `OnSubmit` event. To do this, let’s preview our app and click on the **Save** button. Remember, this action triggers the submission of user data, after performing the validations. - -![Forms](_images/using-forms-12.gif ) diff --git a/docs/projects/gettingstarted/gettingstarted-index.md b/docs/projects/gettingstarted/gettingstarted-index.md index e38927a..e4ae924 100644 --- a/docs/projects/gettingstarted/gettingstarted-index.md +++ b/docs/projects/gettingstarted/gettingstarted-index.md @@ -6,12 +6,10 @@ slug: /gettingstarted # Getting Started -Get off to a good start by learning 8base fundamentals. These hands-on tutorials and templates will help you on your app building journey. +Get off to a good start by learning 8base fundamentals with these hands-on tutorials and templates. -Here's a brief overview of the subsections you will find: +In this section, you will find: -- [Walkthroughs](walkthroughs.md): Follow our end-to-end app building examples. Each walkthrough provides data, code examples, and best practices. - -- [Jumpstart with accelerators](jumpstart/jumpstart.md): Learn about our Accelerators, pre-packaged functionalities that work inside of 8base’s low-code tools to help you jumpstart your application development. - +- [Walkthroughs](walkthroughs.md): Follow our end-to-end app building examples. Each walkthrough provides data, code examples, and best practices. + - [Common Tasks](common-tasks-index.md): Developers frequently encounter tasks that are central to application development, regardless of the specific use-case or business logic. This section is designed to guide you through these essential activities with hands-on, practical examples based on real-life use cases. \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/_images/accountPage.png b/docs/projects/gettingstarted/jumpstart/_images/accountPage.png deleted file mode 100644 index 23c0df6..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/accountPage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/authenticationLayout.png b/docs/projects/gettingstarted/jumpstart/_images/authenticationLayout.png deleted file mode 100644 index 387f563..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/authenticationLayout.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/customComponentsCss.gif b/docs/projects/gettingstarted/jumpstart/_images/customComponentsCss.gif deleted file mode 100644 index 4219670..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/customComponentsCss.gif and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/customizeLayouts.png b/docs/projects/gettingstarted/jumpstart/_images/customizeLayouts.png deleted file mode 100644 index faf52e8..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/customizeLayouts.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/forgotPassword.png b/docs/projects/gettingstarted/jumpstart/_images/forgotPassword.png deleted file mode 100644 index e77d256..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/forgotPassword.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/globalCss.gif b/docs/projects/gettingstarted/jumpstart/_images/globalCss.gif deleted file mode 100644 index ee821cb..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/globalCss.gif and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/loginPage.png b/docs/projects/gettingstarted/jumpstart/_images/loginPage.png deleted file mode 100644 index 7ef0ae3..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/loginPage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/myAccountPage.png b/docs/projects/gettingstarted/jumpstart/_images/myAccountPage.png deleted file mode 100644 index 9dcedfc..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/myAccountPage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/poweredBy.svg b/docs/projects/gettingstarted/jumpstart/_images/poweredBy.svg deleted file mode 100644 index 929e1cc..0000000 --- a/docs/projects/gettingstarted/jumpstart/_images/poweredBy.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/projects/gettingstarted/jumpstart/_images/privatePrimaryLayout.png b/docs/projects/gettingstarted/jumpstart/_images/privatePrimaryLayout.png deleted file mode 100644 index ff5769b..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/privatePrimaryLayout.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/privateSecondaryLayout.png b/docs/projects/gettingstarted/jumpstart/_images/privateSecondaryLayout.png deleted file mode 100644 index 04ba288..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/privateSecondaryLayout.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/resetPasswordCode.png b/docs/projects/gettingstarted/jumpstart/_images/resetPasswordCode.png deleted file mode 100644 index 0c9562c..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/resetPasswordCode.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/roundIcon.svg b/docs/projects/gettingstarted/jumpstart/_images/roundIcon.svg deleted file mode 100644 index d65b758..0000000 --- a/docs/projects/gettingstarted/jumpstart/_images/roundIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/_images/sampleScreenshoot.png b/docs/projects/gettingstarted/jumpstart/_images/sampleScreenshoot.png deleted file mode 100644 index dd5ec2f..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/sampleScreenshoot.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/signupPage.png b/docs/projects/gettingstarted/jumpstart/_images/signupPage.png deleted file mode 100644 index c9698d2..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/signupPage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/teamMembersPage.png b/docs/projects/gettingstarted/jumpstart/_images/teamMembersPage.png deleted file mode 100644 index 0b27f3f..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/teamMembersPage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/themeCustomization.gif b/docs/projects/gettingstarted/jumpstart/_images/themeCustomization.gif deleted file mode 100644 index 9b2db4d..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/themeCustomization.gif and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/themeManagment.jpg b/docs/projects/gettingstarted/jumpstart/_images/themeManagment.jpg deleted file mode 100644 index be6df7e..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/themeManagment.jpg and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/userCreatePage.png b/docs/projects/gettingstarted/jumpstart/_images/userCreatePage.png deleted file mode 100644 index 8c2e1ee..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/userCreatePage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/_images/userProfilePage.png b/docs/projects/gettingstarted/jumpstart/_images/userProfilePage.png deleted file mode 100644 index 04b2704..0000000 Binary files a/docs/projects/gettingstarted/jumpstart/_images/userProfilePage.png and /dev/null differ diff --git a/docs/projects/gettingstarted/jumpstart/authentication-accelerator/forgot-password.md b/docs/projects/gettingstarted/jumpstart/authentication-accelerator/forgot-password.md deleted file mode 100644 index f58bade..0000000 --- a/docs/projects/gettingstarted/jumpstart/authentication-accelerator/forgot-password.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: 'forgot-password' -sidebar_label: 'Forgot Password Page' -slug: '/gettingstarted/jumpstart/authentication-accelerator/forgot-password' ---- -# Forgot Password Page - -The Forgot Password page in the Authentication Accelerator allows users to reset their password. We will guide you through implementing and using the Forgot Password function, along with the necessary requests and steps for resetting a password. - -![Forgot Password Page](../_images/forgotPassword.png) - -## Reset Password Workflow - -The "Forgot Password" functionality follows this process: - -1. **Request Password Reset Code**: The user initiates the password reset process by providing their email address. The `requestPasswordResetCode` function sends a request to generate a validation code. The code is sent to the user's email address. - -2. **Receive Validation Code**: The user receives the validation code in their email. - -3. **Confirm Password Reset**: The user enters the received validation code and their new password. The `confirmPasswordReset` function sends a request to confirm the password reset. - -4. **Password Reset Complete**: If the password reset is successful, the user can now log in with their new password. - -# Requests - -### Request Password Reset Code - -The `accAuthForgotPassword` request starts the process. The user provides their email address, a request is made to generate a validation code, and the code is sent to the user's email address. - -### Confirm Password Reset - -The user receives the validation code and they input it. The `accAuthForgotPasswordConfirm` request finishes the process, with the password that was entered in the initial step. diff --git a/docs/projects/gettingstarted/jumpstart/authentication-accelerator/login.md b/docs/projects/gettingstarted/jumpstart/authentication-accelerator/login.md deleted file mode 100644 index 29d9d27..0000000 --- a/docs/projects/gettingstarted/jumpstart/authentication-accelerator/login.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 'login' -sidebar_label: 'Login Page' -slug: '/gettingstarted/jumpstart/authentication-accelerator/login' ---- -# Login Page - -The Login page in the Authentication Accelerator allows users to securely log into your application. We will walk you through implementing and using the Login function, along with essential requests and dependencies. - -![Login Page](../_images/loginPage.png) - -## Functions - -### Login Function - -The `accAuthLogin` function is responsible for user login and authentication. When a user logs in, this function is called to initiate the login process. - -## Requests - -### LoginRequest - -The `accAuthLoginRequest` GraphQL mutation is used for user login. It takes the user's email, password, and authentication profile ID as input parameters and returns authentication tokens. - -This request is crucial for the login process as it authenticates the user and provides the necessary tokens for subsequent API requests. - -### UserGetByEmail - -The `accUserGetByEmail` GraphQL query is used to retrieve user information based on their email address. It verifies whether a user with the provided email address exists in your application. diff --git a/docs/projects/gettingstarted/jumpstart/authentication-accelerator/signup.md b/docs/projects/gettingstarted/jumpstart/authentication-accelerator/signup.md deleted file mode 100644 index 102d0a2..0000000 --- a/docs/projects/gettingstarted/jumpstart/authentication-accelerator/signup.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 'signup' -sidebar_label: 'Signup Page' -slug: '/gettingstarted/jumpstart/authentication-accelerator/signup' ---- -# Signup Page - -The Signup page in the Authentication Accelerator allows new users to register and create an account. We will guide you through implementing and using the Signup function, along with the necessary requests and dependencies. By following this documentation, you can implement a secure and user-friendly signup process in your application using the Authentication Accelerator's Signup Page. - - -![Signup Page](../_images/signupPage.png) - -## Functions - -### Signup Function - -The `accAuthSignup` function allows users to sign up with their email and password, and then logs them in. - -## Requests - -### Signup Request - -The `accAuthSignupRequest` GraphQL mutation is used for user signup. It takes the user's email, first name, last name, and password as input parameters and creates a new user account. - -### Login Request - -The `accAuthLoginRequest` GraphQL mutation is used for user login. It takes the user's email, password, and authentication profile ID as input parameters and returns authentication tokens. - -This request is used to log in the user after a successful signup. \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/jumpstart.md b/docs/projects/gettingstarted/jumpstart/jumpstart.md deleted file mode 100644 index b8e92ee..0000000 --- a/docs/projects/gettingstarted/jumpstart/jumpstart.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 'jumpstart' -sidebar_label: 'Jumpstart your project with accelerators' -slug: '/gettingstarted/jumpstart' ---- -# Jumpstart your project with accelerators - -Accelerators are pre-packaged functionalities that work inside of 8base’s low-code tools to help you jumpstart your application development. Accelerators work to facilitate common software application elements such as authentication, navigation, and user management. - -## Naming Convention for Accelerators - -At 8base, we follow a consistent naming convention for all states, requests, functions, and pages to make your development process smoother and more organized: - -- **Authentication (Auth)**: Identifier for Authentication related components. -- **Navigation (Nav)**: Identifier for Navigation components. -- **User Management (User)**: Identifier for User Management components. -- **Theme Management (Theme)**: Identifier for Theme Management components. - -Each accelerator's identifier is prefixed with "acc," followed by the accelerator's identifier, and then the name of the specific function, request, state, or page. Here is an example: - -- `accAuthLogin`: A function related to the Authentication accelerator's login functionality. -- `accNavSidebarGroups`: A state related to the Navigation accelerator's sidebar groups. - -This naming convention helps you easily identify and manage various components within your project. - -## Authentication Accelerator - -The Authentication Accelerator simplifies the implementation of user authentication and related pages. Use the links below to explore: - -### Components - -- [Login](./authentication-accelerator/login.md) -- [Signup](./authentication-accelerator/signup.md) -- [Forgot Password](./authentication-accelerator/forgot-password.md) - - -### States - -- `accAuthUserInfo`: State related to the user's authentication information. -- `accAuthLogoutModal`: State related to the user logout confirmation modal. - -## User Management Accelerator - -The User Management Accelerator simplifies the implementation of user management functionality, including CRUD (Create, Read, Update, Delete) operations. Use the links below to explore: - -### Components - -- [User Profile](./user-management-accelerator/user-profile.md) -- [User Create](./user-management-accelerator/user-create.md) -- [Team Members](./user-management-accelerator/team-members.md) -- [My Account](./user-management-accelerator/my-account.md) - -### States - -- `accUserAccountSettingsAvatar`: State related to the user's account settings avatar. -- `accUserDeleteModal`: State related to the user delete confirmation modal. -- `accUserGeneralTab`: State related to the general user profile tab. -- `accUserHeaderAvatar`: State related to the user's header avatar. -- `accUserManagementTab`: State related to the user management tab. -- `accUserToDelete`: State related to the user to be deleted. - -The User Management Accelerator empowers you to perform CRUD operations, making it effortless to manage members of your platform. Whether you need to create, read, update, or delete user profiles, this accelerator streamlines the process for a seamless user management experience. - -## Navigation Accelerator - -The Navigation Accelerator forms the backbone of your application's navigation structure, providing essential elements for easy navigation between pages. Explore the components and states below: - -### Components - -- [Sidebar Control](./navigation-accelerator/sidebar-control.md) -- [Breadcrumbs Managment](./navigation-accelerator/breadcrumbs-management.md) - -### States - -- `accNavBreadcrumbs`: State related to the breadcrumb navigation. -- `accNavSidebarGroups`: State related to the sidebar menu groups. -- `accIsSidebarOpen`: State to manage the visibility of the sidebar. - -The Navigation Accelerator plays a crucial role in providing a seamless user experience by enabling efficient navigation throughout your application. Whether it's tracking your location with breadcrumbs or accessing different sections through the sidebar, this accelerator enhances the user journey. - -## Theme Management Accelerator - -The Theme Management Accelerator offers a consistent and visually appealing design for your application. It enables you to easily customize and manage your app's themes and styles. Explore key features below: - -### Components - -- [Dark Mode Support](./theme-management-accelerator/theme-management.md#dark-mode-support) -- [Adaptable Components](./theme-management-accelerator/theme-management.md#adaptable-components) -- [Theme Customization](./theme-management-accelerator/theme-management.md#theme-customization) - -### States - -- `accThemeMode`: State for managing the theme mode of the entire application. - -The Theme Management Accelerator empowers you to create a visually appealing and user-friendly application. Customize the look and feel of your app to match your brand or design preferences. - -With these explanations, users will understand the significance of the Navigation and Theme Management Accelerators and how they contribute to the overall user experience and design of their applications. diff --git a/docs/projects/gettingstarted/jumpstart/navigation-accelerator/breadcrumbs-management.md b/docs/projects/gettingstarted/jumpstart/navigation-accelerator/breadcrumbs-management.md deleted file mode 100644 index 4cae01b..0000000 --- a/docs/projects/gettingstarted/jumpstart/navigation-accelerator/breadcrumbs-management.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: 'breadcrumbs-management' -sidebar_label: 'Breadcrumbs Management' -slug: '/gettingstarted/jumpstart/navigation-accelerator/breadcrumbs-management' ---- -# Breadcrumbs Management - -Breadcrumb management is crucial for providing users with clear navigation paths within your application. Let's explore how the accelerator generates and manages breadcrumbs to enhance your users navigation experience. - -## User-Friendly Navigation - -Effective breadcrumb management with the Navigation Accelerator simplifies the user's navigation journey within your application. It ensures that users can easily trace their steps and understand their current location, creating an enhanced user experience. - -## Breadcrumb Generation - -A JavaScript function is responsible for generating breadcrumbs based on the user's current route. Here is an overview of how this function works: - -```javascript -/** - * Generate Breadcrumbs for Navigation - * - * This function dynamically generates breadcrumbs based on the user's current route and the sidebar configuration. - * - * @param {Array} items - The array of sidebar items to search for matches. - * @returns {Array} An array of breadcrumb objects containing label and path. - */ - - // Initialize breadcrumbLabels to store breadcrumb items - const breadcrumbLabels = []; - - // Return only home path if currentRoute doesn't exist. - if (!currentRoute) { - return [{ label: 'Home', path: '/' }]; - } - - // Get the path of the current route - const { path } = currentRoute; - - /** - * Recursive Function to Search for Breadcrumbs - * - * @param {Array} items - The array of sidebar items to search for matches. - * @returns {boolean} Returns true if a breadcrumb match is found, false otherwise. - */ - const findBreadcrumbRecursive = (items) => { - // Iterate through sidebar items - for (const item of items) { - // Check if the item's path matches the current route's path - if (item.path === path) { - breadcrumbLabels.push({ label: item.label, path: item.path }); - return true; - } - // Check subitems for a match - if (item.subitems && item.subitems.length > 0) { - const found = findBreadcrumbRecursive(item.subitems); - if (found) { - breadcrumbLabels.push({ label: item.label, path: item.path }); - return true; - } - } - // Check relatedPaths for a match - if (item.relatedPaths && item.relatedPaths.length > 0) { - const relatedItem = item.relatedPaths.find(related => related.path === path); - if (relatedItem) { - breadcrumbLabels.push({ label: item.label, path: item.path }); - breadcrumbLabels.push({ label: relatedItem.label, path: relatedItem.path }); - return true; - } - } - } - return false; - }; - - // Iterate through sidebar groups to find the breadcrumb - for (const group of items) { - const found = findBreadcrumbRecursive(group.items); - if (found) break; - } - - // If no matches found, add the "Home" label to the breadcrumb - if (breadcrumbLabels.length === 0) { - breadcrumbLabels.push({ label: 'Home', path: '/' }); - } - - // Ensure a consistent breadcrumb order - if (breadcrumbLabels.length >= 3) { - return [ - breadcrumbLabels[2], - breadcrumbLabels[0], - breadcrumbLabels[1] - ]; - } else { - return breadcrumbLabels.reverse(); - } - -``` - -### Breadcrumb Generation Process - -1. The function traverses the sidebar structure to find a match between the current route's path and the sidebar items' paths. -2. When a match is found, the corresponding labels are added to the breadcrumb. -3. If no matches are found, the "Home" label is included in the breadcrumb for a seamless user experience. - -### Generating and Displaying Breadcrumbs in the UI - -Here's how breadcrumsb are generated and displayed in the user interface: - -Example: `Settings > Team Members` - -Consider the scenario where a user navigates to the **Team Members** section within the **Settings** area of your application. Here is how breadcrumbs are generated and displayed: - -1. **Breadcrumbs Generation**: - - The `generateBreadcrumbs` function dynamically creates breadcrumbs based on the user's current route and the sidebar configuration. - - For our example, it identifies that the user is in the **Team Members** section in the **Settings** area. - - The generated breadcrumbs array for this scenario might look like this: - - `{ label: 'Home', path: '/' }` - - `{ label: 'Settings', path: '/settings' }` - - `{ label: 'Team Members', path: '/settings/team-members' }` - -2. **Breadcrumbs Display**: - - The generated breadcrumb array is used to display the breadcrumbs in the UI. - - The breadcrumbs are typically shown near the top of the page, just below the header or navigation bar. - - Each breadcrumb item is a clickable link that allows users to navigate back to a specific section. - - In our example, the UI would display: **Home > Settings > Team Members** as clickable links. - -### Navigating Using Breadcrumbs - -Users can easily navigate backward by clicking on any of the breadcrumb links. For example, clicking on **Settings** would take them back to the **Settings** page, and clicking on **Home** would return them to the application's home page. - - diff --git a/docs/projects/gettingstarted/jumpstart/navigation-accelerator/sidebar-control.md b/docs/projects/gettingstarted/jumpstart/navigation-accelerator/sidebar-control.md deleted file mode 100644 index 98cc794..0000000 --- a/docs/projects/gettingstarted/jumpstart/navigation-accelerator/sidebar-control.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 'sidebar-control' -sidebar_label: 'Sidebar Control' -slug: '/gettingstarted/jumpstart/navigation-accelerator/sidebar-control' ---- -# Sidebar Control - -The Navigation Accelerator plays a pivotal role in controlling and organizing the sidebar navigation of your application. Let's delve into how the Navigation Accelerator manages and configures the sidebar structure, ensuring a user-friendly and intuitive navigation experience. - -## Benefits of Sidebar Control - -- **Structural Organization**: The Navigation Accelerator provides a structured approach to organize sidebar elements, improving the overall user experience. - -- **Customization**: It allows for easy customization of sidebar items, enabling developers to tailor navigation to the application's specific requirements. - -- **Intuitive Navigation**: A well-structured sidebar ensures that users can quickly and intuitively navigate through different sections of the application. - - - -## Sidebar Configuration - -The sidebar structure is defined using a structured JSON object. Here is an excerpt of this configuration: - -```json -[ - { - "items": [ - { - "icon": "Home", - "path": "/", - "label": "Home", - "expanded": false, - "subitems": [] - } - ], - "identifier": "top" - }, - { - "items": [ - { - "icon": "Widgets", - "path": "/module-a", - "label": "Module A", - "expanded": false, - "subitems": [] - }, - { - "icon": "Widgets", - "path": "/module-b", - "label": "Module B", - "expanded": false, - "subitems": [] - }, - { - "icon": "Widgets", - "path": "/module-c", - "label": "Module C", - "expanded": false, - "subitems": [] - } - ], - "identifier": "middle" - }, - { - "items": [ - { - "icon": "Settings", - "path": "/settings/team-members", - "label": "Settings", - "expanded": false, - "subitems": [ - { - "icon": "Group", - "path": "/settings/team-members", - "label": "Team Members", - "relatedPaths": [ - { - "path": "/user/:id", - "label": "User Profile" - } - ] - } - ] - } - ], - "identifier": "bottom" - } - // ... -] -``` - -### Key Elements - -- Each sidebar section is represented as an object within the array. -- The `items` property contains an array of sidebar items, each with properties like `icon`, `path`, `label`, `expanded`, and `subitems`. -- The `identifier` is a unique identifier for each section. - -### Understanding the `relatedPaths` Key - -Within the sidebar configuration, the `relatedPaths` key serves a vital role in defining the relationship between different navigation sections. - -The `relatedPaths` feature enhances the navigation experience by allowing users to seamlessly switch between related sections without needing to return to a higher-level menu. - -By using the `relatedPaths` key judiciously in your sidebar configuration, you can create a more intuitive and user-friendly navigation structure within your application. - -The sidebar configuration defines the hierarchy of navigation elements, their labels, and links. - -#### Purpose -The `relatedPaths` key allows you to establish connections between related sections or pages within your application's navigation. - -When a user navigates to a specific page represented by a `path`, the `relatedPaths` key defines other sections or pages that are closely related and accessible from that page. - -#### Usage Example - -Consider the scenario in which you have a **Team Members** section within your **Settings** area, as shown in the example configuration. In this case, you might want to provide quick access to individual user profiles from the **Team Members** section. - -In the given example, when a user is viewing the **Team Members** section (path: `/settings/team-members`) and clicks on another user's profile (path: `/user/:id`), the `relatedPaths` key specifies that the **User Profile** should be included in the breadcrumb trail. This makes it easy for users to navigate back and forth between related sections. - - -## Sidebar and Breadcrumbs - -The sidebar and breadcrumbs work together to create a seamless and user-friendly navigation experience. Here's how they depend on each other: - -### Sidebar Structure Guides Navigation - -- The sidebar configuration defines the hierarchy and structure of navigation elements. -- Sidebar items determine the available routes and sections in your application. -- A well-organized sidebar ensures users can easily locate and access different sections. - -### Breadcrumbs Clarify the User's Path - -- Breadcrumbs provide users with a clear trail of their navigation path. -- They help users understand their current location within the application. -- Breadcrumbs are generated based on the sidebar structure, ensuring consistency. - -For more information, see [Breadcrumbs Management](./breadcrumbs-management.md). - diff --git a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/adaptable-components.md b/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/adaptable-components.md deleted file mode 100644 index 17fb5bb..0000000 --- a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/adaptable-components.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: 'adaptable-components' -sidebar_label: 'Adaptable Components' -slug: '/gettingstarted/jumpstart/theme-management-accelerator/adaptable-components' ---- -# Adaptable Components - -Adaptable Components are an integral part of your application, sourced from Material UI. They offer a dynamic and flexible user interface (UI). These components are designed to adapt seamlessly to various screen sizes and device types, providing a consistent and responsive user experience. - -By combining Material UI's adaptable components with custom CSS, you can achieve a highly personalized and visually appealing user interface for your application. This combination of flexibility and control ensures that your application can adapt to various screen sizes and device types while maintaining a consistent and visually pleasing design. - -## Custom CSS - -In addition to Material UI's predefined CSS classes, you have the flexibility to apply custom CSS styles to these components. You can use custom CSS to override or extend the default styles provided by Material UI. This allows you to create a unique and branded appearance for your application's UI components. - -![Custom Components CSS](../_images/customComponentsCss.gif) - -## CSS Classes Generation - -Each Material UI component comes with its own CSS file, and your application automatically generates classes that correspond to these components. These generated classes provide a starting point for your CSS customization efforts. - -## Learn More - -To learn more about custom css for these components, see [MUI Documentation](https://mui.com/material-ui/getting-started/) \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/darkmode-support.md b/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/darkmode-support.md deleted file mode 100644 index 5bfa0c8..0000000 --- a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/darkmode-support.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 'darkmode-support' -sidebar_label: 'Dark Mode Support' -slug: '/gettingstarted/jumpstart/theme-management-accelerator/darkmode-support' ---- -# Dark Mode Support - -By providing a Dark Mode implementation, your users can enjoy a personalized and comfortable viewing experience. - -You can implement global custom CSS or component-specific CSS. This allows you to tailor Dark Mode Support to your application's needs. You can use one or both methods to achieve a consistent and visually pleasing Dark Mode experience for your users. - -![Theme Managment Picture](../_images/themeManagment.jpg) - -## Setting Dark Mode - -In your application, Dark Mode is controlled by a global state variable named `accThemeMode`. This variable can have one of two values: "Light" or "Dark." The selected mode affects the overall appearance of the application, making it more adaptable to varying lighting conditions and user preferences. - -Dark Mode Support can be implemented in different ways, depending on your application's architecture and design choices. Here are two common approaches. - -## Global Custom CSS - -In this approach, you create a separate CSS file specifically for Dark Mode styles. You define CSS rules within this file that apply to elements when Dark Mode is active. To distinguish Dark Mode styles, you can use a class, such as .Dark, as a parent selector for the elements you want to modify. - -![Theme Managment Pcture](../_images/globalCss.gif) - -### Example of Global CSS for Dark Mode - -```css -/* Dark Mode Styles */ -.Dark .elementToModify { - background-color: #333; /* Dark background color */ - color: #fff; /* Light text color */ -} -``` - -By applying the .Dark class to the HTML body when Dark Mode is active, the specified styles will take effect, changing the appearance of elements throughout the application. - -## Custom CSS in Components - -Alternatively, you can implement Dark Mode Support directly within your individual components. In this approach, you specify specific CSS properties to change based on the selected mode. This method provides fine-grained control over styling within each component. - -### Examples of Custom CSS for Components - -#### Directly Styles - -Directly styles is used to put custom and specific CSS properties in the components styles pane. You can modify things like borders, colors, backgrounds, fills, and other things that you found in the Style Pane. - -```js -{{accThemeMode.value === "Light" ? "#000" : "#fff"}} -``` - -```js -{{`var(--mainBg${accThemeMode.value})`}} -``` - -#### Directly Class -In this example, the component conditionally applies a dark-mode style, class based on the `accThemeMode` state. - -```js -{{accThemeMode.value === "Light" ? "lightCard" : "darkCard"}} -``` - -```js -{{`container${accThemeMode.value}`}} -``` - diff --git a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/theme-customization.md b/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/theme-customization.md deleted file mode 100644 index 04c3b60..0000000 --- a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/theme-customization.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 'theme-customization' -sidebar_label: 'Theme Customization' -slug: '/gettingstarted/jumpstart/theme-management-accelerator/theme-customization' ---- -# Theme Customization - -Theme Customization in the Theme Management Accelerator offers a robust and flexible theming system that caters to a wide range of preferences and design requirements. By enabling users to customize colors, create custom variables, and leverage Material UI theming, your application achieves a highly personalized and visually cohesive design that enhances the user experience. - -Customizing themes within your application is an accessible and intuitive process. - -![Theme Customization](../_images/themeCustomization.gif) - -## Key Features - -### Powerful Theming Capabilities - -The Theme Management Accelerator leverages Material UI's theming capabilities, providing users with access to a wide array of customization options. For more information, see [Material UI's Theming documentation](https://mui.com/Material UI/customization/theming/). - -### Customizing Primary and Secondary Colors - -With Theme Customization, users have the ability to modify both primary and secondary color palettes. These color choices allow users to align the application's colors with their brand identity or personal taste. This level of customization ensures that the application seamlessly integrates into their visual landscape. It also means that user's can adjust the color palette to meet accessibility requirements. - -### Creating Custom Variables - -Theme Customization enables the creation of custom variables that are accessible throughout the entire application. These variables serve as a unified design language, ensuring consistency and coherence across various UI components. Users can define custom variables that impact global custom CSS, style properties, and even custom component-specific CSS. - -### Overriding Default Styles - -The colors and variables modified through Theme Customization take precedence over the default styles of Material UI Material components used throughout the application. This ensures that the selected theming choices propagate consistently, offering users a tailored and cohesive design language. - -## Benefits of Theme Customization - -- **Personalized Branding**: Users can align the application's visual style with their brand identity, creating a personalized and unique user experience. - -- **Consistency**: Custom variables and theming options provide a unified design language, ensuring visual consistency throughout the application. - -- **Granular Control**: Theme Customization empowers users with granular control over primary and secondary colors, allowing them to fine-tune their application's color palette. - -- **Material UI Integration**: The Theme Management Accelerator seamlessly integrates with Material UI, enhancing the application's theming capabilities and providing users with access to Material UI's extensive theming options. - -## How to Use It - -### Style Properties - -You can use the classes that you create in your components styles such as colors, backgrounds, borders, and all properties on the Style pane when editing a component. - -#### **Simple Class** - -```js -{{"var(--primaryMain)"}} -``` - -#### **Variable Class** - -```js -{{`var(--mainBg${accThemeMode.value})`}} -``` \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/theme-management.md b/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/theme-management.md deleted file mode 100644 index 8a007f9..0000000 --- a/docs/projects/gettingstarted/jumpstart/theme-management-accelerator/theme-management.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 'theme-management' -sidebar_label: 'Theme Management Accelerator' -slug: '/gettingstarted/jumpstart/theme-management-accelerator/theme-management' ---- -# Theme Management Accelerator - -The Theme Management Accelerator in your application empowers users to personalize the appearance of their user interface (UI). Features include dark mode support, adaptable components, and theme customization. - -![Theme Managment Picture](../_images/themeManagment.jpg) - -## Dark Mode Support - -Dark Mode Support is a user-centric feature that offers the following benefits: - -- **Enhanced Visual Comfort**: Dark Mode reduces eye strain, especially in low-light environments, making it more comfortable for users to interact with your application for extended periods. - -- **Personalization**: Users can choose their preferred theme to align with their aesthetic preferences and environmental conditions. - -- **Battery Savings**: For users on mobile devices, Dark Mode can help conserve battery life by reducing the power consumption of OLED and AMOLED screens. - -By providing Dark Mode Support, your application enhances user satisfaction and accessibility. Users can tailor their experience, ensuring a positive impression of your app. - -### Learn More - -If you want to learn how to implement dark mode support, see [Dark Mode Support](./darkmode-support.md). - - -## Adaptable Components - -Adaptable Components are a core feature of the Theme Management Accelerator in your application. These components offer a dynamic and flexible user interface, ensuring that your application can adapt to various screen sizes and device types. Adaptable Components are designed to provide a seamless experience, regardless of the user's device. They have the following benefits: - -- **Cross-Device Compatibility**: Adaptable Components enable your application to function smoothly on a wide range of devices, from smartphones to tablets and desktop computers. - -- **Enhanced User Experience**: By automatically adjusting the layout and appearance of your app's components, users can navigate and interact with ease, improving overall satisfaction. - -- **Responsive Design**: Adaptable Components ensure that your application's user interface responds to changes in screen size and orientation, providing a consistent and user-friendly experience. - -### Learn More - -If you want learn how to implement adaptable components, see [Adaptable Components](./adaptable-components.md). - -## Theme Customization - -Theme Customization is a valuable feature offered by the Theme Management Accelerator. It allows users to tailor the visual style of your application to suit their preferences. With Theme Customization, users can modify colors, fonts, and other design elements, creating a personalized and visually appealing interface. This has the following benefits: - -- **Personalized Experience**: Theme Customization empowers users to personalize the appearance of your application, fostering a stronger connection between the user and your brand. - -- **Brand Consistency**: While allowing customization, Theme Customization ensures that the core elements of your brand's identity remain intact, maintaining a cohesive user experience. - -- **Accessibility**: Users with specific visual preferences or accessibility needs can adjust the theme to enhance readability and usability, making your app more inclusive. - -### Learn More - -If you want to learn how to implement ttheme customization, see [Theme Customization](./theme-customization.md). - diff --git a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/my-account.md b/docs/projects/gettingstarted/jumpstart/user-management-accelerator/my-account.md deleted file mode 100644 index c47dd1b..0000000 --- a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/my-account.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 'my-account' -sidebar_label: 'My Account Page' -slug: '/gettingstarted/jumpstart/user-management-accelerator/my-account' ---- -# My Account Page - -The My Account page offers users the convenience of managing their own account information and personalizing their profiles. Whether it's updating profile details or changing avatars, this page provides a user-friendly experience for account management. - -![My Account Page](../_images/accountPage.png) - -## Features - -- **Profile Update**: Users can easily update their personal information, such as their first name, last name, email address, and other profile-related details. - -- **Avatar Management**: The My Account page lets users update their profile picture (avatar). - -## Requests - -### Get User By Email - -The `accUserGetByEmail` GraphQL query retrieves the user's account information based on their email address. This query ensures that users can view their current account details before making any updates. - -### Get File Upload Info - -The `accGetFileUploadInfo` function is used to retrieve information required for file uploads, including avatar updates. It provides the necessary data for managing avatar uploads or changes. - -### User Update Avatar - -The `accUserUpdateAvatar` function is called when a user decides to update or change their avatar. It handles the process of updating the user's profile picture. - -### User Update - -The `accUserUpdate` function is responsible for updating the user's account information, such as their first name, last name, and email address. It ensures that user profile details are up-to-date. \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/team-members.md b/docs/projects/gettingstarted/jumpstart/user-management-accelerator/team-members.md deleted file mode 100644 index 5eb93b0..0000000 --- a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/team-members.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 'team-members' -sidebar_label: 'Team Members Page' -slug: '/gettingstarted/jumpstart/user-management-accelerator/team-members' ---- -# Team Members Page - -The Team Members page in the User Management Accelerator provides a comprehensive interface for managing users within your application. This page allows you to perform CRUD (Create, Read, Update, Delete) operations on user profiles and includes several features for enhanced usability. - -![Team Members Page](../_images/teamMembersPage.png) - -If you need to view, edit, or create a user, you will be redirected to a dedicated user management page for these specific actions. The Team Members page primarily serves as a central hub for managing user profiles and applying filters to user data. - -- [User Profile Page](./user-profile.md) -- [User Create Page](./user-create.md) - -## Features - -- **User Filtering**: The Team Members page offers user filtering options, allowing you to filter users based on their roles or status. This feature simplifies the process of finding specific users within your application. - -- **View Modes**: Users can choose between two view modes - Grid and Table (default). Both modes use the same underlying data but offer different visualization options to accommodate varying preferences. - -## Requests - -### Get Users - -The `accUsersGet` GraphQL query is employed to retrieve user data, including profiles and associated information. This query provides the data displayed on the Team Members page, allowing users to view and manage user profiles. - -### Get Users Filter Values - -The `accUsersFilterValues` GraphQL query is utilized to obtain filter values for user roles and status. It provides the necessary data for populating filter options, enabling users to refine their search criteria and streamline user management. - -### User Update - -The `accUserUpdate` function is called when you click on deactivate or activate a user. - -### User Delete - -The `accUserDelete` function is called when you click on delete a user. The modal opens and you confirm that want to delete the selected user. \ No newline at end of file diff --git a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/user-create.md b/docs/projects/gettingstarted/jumpstart/user-management-accelerator/user-create.md deleted file mode 100644 index e68c36b..0000000 --- a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/user-create.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 'user-create' -sidebar_label: 'User Create Page' -slug: '/gettingstarted/jumpstart/user-management-accelerator/user-create' ---- -# User Create Page - -The User create page in the User Management Accelerator allows users to create their profile information. It provides a seamless user experience for managing user profiles within your application. Here are the primary functions used on this page. - -![User Create Page](../_images/userCreatePage.png) - -## Workflows - -The User Create page can be used in two different workflows: - -- **Creating a User Profile without Image**: In this workflow, the `accUserCreate` function is called to create the user profile. No image upload is required in this case. - -- **Creating a User Profile with Image**: When a user decides to include a profile picture, the `accGetFileUploadInfo` function is called to obtain the necessary information for uploading the image. After that, a call to the FileStack API is made to perform the actual file upload. Once the image is uploaded, the accUserCreate function is invoked to create the user profile with the image. - -The User Profile page streamlines the process of managing user profiles, including the option to include profile pictures. Depending on the user's preference, they can create a profile with or without an image using the provided functions and workflows. - -# Requests - -## User Create - -The `accUserCreate` function is called when a new user profile is created. It can be invoked with or without an associated profile picture upload, depending on whether the user chooses to include an image in their profile. - -## Get FileUpload Info - -The `accGetFileUploadInfo` function retrieves information from filestack API required for file uploads. It is used when a user wants to upload or update their profile picture. - - - - diff --git a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/user-profile.md b/docs/projects/gettingstarted/jumpstart/user-management-accelerator/user-profile.md deleted file mode 100644 index 3c1f762..0000000 --- a/docs/projects/gettingstarted/jumpstart/user-management-accelerator/user-profile.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 'user-profile' -sidebar_label: 'User Profile Page' -slug: '/gettingstarted/jumpstart/user-management-accelerator/user-profile' ---- -# User Profile Page - -The User Profile page in the User Management Accelerator allows users to view and edit their profile information. It provides a seamless user experience for managing user profiles within your application. Here are the primary functions used on this page. - -![User Profile Page](../_images/userProfilePage.png) - -## Workflows - -The User Profile page can be used in two different workflows: - -- **Editing a User Profile without Image**: In this workflow, the `accUserUpdate` function is called to create the user profile. No image upload is required in this case. - -- **Editing a User Profile with Image**: When a user decides to include a profile picture, the `accGetFileUploadInfo` function is called to obtain the necessary information for uploading the image. After that, a call to the FileStack API is made to perform the actual file upload. Once the image is uploaded, the accUserCreate function is invoked to create the user profile with the image. - -The User Profile page streamlines the process of managing user profiles, including the option to include profile pictures. Depending on the user's preference, they can create a profile with or without an image using the provided functions and workflows. - -# Requests - -## User Update - -The `accUserUpdate` function is called when a user profile is edited. It can be invoked with or without an associated profile picture upload, depending on whether the user chooses to include an image in their profile. - -## Get FileUpload Info - -The `accGetFileUploadInfo` function retrieves information from filestack API required for file uploads. It is used when a user wants to upload or update their profile picture. - - - - diff --git a/docs/projects/gettingstarted/walkthroughs-backend-movieapp.md b/docs/projects/gettingstarted/walkthroughs-backend-movieapp.md index 985803b..95fc8a2 100644 --- a/docs/projects/gettingstarted/walkthroughs-backend-movieapp.md +++ b/docs/projects/gettingstarted/walkthroughs-backend-movieapp.md @@ -10,31 +10,22 @@ In this guide, we will show you how to create a basic movie database app to show ![Backend walkthrough](_images/backend-only-01.png ) - -If you've followed our [full-stack walkthrough](/gettingstarted/walkthroughs/full-stack), this process will seem familiar. The core difference in this section is that we are focusing solely on implementing our own frontend and integrating it with 8base backend. - ## Understanding the Backend Structure We have already set up at this endpoint: [https://api.8base.com/clm0fahrv000008i67set12kz](https://api.8base.com/clm0fahrv000008i67set12kz). Our backend is structured around a `Movies` table, which has these fields: - - * `title` * `genre` * `director` * `rating` * `Actors` table that holds `firstName`, `lastName`, `gender`, and `date of birth` for actors. - - - `Movies` has many-to-many relations with `Actors`. - +`Movies` has many-to-many relations with `Actors`. ![Backend walkthrough](_images/backend-only-02.png ) - ## Setting Up the Project ### Initialize a New React Project diff --git a/docs/projects/gettingstarted/walkthroughs-frontend-movieapp.md b/docs/projects/gettingstarted/walkthroughs-frontend-movieapp.md deleted file mode 100644 index cb5326f..0000000 --- a/docs/projects/gettingstarted/walkthroughs-frontend-movieapp.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 'walkthroughs-frontend-movieapp' -sidebar_label: 'Building an App with an 8base Frontend-only Project' -slug: '/gettingstarted/walkthroughs/frontend-movieapp' ---- -# Building an App with an 8base Frontend-only Project - -Let's dive into the process of creating a movie database app using an 8base frontend-only project. Our app is called **Movie DB**. - - -![Frontend walkthrough](_images/walkthrough-frontend-01.png ) - -This approach integrates the external backend via an API, capitalizing on the features of App Builder. - -## Getting Started - -We must have pre-configured APIs on hand to perform queries to an external backend. - -In the context of our Movie DB app, we'll be utilizing the TMDB API. For reference, you can access the TMDB API documentation at [Getting Started](https://developer.themoviedb.org/docs). - -### Acquiring TMDB API Access - - -![Frontend walkthrough](_images/walkthrough-frontend-02.png ) - - -You will need to log in or create an account with TMDB. - -Then you can register at [Getting Started](https://developer.themoviedb.org/reference/intro/getting-started). After you register, you will receive an Access token authentication to consume TMDB's APIs. - -You are now ready to integrate the requests with an 8base frontend-only project. - -## Integrating 8base Frontend with External Backend - -When creating a project, you can choose between **Full-Stack** or **Backend-Only**, so to create a frontend-only project, we must add a frontend to an existing project. - - -![Frontend walkthrough](_images/walkthrough-frontend-03.png ) - - -### Creating a Frontend - -We will start by crafting a frontend from scratch. This example does not require a pre-built authentication system. - - - -1. In an existing project, select **Add new Frontend**. -![Frontend walkthrough](_images/walkthrough-frontend-04.png ) -2. Click **Build from Scratch**, and then click **Create**. -![Frontend walkthrough](_images/walkthrough-frontend-05.png ) -3. Select **DIY Authentication**. -![Frontend walkthrough](_images/walkthrough-frontend-06.png ) - - -After creating the new frontend, we can establish and integrate the necessary requests. - -### Adding a Resource to the Frontend - -Before we create a request, we must add a resource: - -1. Click on **Resources** in the editor's sidebar. -![Frontend walkthrough](_images/walkthrough-frontend-07.png ) -2. Add a REST resource according to your project requirements. -![Frontend walkthrough](_images/walkthrough-frontend-08.png ) -3. Once the resource configuration is complete, click **Save**. -![Frontend walkthrough](_images/walkthrough-frontend-09.png ) - - -### Creating and Integrating Requests - -After setting up the resource, the next step is to generate the requests for your application: - -1. Click on the **Requests** button located in the sidebar. -![Frontend walkthrough](_images/walkthrough-frontend-10.png ) -2. In this section, create two global requests: -![Frontend walkthrough](_images/walkthrough-frontend-11.png ) - -**Request 1**: `popularMovies`: This GET request returns a list of movies, sorted by popularity. - -Set it to execute on the `BeforeRouteEnter` navigation event on the homepage. This provides the necessary data to display the movie list as soon as the page loads. - -![Frontend walkthrough](_images/walkthrough-frontend-12.png ) - - -```javascript -curl --location 'https://api.themoviedb.org/3/discover/movie?include_adult=true&include_video=true&language=en-US&page=1&sort_by=popularity.desc' \ - ---header 'Authorization: Bearer PLEASE SIGN UP TO themoviedb' \ - ---header 'accept: application/json' -``` - -**Request 2**: `insideMovie`: This request fetches the details of a movie based on a provided ID. - -![Frontend walkthrough](_images/walkthrough-frontend-13.png ) - - -The movie ID is passed as a parameter (`:movie`). We'll extract this ID from the path of the "Movie Details" page, which is dynamic: `/movie-details/:id`. - -![Frontend walkthrough](_images/walkthrough-frontend-14.png ) - - -Pass the movie ID from the page path `/movie-details/:id` to the request `movie/:movie?language=en-US` via a global state called `router.currentRoute.params.id`. - - -![Frontend walkthrough](_images/walkthrough-frontend-15.png ) - - -Once this is set up, place the request to be executed on the `BeforeRouteEnter` navigation event on the "Movie Details" page. This ensures the necessary movie data is loaded just before the page is displayed. - - -![Frontend walkthrough](_images/walkthrough-frontend-16.png ) - - -### Building the App - -We have access to the external backend and the necessary requests to import the movie data. Now, we will display the data in the frontend. - -Our app will have two pages: - - **Home Page**: Shows the list of movies ordered by popularity. - -We will use a looper with a card component inside it to show the details of each movie. This will iterate over the results of the `popularMovies` request. - - -![Frontend walkthrough](_images/walkthrough-frontend-17.png ) - -![Frontend walkthrough](_images/walkthrough-frontend-18.png ) - -Additionally, each card will have an `onclick` event with a navigate action to redirect the user to the "Movie Details" page next to the ID of the selected movie. - - -![Frontend walkthrough](_images/walkthrough-frontend-19.png ) - - -**Movie Details**: Shows the details of a selected movie - -Here, we will show the details of a movie using these components: -- Heading: Contains the title of the movie -- Typography: to show the genre of the movie -- Rating: shows the user score -- Image: to show the movie poster -- Editable Text: Contains the Overview - -![Frontend walkthrough](_images/walkthrough-frontend-20.png ) - -Each component will display the `insideMovie` request's content according to the ID sent from the Home Page. -![Frontend walkthrough](_images/walkthrough-frontend-21.png ) - -And that's all! You can see the app in action by clicking on **Preview** from the editor or by deploying the app. -![Frontend walkthrough](_images/walkthrough-frontend-22-moviedb.gif ) - - -You can try the deployed app for this example here: [8base movie DB](https://clnxlvytk00l308k16vxe84iv.appbuilder.8base.com/). diff --git a/docs/projects/gettingstarted/walkthroughs-fullstack.md b/docs/projects/gettingstarted/walkthroughs-fullstack.md deleted file mode 100644 index 6871d39..0000000 --- a/docs/projects/gettingstarted/walkthroughs-fullstack.md +++ /dev/null @@ -1,409 +0,0 @@ ---- -id: 'walkthroughs-fullstack' -sidebar_label: 'Building a Full-Stack App' -slug: '/gettingstarted/walkthroughs/full-stack' ---- -# Building a Full-Stack App - -In this guide, we will build a simple full-stack application leveraging the "Jumpstart with accelerators" template. Make sure to follow the [quickstart](/introduction/quickstart) tutorial to provision your project - -## Configuring your Data Model -From your project dashboard, open your backend. You can also go to the **Backend** section and open it from there. Once in the backend, open the **Data** module to configure your data schema. - -To create a table, click **Add Table**. Next, add fields to your table: -1. Type in the field name. -2. Select the field type. -3. Configure the details of the field in the properties pane. -4. Click **Create field**. - -Repeat these steps to create the `Movie` table with this structure. (Skip the `Cast` field for now.) - -![Movie table](../_images/walkthroughs-fullstack-01.png) - -For the `Genre` field, select `Switch` as the type and *Custom* for `Format.` Then, add options for the different genres. - -![Movie table](../_images/walkthroughs-fullstack-01-a.png) - -Now, create the `Actor` table. This time, you will create a relationship between both tables. - -1. Type in the field name. -2. Select `Table` as the field type. -3. Select the target table, in our case: `Movie`. -4. Name the relationship **from the perspective of the target table**. In our case, that would be `Cast`. -5. Select the relationship type. In our case, a movie can have multiple actors, and an actor can participate in multiple movies. We will select **Allow multiple Movies per Actor and Allow multiple Actors per Movie**. - -![Actor table](../_images/walkthroughs-fullstack-02.png) - -It may seem like all you have done is create two tables. But you have just created a complete GraphQL API to support all your client app needs! - -## Adding Data -Other than having client applications write data, you have two options to add records to your backend: Use the **Data viewer** or use the **API explorer**. - -### Adding Data with the Data Viewer -Open the data viewer by having a table selected and clicking on the **Data** tab. - -![Data Tab](../_images/walkthroughs-fullstack-03.png) - -Then click on the + icon. A modal will appear that will let you add records. - -![Data Tab](../_images/walkthroughs-fullstack-04.png) - -Add the information you need and click **Add Row**. Once the data is saved, you can see it in the viewer and use the pencil icon to edit records. - -![Data Tab](../_images/walkthroughs-fullstack-05.png) - -### Adding Data with the API Explorer - -A much more fun way to create data is by writing your own GraphQL mutation. We can even create related information in one transaction. The best part is that you do not need to be an expert in GraphQL. - -Navigate to the **API Explorer**, click on **Explorer** and then on **Add New Mutation**. - -![Add mutation](../_images/walkthroughs-fullstack-06.png) - -Search the list of mutations for `movieCreate` and expand it. Use the `data` section in red to pass the arguments and select what you want to return from the blue fields. Notice that the proper GraphQL code is created for you as you choose and enter values. - -If you provide values like this: - -![Explorer](../_images/walkthroughs-fullstack-07.png) - -You will get GraphQL code that looks like this: - - -```graphql -mutation MyMutation { - __typename - movieCreate( - data: { - title: "Blade Runner 2049" - rating: "R" - genre: "Science Fiction" - director: "Denis Villeneuve" - cast: { - create: { - firstName: "Ryan" - lastName: "Gosling" - gender: "Male" - dOB: "1980-11-12" - } - } - } - ) { - id - title - rating - genre - director - cast { - items { - id - firstName - lastName - gender - dOB - } - } - } -} -``` - -:::tip -Click **Prettify** to format your code. -::: - -Once you hit the **Play** button, you will get results like these: -```json -{ - "data": { - "movieCreate": { - "id": "clnxtoyh000gm08iddnng0vj7", - "title": "Blade Runner 2049", - "rating": "R", - "genre": "Science Fiction", - "director": "Denis Villeneuve", - "cast": { - "items": [ - { - "id": "clnxtoyhz00gp08id54swb9bo", - "firstName": "Ryan", - "lastName": "Gosling", - "gender": "Male", - "dOB": "1980-11-12" - } - ] - } - } - } -} -``` - -The **Explorer** is a great tool to create complex GraphQL statements easily! - -## Creating Queries for our Frontend - -In our frontend app, we will implement two pages: -1. A paginated list of movies. -2. A page to show the details of the movie. - -There is no particular order in which pages like this are implemented. You will need to craft the statements your app will use at some point. Since we are already in the **API Explorer**, let's get do it now. - -### Making a Paginated List - -We will use the standard arguments `first` and `skip` to implement a paginated list. Because these are meant to be passed by the client app, we will set variables in our GraphQL statement. It will also be a good idea to have it return the number of records so the client app can implement the pagination logic. - -Here is our query: - -```graphql -query listMovies($first:Int, $skip:Int) { - moviesList(first: $first, skip: $skip, sort: {title: ASC}) { - items { - id - title - rating - } - count - } -} -``` - -In the API explorer, you can click on the **Variables** section to bring up an editor where you can add a JSON document with your variables values. It would look similar to this: - -![Paginated query](../_images/walkthroughs-fullstack-08.png) - -### Adding Movie Details - -We will use the `movies` query and pass the movie we want the details as a variable. We will query the related information in the `Actor` table in this case. - -```graphql -query getMovieDetails($movieID: ID) { - movie(id: $movieID) { - id - title - genre - rating - director - cast(sort: {lastName: ASC}) { - items { - id - firstName - lastName - gender - dOB - movies(sort: {title: ASC}) { - items { - id - title - } - } - } - } - } -} - -``` - -A movie will load a list of actors, and each actor will load the list of movies. In both cases, we can control how the sorting of those lists would work. Here's an example of how this would look like in the **API Explorer**: - -![Details query](../_images/walkthroughs-fullstack-09.png) - -## Building the Frontend - -Go back to your project dashboard and open your frontend. This will get you to **App Builder**. - -We are using the "Jumpstart with accelerators" template. Before we start, we will do some cleanup to begin tailoring our application. Delete any elements on the homepage that you do not need. You can use your `delete` key or the context menu. Something like this will work great: - - -![App Builder](../_images/walkthroughs-fullstack-10.png) - -### Implementing the Paginated List - -Our goal will be to display a list of movies as a set of cards, render in each card the movie title, genre, and rating, make available a couple of buttons to navigate through the list, and have a button to go into the details of the movie. We already crafted our query, but it expects two parameters. We will use a **state** to hold the value to send in the `$skip` parameter. This will make it very easy to update the data every time the user clicks `Previous` or `Next`. - -Click on the **State** pane in the left bar to open it. We will want this new **state entry** to be available only on the homepage. We will stay in the **local scope** and click the + button to **Create a new state**. Call `skip`, make it a number, and set the default value 0: - -![Create State](../_images/walkthroughs-fullstack-12.png) - -This template already has a **Resource** connected to our backend. If you tried to work with multiple backends or started with a blank template, you can add additional resources in the **Resources** section. - -![resources](../_images/walkthroughs-fullstack-13.png) - -As things had been set up for use, we can go straight into the **Requests** pane and add a local request. Similar to the state, we only want this request to be available on the homepage. We will want to change the operation type to **Query**, as these execute automatically when the scope is mounted (in our case, when the homepage is loaded). - -After copying our query, we will want to declare our variables. This is optional if you intend to run the query using a code block, but that won't be necessary in our case. For the `first` variable, we can set up a fixed value of `10`, which always returns ten entries at the most. We want to use the value stored in the state we created above for the `skip` variable. We will accomplish this with a **handlebar expression**, which is an inline javascript expression. It will look like this: ` {{ skip.value }}`. Notice we used double curly brackets to enclose our handlebar expression. - -Information within 8base is secured by default, so we need to pass a proper `Authorization` header with the calling user's identity to ensure the caller has permission to access the data. - -:::caution -Your frontend in **App Builder** is a live application. This makes it very easy to understand how the application will look and behave, but it also forces the developer to deal with the fact that the application is running. Authentication against backends is a common situation where you need to consider how to pass the identity to the server while still in development. There is no prescribed way to achieve this, so you can implement it as it makes better sense for your application. -::: - -The "Jumpstart with accelerators" makes it easy to use as it already implements the entire the authentication flow. When users are authenticated, their identity is available as a JWT token in the browser's local storage under the key `tokenID.` Conveniently, that key will be available within **App Builder** as well, so we can set the value of our `Authorization` header to a handlebar expression like this ` {{ localStorage.getItem('tokenID')}}` - -Name your query "getMovies" and put it all together. It should look like this after click **Save and Run**: - -![getMovies](../_images/walkthroughs-fullstack-14.png) - -Executing your query populates an associated state, which makes developing your application easier. Let's put together our page to render the data. - -First, select the homepage and change the **Layout** configuration so the content stretches and occupies the available space. - -![getMovies](../_images/walkthroughs-fullstack-15.png) - -Drop an **Async content** component on the page. This component will allow us to show the user we are loading data from the backend. We will want its **Loading** attribute to be tied to the execution of our query. You can copy the path to that property from the state pane. - -![Copy from state](../_images/walkthroughs-fullstack-16.png) - -Then select the **Async** component from the canvas, go to properties, click on the button next to the **Loading** attribute to switch to **Code**, and write the expression `{{ getMovied.loading}}` to bind the attribute. You can also change the styling pane so the spinner appears centered and children's components are organized from top to bottom, taking all the space. - -![Loading](../_images/walkthroughs-fullstack-17.png) - -![Centering the spinner](../_images/walkthroughs-fullstack-18.png) - -It is time to drop a **Looper** inside our Async content component. The **Looper** is a special component that allows us to iterate over an array. Use the property pane to set it up to use the data in our query. You can change the number of elements to render during design to control how much content you have to deal with while working on your app. This setting does not affect the execution. - -Set up your looper as shown below: - -![Config the looper](../_images/walkthroughs-fullstack-19.png) - -Now, drop a card inside the looper. You should see more than one! That's because the application is live and showing you what the results will look like. - -![Drop the card](../_images/walkthroughs-fullstack-20.png) - -This is useful, but it could look better. Let's fix that by configuring the layout of the looper. Use the **Page Structure** pane to select the looper and reach the style pane. Change the layout to your liking. Here is the configuration we used: - -![Styled looper](../_images/walkthroughs-fullstack-21.png) - -The page structure pane is a handy way to select between multiple components. You can also move them directly in the page structure and access the context menu for operations like copy or clone. - -#### Configuring the Pagination Layout - -Now, we want to achieve the following: -- Show the movie title as the header of the card. -- Show the movie rating as subheader. -- Add a button to navigate to the details. - -Using the page structure, select the card header and add handlebar expressions to show the data. In our looper configuration we set it up for each item to be referenced as `item`, so in our handlebar expressions we can do `item?.title` and `item?.rating`. It is a good practice to use optional chaining here, because we do not want our app to fail if for some reason `item` becomes undefined. - -Then drop a **Button** inside the card content and change the label to "View". It should look like this: - -![Styled looper](../_images/walkthroughs-fullstack-22.png) - -:::note -We changed the style `layout` of the card content, to use **Flex** with `direction` set as `Row reverse`. This is why our button shows right-aligned. -::: - - -Now we want to add buttons to paginate through the data. Follow these steps: -1. Drop a container below the async content. -2. Drop two buttons inside the container. -3. Change the lables of the buttons to "<< Previous" and "Next >>". -4. Set up stying with flex layout, space between justification and left and right padding. - -It should look like this: - -![Pagination buttons](../_images/walkthroughs-fullstack-23.png) - -Now the fun part: We want to change the value of our `skip` state. As this state is used as the value of a variable in the query, every time it changes the query will be executed again and the data in our page will be updated. - -We will add this functionality as events in the buttons. Follow these steps -1. Select the button with the label "Next >>". -2. In the right pane, select **Events** and click the + icon. -3. Select `On Click`. - -![On click](../_images/walkthroughs-fullstack-24.png) - -4. In the action options, select **Run Custom Code**. - -![Custom code](../_images/walkthroughs-fullstack-25.png) - -5. Click **Add Custom Code** to open the editor. -6. Add your code: `skip.setValue(skip.value + 10)` - -![Monaco editor](../_images/walkthroughs-fullstack-26.png) - -7. Click **Done** when ready. - -Repeat those steps for the button labeled "<< Previous", but this time, substract from `skip`: -```js -skip.setValue(skip.value - 10) -``` - -It is time for you to preview your application. Use the **Preview** button in the top bar and see how your application is behaving. - -### Adding the Movie Details Page - -We must add a new page to our `/movie-details/:id` URL. Notice how we intend to pass the movie identifier as an argument. We can achieve that by using the `[:param_name]` notation in our page's `Path` attribute. Later, we will access this parameter through our code. Create the page using a configuration similar to the one shown below. - -![Movie details](../_images/walkthroughs-fullstack-11.png) - -Got back to the homepage to implement the view button. If you do not see your data, just execute your query again. - -The URL of the target page is dynamic, because we need to add the movie `id` to it. This can be achieved using the `router` object available in your global scope. This object provides a method `navigate` that will let you move between pages using code. Follow these steps to implement the navigation - -1. Select the view button that you dropped inside the card content. -2. In the right pane, go to **Events**. -3. Add an event handler for `On Click`. -4. Select `Run Custom Code` as the action. -5. Add the following code: -```js -// Your JavaScript code here -router.navigate(`/movie-details/${item?.id}`) -``` -Go back to the **Movie details** page. - -We will need to use the `id` parameter to retrieve the data we need. You can access this information directly from the `router` object. Open the **State pane**, select **Global** and scroll down. You'll see all the pages there which you can acces by name (Example `router.homepage`), a `list` attribute that let you retrieve the whole list of pages and `currentRoute` which is a reference to the current page. If you expand `currentRoute`, you can find where the `id` parameter will be available. - -![currentRoute](../_images/walkthroughs-fullstack-27.png) - -Notice that it has "*id*" as value. That's because the application right now has not recieved an argument (Remember, your app is live inside App Builder). This will create challenges for us when we assemble our app, but we can easily fix it by editing the page and providing a **Default Path parameter**. In the **Page** pane, use the gear icon next to "Movie details" to edit its configuration and add an ID that you know exists in your backend. - -![default parameters](../_images/walkthroughs-fullstack-28.png) - -Now, we are ready to get our data. Just as we did in the homepage, let's add a local query: - -1. Create a local query. -2. Name it `getMovie`. -3. Set the type to **Query**. -4. Copy the GraphQL statement we built before. -5. Configure the variable `movieID` to `{{ router.currentRoute.params.id }}`. -6. Set up your `Authorization` header to `{{ localStorage.getItem('tokenID') }}`. -7. Click **Save and Run**. - -![Get movie](../_images/walkthroughs-fullstack-29.png) - -Now we are ready to assemble our page. We will do a simple design inside an Async component. Drop components so your page looks like this: - -![Get movie](../_images/walkthroughs-fullstack-30.png) - -Here is how we set our attributes: -1. Async content, `Loading` attribute: `{{ getMovie.loading }}`. -2. Heading, `Title` attribute: `{{ getMovie.data?.movie.title }}` -3. First typography,`Text` attribute: `{{ getMovie.data?.movie.genre + " - " + getMovie.data?.movie.rating }}`. -4. Second typography, `Text` attribute: `{{ "by " + getMovie.data?.movie.director }}`. - -Let's use a table to display our cast: -1. Drop a table component onto the canvas. -2. Change the `Data` attribute to `{{ getMovie.data?.movie.cast.items }}` (You might see errors while typing, but you can ignore them). -3. Click **Autogenerate columns** and accept the option to delete existing columns. - -![Get movie](../_images/walkthroughs-fullstack-31.png) - -4. Click the gear icon next to the `Movies` column and then delete the column. -![Get movie](../_images/walkthroughs-fullstack-32.png) - -If you go to the homepage and preview the application, it should look similar to this: - -![Get movie](../_images/walkthroughs-fullstack-33.png) - -## Deploying the App - -The deploy process will publish your app from App Builder into a production application. Start by clicking the **Deploy** button in the top bar to bring up the deploy modal. You can set up versioning there and then click the second **Deploy** button. - -![Get movie](../_images/walkthroughs-fullstack-34.png) - -The process will start and take a few minutes. - -![Get movie](../_images/walkthroughs-fullstack-35.png) - -Once completed, you will see this screen and your application is ready to be enjoyed! - -![Get movie](../_images/walkthroughs-fullstack-36.png) diff --git a/docs/projects/gettingstarted/walkthroughs.md b/docs/projects/gettingstarted/walkthroughs.md index ab04dce..37c8bce 100644 --- a/docs/projects/gettingstarted/walkthroughs.md +++ b/docs/projects/gettingstarted/walkthroughs.md @@ -7,11 +7,7 @@ slug: '/gettingstarted/walkthroughs' This section contains several end-to-end app building examples. Each walkthrough provides data, code examples, and best practices. -Here's a brief overview of the subsections you will find: - -- [Building a Full-Stack App](walkthroughs-fullstack.md): In this guide, we will show you how to build a simple full-stack application leveraging the [Jumpstart with accelerators](jumpstart/jumpstart.md) template. - +In this section, you will find: + - [Building a Frontend for a Backend-only Project](walkthroughs-backend-movieapp.md): In this guide, we will show you how to create a basic movie database app to showcase the ease of integrating the 8base Backend with your own custom frontend. - -- [Building an App with an 8base Frontend-only Project](walkthroughs-frontend-movieapp.md): In this guide, we will show you how to connect to external data to create a movie database app using an 8base frontend-only project. diff --git a/docs/projects/introduction/01-what-is-8base.md b/docs/projects/introduction/01-what-is-8base.md index e3db1f8..bb1f412 100644 --- a/docs/projects/introduction/01-what-is-8base.md +++ b/docs/projects/introduction/01-what-is-8base.md @@ -5,18 +5,49 @@ slug: '/introduction/what-is-8base' --- # What is 8base? -Welcome to 8base, a purpose-built low-code platform for professional developers. At its core, 8base is engineered to streamline the development of full-stack JavaScript applications, eliminating the usual overhead while retaining the depth and control that seasoned developers and their end-users expect. +8base is a toolkit for developers who prioritize efficiency, scalability, security and quality. Below is a description of the modules and capabilities of 8base, providing an overview of how the platform is organized. -## Key Features of 8base +## 8base Home -- **Frontend Development Tools**: 8base provides a powerful visual frontend development environment with a rich set of fully-configurable UI components. Quickly design, build and deploy web applications with no limitations on styling or taking full-control using code where necessary. 8base’s frontend tools provide simple integration with 8base Backends while also providing for easy integration with any API or data source. -- **Backend Development Tools**: 8base delivers an integrated suite of backend development tools, streamlining the process of setting up a relational data schema, implementing granular role-based access controls, provisioning authentication services, and more. Designed with efficiency in mind, these tools empower developers to establish a robust backend infrastructure with minimal friction, ensuring a solid foundation for any application. -- **GraphQL API Generation**: 8base instantly delivers an auto-generated and fully-documented GraphQL APIs for an application’s backend data. Extend and customize these APIs with server-side functions to ensure they fit your specific requirements. -- **Managed Backend-as-a-Service**: 8base presents a comprehensive DevOps-free backend solution, encompassing a fully-managed relational database and serverless functions. Whether you're leveraging 8base's frontend toolkit or your preferred development framework, this service ensures robust backend support, streamlining operations and allowing developers to prioritize feature-rich application development. +8base Home serves as the central dashboard for all your 8base projects. It provides a holistic view of your applications, resources, and configurations. From here, you can navigate to other modules, manage user roles, and monitor application health. -8base’s Backend-as-a-Service can be utilized independently of its frontend development tools, for use cases where a managed backend is required to support frontend web and/or mobile applications written using other frameworks or tools. +Key Features: +- Centralized management of Projects. +- Quick access to other 8base modules. +- User role and permission management. -In essence, 8base is a toolkit for developers who prioritize efficiency, scalability, security and quality. +## Backend Builder + +The Backend Builder is where the magic happens for your application's backend needs. It provides a visual interface to design, configure, and manage your database, serverless functions, and API endpoints. + +Key Features: + +- Visual database schema designer. +- Spreadsheet-like data view and management interface. +- Serverless function management. +- Management of application core services such as authentication, role-based access controls and more. +- API endpoint configuration and testing. + +Backend Builder can be accessed by selecting OPEN BACKEND from the Project Dashboard. This results in Backend Builder opening in another tab, allowing for easy navigation of concurrent 8base Home, Backend and Frontends even across multiple projects. + +## Command-Line Interface (CLI) + +For developers who prefer working in a terminal or need to automate tasks, 8base offers a robust Command-Line Interface (CLI). The CLI provides a set of commands to manage, deploy, and interact with 8base projects directly from the command line. + +Key Features: + +- Project initialization and management +- Deployment automation +- Direct interaction with 8base services + +## SDK + +The 8base Software Development Kit (SDK) is a collection of tools and libraries designed to simplify the integration of 8base services into your application. Whether you're building a web, mobile, or desktop application, the SDK provides the necessary functions to interact with 8base's backend seamlessly. + +Key Features: + +- Comprehensive API wrappers +- Authentication and authorization helpers +- Integration with popular frameworks and languages -Dive in and discover how 8base can elevate your development process and application runtime operations. diff --git a/docs/projects/introduction/02-quickstart.md b/docs/projects/introduction/02-quickstart.md deleted file mode 100644 index 4565c34..0000000 --- a/docs/projects/introduction/02-quickstart.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: '02-quickstart' -sidebar_label: 'Quickstart' -slug: '/introduction/quickstart' ---- -# Quickstart Guide for 8base - -This guide describes the process of creating a project in 8base and outline the options available to you. A project in 8base serves as a container for backend services such as data management, API, authentication, and optionally, one or several frontend applications. Team members collaborate within a project, utilizing 8base tools to construct their applications. - -Start by navigating to your developer's home and clicking the "Create Project" button. - -![Create Project](../_images/02-quickstart-02.png) - -Each project requires a name that’s unique within your account. After naming your project, you'll be prompted to select an initial project configuration. - -![Create new project](../_images/02-quickstart-04.png) - - -## Project Types - -There are two main types of projects you can create: Backend-Only and Full-Stack. - -1. **Backend-Only Project:** This type of project primarily provides backend-related services, with the option to add a frontend later. This configuration is ideal when 8base is intended to serve as the backbone for applications developed externally. - -![Backend only](../_images/02-quickstart-05.png) - - -2. **Full-Stack Project:** This project type provides both backend services and a frontend, which comes pre-configured to work with the project backend as the primary data source. However, developers are not limited to this data source and can connect to additional sources as needed. - -![Jumpstart with accelerators](../_images/02-quickstart-06.png) - - -Full-Stack projects offer two main options: "Jumpstart with Accelerators" and "Build from Scratch". - - **Jumpstart with Accelerators:** This template provides a basic application styling and pre-built services like authentication and user management, allowing developers to bypass the creation of these standard functionalities and giving an insight into best practices for implementing capabilities with 8base. - -**"Build from Scratch"** provides three alternatives: - -1. **In-App authentication:** This template includes screens and backend interactions needed for user authentication. Users can sign up and sign in on pages within the application. - -2. **Hosted authentication:** This template includes the logic and backend interactions necessary for user authentication. However, the authentication screens are external to the application and are provided by the hosted options of 8base services. - -3. **DIY Authentication:** This is a blank project which allows developers to implement their own user authentication or to choose not to include authentication at all. - -![Build from scratch options](../_images/02-quickstart-07.png) - - -## Data Centers - -8base provides regional hosting options. We recommend selecting the hosting region closest to your application users. Contact 8base with any requrests for hosting regions not on our default list. - -![Data centers](../_images/02-quickstart-08.png) - - -For this guide, we'll choose a Full-Stack project with "Jumpstart with Accelerators" in the US region. To proceed, click "Next". - -![Complete step 1](../_images/02-quickstart-09.png) - - -## Project Plans - -Each project comes with a specific plan that defines access to certain features and usage limits. Visit our [Pricing Page](https://www.8base.com/pricing) to learn more about our plans. For this guide, we'll select the "Free Tier" option. - -![Plans](../_images/02-quickstart-10.png) - - -Upon creation, you'll be directed to the Project Dashboard. - -![Dashboard](../_images/02-quickstart-11.png) - - -To access backend services, use the shortcut in the top left area of the dashboard. - -![Open backend](../_images/02-quickstart-12.png) - - -This will open a new tab in your browser for the backend console. - -![Backend](../_images/02-quickstart-13.png) - - -To access your frontend, use the shortcut in the top right area of the dashboard. A dropdown menu allows you to select from your different frontends or to add a new frontend. - -![Open frontend](../_images/02-quickstart-14.png) - - -## Working on Your Frontend - -As you work on your frontend, you can preview the current page, which opens a new tab executing your app's code as if you were accessing the selected page. - -![Appbuilder](../_images/02-quickstart-15.png) - - -As developers work on their frontend, they can preview their current page. This opens a new tab executing their app's code as if they were accessing the currently selected page. - -![Preview](../_images/02-quickstart-16.png) - - -Once development milestones are achieved, you can deploy your frontend. This action publishes a compiled version of your application to a production environment. To start this process, click the "Deploy" button. - -![Deploy button](../_images/02-quickstart-17.png) - -A modal window will appear, showing the currently deployed version. Here you can manage your version number and confirm the deployment of your application. - -![Deploy dialog](../_images/02-quickstart-18.png) - -Once deployed, the compiled version of your application is accessible at the public URL for the frontend. You can continue editing your frontend, while your application users can enjoy the published app. - -![Deployed app](../_images/02-quickstart-19.png) diff --git a/docs/projects/introduction/03-main-modules-and-capabilities.md b/docs/projects/introduction/03-main-modules-and-capabilities.md deleted file mode 100644 index a584885..0000000 --- a/docs/projects/introduction/03-main-modules-and-capabilities.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: '03-main-modules-and-capabilities' -sidebar_label: 'Main Modules and Capabilities' -slug: '/introduction/main-modules-and-capabilities' ---- -# Main Modules and Capabilities - -8base has been designed as a comprehensive platform to cater to the diverse needs of modern application development. Its modular approach ensures that developers have the tools they need at every stage of the application lifecycle. Below is a description of the modules and capabilities of 8base, providing an overview of how the platform is organized. - -## 8base Home - -8base Home serves as the central dashboard for all your 8base projects. It provides a holistic view of your applications, resources, and configurations. From here, you can navigate to other modules, manage user roles, and monitor application health. - -Key Features: -- Centralized management of Projects. -- Quick access to other 8base modules. -- User role and permission management. - -## Backend Builder - -The Backend Builder is where the magic happens for your application's backend needs. It provides a visual interface to design, configure, and manage your database, serverless functions, and API endpoints. - -Key Features: - -- Visual database schema designer. -- Spreadsheet-like data view and management interface. -- Serverless function management. -- Management of application core services such as authentication, role-based access controls and more. -- API endpoint configuration and testing. - -Backend Builder can be accessed by selecting OPEN BACKEND from the Project Dashboard. This results in Backend Builder opening in another tab, allowing for easy navigation of concurrent 8base Home, Backend and Frontends even across multiple projects. - -## App Builder - -8base's App Builder is a visual tool designed for frontend development. It allows developers to design and build frontend web applications, integrate with the 8base backend and other APIs and data sources, and preview and deploy applications seamlessly. - -Key Features: - -- Drag-and-drop user interface designer. -- Rich component library. -- Integration with 8base backends, REST and GraphQL APIs and other data sources. -- IDE for authoring frontend functions and queries. -- Quick application preview and deploy. - -App Builder can be accessed by selecting OPEN FRONTEND from the Project Dshboard. This results in App Builder opening in another tab, allowing for easy navigation of concurrent 8base Home, Backend and Frontends even across multiple projects. - - -## Command-Line Interface (CLI) - -For developers who prefer working in a terminal or need to automate tasks, 8base offers a robust Command-Line Interface (CLI). The CLI provides a set of commands to manage, deploy, and interact with 8base projects directly from the command line. - -Key Features: - -- Project initialization and management. -- Deployment automation. -- Direct interaction with 8base services. - -## SDK - -The 8base Software Development Kit (SDK) is a collection of tools and libraries designed to simplify the integration of 8base services into your application. Whether you're building a web, mobile, or desktop application, the SDK provides the necessary functions to interact with 8base's backend seamlessly. - -Key Features: - -- Comprehensive API wrappers. -- Authentication and authorization helpers. -- Integration with popular frameworks and languages. - -## Conclusion - -8base's modular approach ensures that developers have a tailored experience, whether they're working on the frontend, backend, or anywhere in between. By understanding the main modules and their capabilities, you can harness the full power of 8base to build, deploy, and manage applications efficiently. diff --git a/docs/projects/introduction/04-projects.md b/docs/projects/introduction/04-projects.md deleted file mode 100644 index c894e57..0000000 --- a/docs/projects/introduction/04-projects.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: '04-projects' -sidebar_label: 'Projects' -slug: '/introduction/projects' ---- -# Projects - -8base delivers a robust platform empowering developers to architect comprehensive JavaScript applications. At the heart of this platform lies 8base Projects, chiefly comprising a Backend and possibly numerous Frontends. You can classify these projects into two primary categories: Fullstack and Backend-Only. - -## Project Categories - -### Fullstack Projects - -Fullstack projects are distinguished by a single Backend supplemented by one or numerous Frontends. This configuration allows developers to append additional Frontends per their project needs. - -#### Starting a Project - -8base allows users to jumpstart projects either by leveraging accelerators as a groundwork or embarking from a clean slate. Both approaches provide a robust framework to construct feature-intensive applications. - -##### Jumpstart with Accelerators - -Accelerators are productivity-enhancing templates designed to fast-track the application development lifecycle. Fullstack projects present the opportunity to harness these Accelerators for a streamlined development journey. - -##### Build from Scratch - -If you're a developer yearning for absolute control over your projects, you have the option to architect Fullstack projects from scratch. This method provides a spectrum of ready-to-use Integrated Authentication alternatives: - -- In-App Authentication: Allows the application to control and manage the entire authentication process. This option is ideal for tailored experiences. - -- Hosted Authentication: Facilitates seamless integration with minimal setup via a cloud-hosted authentication interface, maintained and secured by 8base. - -- DIY Authentication: Offers developers the freedom to design their authentication process from the ground up. - - -### Backend-Only Projects - -Backend Only projects consist exclusively of a Backend. These projects serve as a powerful Backend-as-a-Service (BaaS) tool. Notably, these projects can be transformed into Fullstack projects by adding Frontends as needed. - -Backend (and Fullstack) projects reap the benefits of: - -1. A fully scalable server-less GraphQL API. - -2. A fully managed MySQL Database, hosted on AWS ([Aurora MySQL](https://aws.amazon.com/rds/aurora/)). - -3. Preconfigured app services (Authentication, Authorization, File Storage, and more) - - -All 8base projects are managed via the 8base Management Console, a secure web portal requiring an 8base account and a modern web browser. Projects benefit from scalable server-less GraphQL API, fully managed MySQL Database hosted on AWS, and additional app services like Authentication, Authorization, File Storage, all supported by the 8base team and community. - diff --git a/docs/projects/introduction/06-frontend-capabilities-overview.md b/docs/projects/introduction/06-frontend-capabilities-overview.md deleted file mode 100644 index b2dd7e7..0000000 --- a/docs/projects/introduction/06-frontend-capabilities-overview.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: '06-frontend-capabilities-overview' -sidebar_label: 'Frontend Capabilities Overview' -slug: '/introduction/frontend-capabilities-overview' ---- -# Frontend Capabilities Overview - -As a JavaScript developer, your journey towards creating dynamic applications is about to get a whole lot smoother. Welcome to App Builder, your one-stop solution for visual development and configuration. With App Builder, you're in full command, deciding how and where to implement your applications. Not only does it let you interact with a pseudo-live version of your application, but it also integrates the development, testing, and visualization into a single editor. - -## App Architecture - -When built with App Builder, your app's backbone is a single-page application based onReact.js, Material UI, Apollo Client, and 8base optimizations. Each of these foundational frameworks lends crucial elements to the functionality and aesthetics of your applications. Not to worry if you're not well-versed with these frameworks, working with App Builder doesn't require mastery of them. For more details, refer to the section "Who uses 8base." - -## Application Data (State Management) - -State management in App Builder applications is all about sharing information in the form of objects between components and other application elements. State entries could either be declared globally, making them available throughout the application, or locally, confining their existence to the page on which they're declared. - -## App Navigation - -Navigating within the app revolves around pages and layouts. A layout houses common elements for use across multiple pages. Pages correspond to specific routing rules, making them the targets for navigation. Developers have access to a router object, which lays bare the configuration of each page and provides code methods for navigation. - -App Builder takes it a step further by introducing additional events during the lifecycle of a navigation event. This allows developers to insert logic wherever it makes the most sense. Navigation events occur before entering and after rendering each page and apply to all pages. Individual pages have events for adding custom code, functions, or requests before loading, exiting, or updating a page. - -## Access to Data Sources (Resources and Requests) - -App Builder paves the way to backend services using resources. These could be GraphQL backends, hosted at 8base or elsewhere, or external RESTful services. Interactions with these resources are made possible through requests, which denote the actual operation against a resource. Depending on the type of resource, requests can take the form of queries or mutations for GraphQL, or any valid HTTP verb for REST resources. - -Requests come with configurations to dictate the information sent and/or retrieved from the resource, along with methods to implement transformation, success, and error logic. Each request can be executed automatically, in response to an application or component event, or manually through code. - -Requests are accessible in the application, either at a global or local scope. During execution, the request configuration and added code can access other requests, state entries, and functions based on their declared scope. - -## Application Logic (Functions) - -App Builder empowers developers to declare JavaScript functions in either the global or local scope. These functions house application logic, offering an organized method for code reuse. Developers can decide if these functions should provide asynchronous behavior or not. - -Functions are exposed in the application state as well, either at the global or local scope. From their code, they can access other functions, requests, or state entries based on their declared scope. - -## Components - -Components form the core of content within pages and layout. They can represent standard HTML elements, Material UI components, or additional React components. Each component comes with a set of properties, a styling configuration, and event handlers. Properties can take on literal values, references to states, or JavaScript expressions. Events can be implemented using code blocks, references to requests, or references to functions. - -While components aren't part of the state, they can reference and use any element in the state from the global scope or the local scope of their page. This access combines all concepts, enabling developers to implement the dynamic logic of their app. - -## Assets -App Builder lets developers add different types of assets, like images, videos, icons, fonts, etc., to their projects. Once the application is deployed, these assets are available under the asset folder, and can be referenced just as it is done in regular coded projects. - -## Application Styling - -App Builder offers an extensive toolkit for managing application style. It follows a predictable hierarchy for style rules that begins with a main theme defining core style variables, a global CSS file for custom styles, and the ability to override styles for different component types. Moreover, each component instance has its own style configuration. - -App Builder also provides breakpoints and media queries to ease the development of responsive web applications. On the canvas, the viewport size can be adjusted or dragged. As the application is pseudo-live, media query rules come into effect, allowing developers to see how the styling configuration behaves. - -## Collaboration - -App Builder supports real-time collaboration, enabling several developers to work on the same frontend simultaneously. Any changes made by a developer are instantly reflected across all other connected sections. At the top of App Builder, developers can see who else is sharing the work session with them. Only project team members have access to edit the frontend. - -## Preview and Deployment - -App Builder allows developers to preview applications at any juncture during development, offering a live insight into the application's current status. Preview always starts in the page currently being edited. Unlike the pseudo-live version inside App Builder’s design canvas, Preview version has no restrictions or design-time constraints. - -The deployment process involves compiling and publishing the application to a production environment. The deployed version is completely isolated from the version in App Builder, as it is the live compiled version of the application. Developers can configure additional settings such as SSL certificates and custom domains in the global settings of the frontend. - diff --git a/docs/projects/introduction/07-built-application-architecture.md b/docs/projects/introduction/07-built-application-architecture.md index 75bc044..191c217 100644 --- a/docs/projects/introduction/07-built-application-architecture.md +++ b/docs/projects/introduction/07-built-application-architecture.md @@ -7,9 +7,10 @@ slug: '/introduction/built-application-architecture' ## Cloud Infrastructure -8base utilizes Amazon Web Services (AWS) for hosting both backend and frontend applications. +8base utilizes Amazon Web Services (AWS) for hosting backend applications. ## Data Layer + 8base employs a fully redundant and fault-tolerant Aurora MySQL relational database within AWS. For scalability and performance, automatic load-balancing is implemented across these redundant databases. ## Logic Layer @@ -35,15 +36,3 @@ slug: '/introduction/built-application-architecture' - Documentation The API can be extended using custom resolvers through serverless JavaScript and Typescript functions. - -## Frontend - -Applications constructed with 8base's frontend tools produce a React application hosted on AWS S3. For optimized delivery, CDN services are facilitated by Amazon CloudFront. - -## Alternative Frontends - -8base’s backend and GraphQL API support frontends built using developers’ framework of choice or even other low-code tools. In these cases, frontend applications can be hosted using Netlify, Vercel or any other hosting provider. - -## Mobile Applications - -8base’s backend and GraphQL API support native mobile applications built using any of the prevailing frameworks and/or tools. diff --git a/docs/projects/introduction/08-using-8base-at-scale.md b/docs/projects/introduction/08-using-8base-at-scale.md index 83d6840..3660c36 100644 --- a/docs/projects/introduction/08-using-8base-at-scale.md +++ b/docs/projects/introduction/08-using-8base-at-scale.md @@ -5,9 +5,11 @@ slug: '/introduction/using-8base-at-scale' --- # Using 8base at Scale +As businesses grow, so do their technological needs. Scalability isn't just about handling more users; it's about ensuring consistent performance, security, and cost-effectiveness at every level of growth. 8base was built to operate large applications at scale and offers a variety of cloud instance types to cater to different scalability requirements. + ## Introduction -As businesses grow, so do their technological needs. Scalability isn't just about handling more users; it's about ensuring consistent performance, security, and cost-effectiveness at every level of growth. Unlike most no- and low-code tools, 8base was built to operate large applications at scale and offers a variety of cloud instance types to cater to different scalability requirements. +Scaling with 8base is a combination of leveraging its built-in capabilities and implementing best practices. By staying proactive, monitoring performance, and optimizing regularly, you can ensure that your 8base application remains robust and efficient, even as it handles a growing number of users and operations. ### 8base’s Standard Multi-Tenant Infrastructure @@ -15,13 +17,13 @@ This is the default offering from 8base and a great way to get started. It provi ### Dedicated Instances -8base offers the ability to host backend and frontend applications in dedicated instances, which allocate exclusive and isolated cloud resources. This ensures more consistent performance and offers a higher degree of configuration flexibility such as the size and memory of the database server, global clustering, more replicas and tunable parameters, while remaining a fully-managed service. +8base offers the ability to host backend applications in dedicated instances, which allocate exclusive and isolated cloud resources. This ensures more consistent performance and offers a higher degree of configuration flexibility such as the size and memory of the database server, global clustering, more replicas and tunable parameters, while remaining a fully-managed service. ### Self-Hosted Instances For businesses that require complete control over their computing environment, 8base offers self-hosted instances. This option allows businesses to run 8base inside of their own AWS account, ensuring full customization, data sovereignty, and the ability to integrate any tool or service. It's the most hands-on option and requires a comprehensive understanding of both infrastructure management and 8base. -## Tips to Realize Better Performance at Scale +## Best Practices As applications grow and user bases expand, the need for scalable infrastructure becomes paramount. 8base, with its robust architecture built on top of Amazon Web Services (AWS), is designed to handle scale. However, leveraging its full potential requires understanding and strategic implementation. This article delves into best practices and considerations for using 8base at scale. @@ -45,7 +47,7 @@ Design your Lambda functions to be stateless. This ensures they can be quickly i Monitor and adjust the concurrency settings for your Lambda functions. While AWS Lambda scales automatically, setting appropriate concurrency limits can prevent unexpected spikes and associated costs. -#### GraphQL API Considerations +### GraphQL API Considerations #### Batch Operations @@ -53,20 +55,3 @@ Instead of making multiple individual requests, batch operations where possible. #### Optimize Queries Avoid fetching unnecessary data. Use GraphQL's flexibility to request only the data needed, reducing the payload and improving performance. - -### Frontend Performance - -#### Content Delivery Network (CDN) - -Leverage 8base’s built-in CDN capabilities enabled by Amazon CloudFront. CDNs cache content closer to users, reducing latency and improving load times. - -#### Asynchronous Operations - -For operations that don't need immediate feedback, consider implementing them asynchronously. This can offload heavy tasks from the main thread, ensuring a smoother user experience. - -#### Performance Optimization -Developers using 8base in their own dedicated environment have the option to tune their database instance to better match the requirements of their applications. - -## Conclusion -Scaling with 8base is a combination of leveraging its built-in capabilities and implementing best practices. By staying proactive, monitoring performance, and optimizing regularly, you can ensure that your 8base application remains robust and efficient, even as it handles a growing number of users and operations. - diff --git a/docs/projects/introduction/10-developer-resources.md b/docs/projects/introduction/10-developer-resources.md index 8761252..2128dde 100644 --- a/docs/projects/introduction/10-developer-resources.md +++ b/docs/projects/introduction/10-developer-resources.md @@ -5,30 +5,32 @@ slug: '/introduction/developer-resources' --- # Developer Resources -## 8base Resources +## Documentation -### Documentation -This documentation site contains all the information you need to understand 8base capabilities and bring your projects to completion successfully. We encourage you to follow the walkthroughs and quickstart guides for complete coverage. You can also take advantage of the search capabilities to find the information you are looking for. +This documentation site contains all the information you need to understand 8base capabilities and bring your projects to completion successfully. We encourage you to follow the walkthroughs and quickstart guides for complete coverage. -### Academy -Our [academy](https://www.8base.com/8base-academy) site provides a collection of videos that go into great detail for specific capabilities and use cases. These are great to see how others use 8base tools to build their application. +## Academy -### Community -For a more interactive learning experience, we encourage you to connect with our vibrant community at [https://community.8base.com/](https://community.8base.com/). This platform allows you to ask questions, share experiences, help others and interact with other members of the 8base community. +Our [Academy](https://www.8base.com/8base-academy) site provides a collection of videos that go into great detail for specific capabilities and use cases. These are great to see how others use 8base tools. + +## Community + +For a more interactive learning experience, we encourage you to connect with our vibrant community at [Community](https://community.8base.com/). This platform allows you to ask questions, share experiences, help others and interact with other members of the 8base community. + +## Support -### Support In the event of technical issues with the product, please reach out to our dedicated support team at [support@8base.com.](mailto:support@8base.com.) We are committed to providing you with the assistance you need to ensure a seamless experience with 8base. -### Udemy Bootcamp -A guided course on our backend capabilities is available at Udemy: [https://www.udemy.com/course/the-8base-developer-bootcamp-0-to-hero-course/](https://www.udemy.com/course/the-8base-developer-bootcamp-0-to-hero-course/) +## Udemy Bootcamp + +A guided course on our backend capabilities is available at [Udemy](https://www.udemy.com/course/the-8base-developer-bootcamp-0-to-hero-course/) ## External Resources -The following are great documentation sites that cover technologies used within 8base, which might be useful. + +The following are great documentation sites that cover technologies used within 8base: - [GraphQL Documentation](https://graphql.org/learn/) -- [MUI Components](https://mui.com/material-ui/getting-started/supported-components/) - [Apollo client](https://www.apollographql.com/docs/react) -- There are great tutorials for Javascript available online, but it is always useful to go [back to the basis](https://www.w3schools.com/js/) diff --git a/docs/projects/introduction/index.md b/docs/projects/introduction/index.md index d4474a4..7690423 100644 --- a/docs/projects/introduction/index.md +++ b/docs/projects/introduction/index.md @@ -5,28 +5,35 @@ slug: '/' --- # Introduction -Welcome to 8base, a powerful low-code development platform designed to facilitate the creation of full-stack JavaScript applications. We created this platform for professional developers who seek an efficient and streamlined tool to bring their projects to life. +Welcome to 8base! We created this platform for professional developers who seek an efficient and streamlined tool to bring their projects to life. -8base empowers developers to generate comprehensive applications, manage data effectively, and design and deploy scalable and robust digital products. With 8base, developers can generate comprehensive GraphQL APIs and extend them with custom server-side functions. +![ ](../_images/relaxed-coder.png) -8base also enables developers to build frontend applications that interact seamlessly with their 8base backend and communicate with any third-party API. The versatility of 8base provides a wide range of opportunities to innovate and deliver high-quality digital solutions. +8base delivers an integrated suite of backend development tools, streamlining the process of setting up a relational data schema, implementing granular role-based access controls, provisioning authentication services, and more. Designed with efficiency in mind, these tools empower developers to establish a robust backend infrastructure with minimal friction, ensuring a solid foundation for any application. + +## Backend Development Tools + +8base delivers an integrated suite of backend development tools. You can control security permissions at the user, team, or organization level. You can control authentication methods. On subscription plans where CI/CD is enabled, developers will be able to create up to a specified number of environments. + +## GraphQL API Generation + +8base instantly delivers an auto-generated and fully-documented GraphQL APIs for an application’s backend data. Extend and customize these APIs with server-side functions to ensure they fit your specific requirements. + +## Managed Backend-as-a-Service + +8base presents a comprehensive DevOps-free backend solution, encompassing a fully-managed relational database and serverless functions. Whether you're leveraging 8base's frontend toolkit or your preferred development framework, this service ensures robust backend support, streamlining operations and allowing developers to prioritize feature-rich application development. ## Create an Account -Create your free account to get started with 8base at [app.8base.com](https://app.8base.com). After you've set up your account, you'll be able to create Projects and use the 8base tools to buiold and run web applications. + +Create your free account to get started with 8base at [app.8base.com](https://app.8base.com). After you've set up your account, you'll be able to create Projects and use the 8base tools. You can sign up with user name and password, Github, or Google. ## System Requirements -8base is a browser-based web application. Please review these system requirements for the best experience. Building on any laptop or desktop is currently supported using a screen resolution that is at least 1280 x 1084 is recommended. -8base works best on Google Chrome but also supports Apple Safari, Mozilla Firefox and Microsoft Edge – if you are experiencing any issues, we recommend switching to Chrome. - -You must allow pop-ups, redirects, and ClipBoard from app.8base.com and appbuilder.8base.com. +8base is a browser-based web application. Please review these system requirements for the best experience. Building on any laptop or desktop is currently supported using a screen resolution that is at least 1280 x 1084 is recommended. -## Documentation Organization +8base works best on Google Chrome, but also supports Apple Safari, Mozilla Firefox and Microsoft Edge. If you are experiencing any issues, we recommend switching to Chrome. -- [**Introduction**](/introduction/what-is-8base): This section provides foundational information on what 8base is, who is it for, and how to use it. It also has a [quickstart tutorial](/introduction/quickstart) for your first project. -- [**Getting Started**](../gettingstarted/gettingstarted-index.md): This section provides walkthroughts, examples of common tasks, and explains how to jumpstart your app with accelerators. -- [**Backend Development**](/projects/backend/getting-started): Here, you'll find detailed guides and tutorials on leveraging the power of 8base for backend development. It includes instructions on creating GraphQL APIs, custom server-side functions, and managing data. -- [**Frontend Development**](/projects/frontend/getting-started-introduction): This section provides comprehensive instructions for building frontend applications connected to your 8base backend, APIs and other data sources. +You must allow pop-ups, redirects, and ClipBoard from app.8base.com. diff --git a/docs/projects/introduction/who-uses-8base.md b/docs/projects/introduction/who-uses-8base.md deleted file mode 100644 index 5b27560..0000000 --- a/docs/projects/introduction/who-uses-8base.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 'who-uses-8base' -sidebar_label: 'Who uses 8base?' -slug: '/introduction/who-uses-8base' ---- -# Who Uses 8base? - -8base is designed for use by professional developers who understand the intricacies of today's digital landscape and the importance of rapid development cycles. - -## Prerequisites for an 8base Developer - -- **JavaScript Proficiency**: At the heart of 8base's functionality is JavaScript. A solid grasp of this language is essential to harness the full potential of the platform. Whether you're writing custom functions, using handlebar expressions almost anywhere, integrating third-party services, or manipulating data, JavaScript is your primary language. -- **Object-Oriented Programming (OOP) Knowledge**: A basic understanding of the principles of OOP is helpful when using 8base. 8base's enables the concept of objects extensively throughout the Platform. -- **Familiarity with GraphQL (Recommended)**: While not a strict requirement, having knowledge of GraphQL can be a significant advantage. 8base’s Backend enables a powerful GraphQL API, allowing for efficient and flexible data retrieval and manipulation. - -## Why Professional Developers Choose 8base - -- **Rapid Development**: 8base's low-code environment means that developers can quickly build applications, integrate services, and deploy solutions. This rapid development capability ensures that projects move from concept to production in record time. -- **Flexibility & Control**: Unlike other low-code platforms, 8base does not box developers into a rigid framework. Developers have the freedom to customize, extend, and integrate as they see fit, ensuring that the platform adapts to its users’ needs rather than the other way around. -- **Scalability**: With 8base, developers don't have to compromise on scalability. The platform is built to handle the demands of growing applications, ensuring that as developers’ user bases expand, application remains responsive and efficient. Developers can use 8base to develop a prototype, MVP and/or fully-scalableable and secure production application. -- **Separation of backend, frontend and API layers**: Developers can choose to leverage 8base’s backend and/or frontend development tools while preserving the option to build custom frontend applications using their frontend development framework of choice. - -In summary, 8base is for the discerning developer who values radical productivity yet refuses to compromise on modern coding standards, flexibility and extensibility. - -## What about Mobile Developers? -Mobile developers working Swift, Android or other native frontend framework or low-code tool utilize 8base’s simple to use and scalable Backend-as-a-Service and its powerful GraphQL API. - -## What about Non-Developers? - -Although non-developers benefit greatly from the use of 8base, the product itself is designed for professional developers. However, it’s common for non-develpers to use parts of 8base in collaboration with developers. For instance, making changes to a data model or simple changes to a user interface. diff --git a/docusaurus.config.js b/docusaurus.config.js index b6468ad..586394c 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula'); const redirects = JSON.parse(fs.readFileSync('redirects.json', 'utf8')); -/** @type {import('@docusaurus/types').Config} */ +/** @type {import('@docusaurus/types').Config} **/ const config = { title: '8base Docs', tagline: '8base Platform Documentation', @@ -17,7 +17,7 @@ const config = { onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.ico', - // GitHub pages deployment config. + // GitHub pages deployment config. You may not need this. // If you aren't using GitHub pages, you don't need these. organizationName: '8base', // Usually your GitHub org/user name. projectName: 'Documentation', // Usually your repo name. diff --git a/package-lock.json b/package-lock.json index ab62cef..a3b42f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@easyops-cn/docusaurus-search-local": "^0.29.0", "@mdx-js/react": "^1.6.22", "clsx": "^1.1.1", - "prism-react-renderer": "^1.3.3", + "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", "uuid": "^9.0.1" @@ -198,16 +198,81 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", - "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", + "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", "dependencies": { - "@babel/highlight": "^7.18.6" + "@babel/highlight": "^7.23.4", + "chalk": "^2.4.2" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/code-frame/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/code-frame/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/code-frame/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/code-frame/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/@babel/code-frame/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/code-frame/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/code-frame/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/compat-data": { "version": "7.20.10", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.10.tgz", @@ -246,20 +311,21 @@ } }, "node_modules/@babel/core/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } }, "node_modules/@babel/generator": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.7.tgz", - "integrity": "sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz", + "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==", "dependencies": { - "@babel/types": "^7.20.7", + "@babel/types": "^7.23.5", "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" }, "engines": { @@ -321,9 +387,9 @@ } }, "node_modules/@babel/helper-compilation-targets/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -381,17 +447,17 @@ } }, "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } }, "node_modules/@babel/helper-environment-visitor": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", - "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", "engines": { "node": ">=6.9.0" } @@ -408,23 +474,23 @@ } }, "node_modules/@babel/helper-function-name": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", - "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dependencies": { - "@babel/template": "^7.18.10", - "@babel/types": "^7.19.0" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-hoist-variables": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", - "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.22.5" }, "engines": { "node": ">=6.9.0" @@ -545,28 +611,28 @@ } }, "node_modules/@babel/helper-split-export-declaration": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", - "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", + "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.22.5" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.19.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "engines": { "node": ">=6.9.0" } @@ -607,12 +673,12 @@ } }, "node_modules/@babel/highlight": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", - "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", + "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", "dependencies": { - "@babel/helper-validator-identifier": "^7.18.6", - "chalk": "^2.0.0", + "@babel/helper-validator-identifier": "^7.22.20", + "chalk": "^2.4.2", "js-tokens": "^4.0.0" }, "engines": { @@ -684,9 +750,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.20.13", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.13.tgz", - "integrity": "sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz", + "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==", "bin": { "parser": "bin/babel-parser.js" }, @@ -1633,9 +1699,9 @@ } }, "node_modules/@babel/plugin-transform-runtime/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -1845,9 +1911,9 @@ } }, "node_modules/@babel/preset-env/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -1926,31 +1992,31 @@ } }, "node_modules/@babel/template": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", - "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", "dependencies": { - "@babel/code-frame": "^7.18.6", - "@babel/parser": "^7.20.7", - "@babel/types": "^7.20.7" + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.20.13", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz", - "integrity": "sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==", - "dependencies": { - "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.20.7", - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-function-name": "^7.19.0", - "@babel/helper-hoist-variables": "^7.18.6", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.20.13", - "@babel/types": "^7.20.7", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz", + "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==", + "dependencies": { + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.5", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.5", + "@babel/types": "^7.23.5", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -1959,12 +2025,12 @@ } }, "node_modules/@babel/types": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz", - "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", + "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", "dependencies": { - "@babel/helper-string-parser": "^7.19.4", - "@babel/helper-validator-identifier": "^7.19.1", + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, "engines": { @@ -2728,18 +2794,18 @@ } }, "node_modules/@jridgewell/source-map": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", - "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz", + "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==", "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" } }, "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", - "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -2840,9 +2906,9 @@ } }, "node_modules/@mdx-js/mdx/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "bin": { "semver": "bin/semver" } @@ -3346,9 +3412,9 @@ } }, "node_modules/@types/estree": { - "version": "0.0.51", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz", - "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==" + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" }, "node_modules/@types/express": { "version": "4.17.16", @@ -3575,133 +3641,133 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==" }, "node_modules/@webassemblyjs/ast": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", - "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", + "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==", "dependencies": { - "@webassemblyjs/helper-numbers": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1" + "@webassemblyjs/helper-numbers": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6" } }, "node_modules/@webassemblyjs/floating-point-hex-parser": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz", - "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", + "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==" }, "node_modules/@webassemblyjs/helper-api-error": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz", - "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", + "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==" }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz", - "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz", + "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==" }, "node_modules/@webassemblyjs/helper-numbers": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz", - "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", + "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", "dependencies": { - "@webassemblyjs/floating-point-hex-parser": "1.11.1", - "@webassemblyjs/helper-api-error": "1.11.1", + "@webassemblyjs/floating-point-hex-parser": "1.11.6", + "@webassemblyjs/helper-api-error": "1.11.6", "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/helper-wasm-bytecode": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz", - "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", + "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==" }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz", - "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz", + "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/wasm-gen": "1.11.6" } }, "node_modules/@webassemblyjs/ieee754": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz", - "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", + "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", "dependencies": { "@xtuc/ieee754": "^1.2.0" } }, "node_modules/@webassemblyjs/leb128": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz", - "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", + "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", "dependencies": { "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/utf8": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz", - "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", + "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==" }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz", - "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz", + "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/helper-wasm-section": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1", - "@webassemblyjs/wasm-opt": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1", - "@webassemblyjs/wast-printer": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/helper-wasm-section": "1.11.6", + "@webassemblyjs/wasm-gen": "1.11.6", + "@webassemblyjs/wasm-opt": "1.11.6", + "@webassemblyjs/wasm-parser": "1.11.6", + "@webassemblyjs/wast-printer": "1.11.6" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz", - "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz", + "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/ieee754": "1.11.1", - "@webassemblyjs/leb128": "1.11.1", - "@webassemblyjs/utf8": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz", - "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz", + "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/wasm-gen": "1.11.6", + "@webassemblyjs/wasm-parser": "1.11.6" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz", - "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz", + "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-api-error": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/ieee754": "1.11.1", - "@webassemblyjs/leb128": "1.11.1", - "@webassemblyjs/utf8": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-api-error": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz", - "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz", + "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/ast": "1.11.6", "@xtuc/long": "4.2.2" } }, @@ -3758,9 +3824,9 @@ } }, "node_modules/acorn-import-assertions": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", + "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", "peerDependencies": { "acorn": "^8" } @@ -4113,9 +4179,9 @@ } }, "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -5715,9 +5781,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.12.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz", - "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==", + "version": "5.15.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", + "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -5746,9 +5812,9 @@ } }, "node_modules/es-module-lexer": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", - "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==" + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz", + "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==" }, "node_modules/escalade": { "version": "3.1.1", @@ -6956,9 +7022,9 @@ } }, "node_modules/http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==" + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", + "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==" }, "node_modules/http-deceiver": { "version": "1.2.7", @@ -7822,9 +7888,9 @@ } }, "node_modules/make-dir/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -8125,9 +8191,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -8444,9 +8516,9 @@ } }, "node_modules/package-json/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -8681,9 +8753,9 @@ } }, "node_modules/postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -8692,10 +8764,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -10007,9 +10083,9 @@ } }, "node_modules/remark-mdx/node_modules/semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", "bin": { "semver": "bin/semver" } @@ -10464,9 +10540,9 @@ } }, "node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dependencies": { "lru-cache": "^6.0.0" }, @@ -10489,9 +10565,9 @@ } }, "node_modules/semver-diff/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -11180,12 +11256,12 @@ } }, "node_modules/terser": { - "version": "5.16.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz", - "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==", + "version": "5.24.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz", + "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==", "dependencies": { - "@jridgewell/source-map": "^0.3.2", - "acorn": "^8.5.0", + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, @@ -11197,15 +11273,15 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.6", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz", - "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==", + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz", + "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==", "dependencies": { - "@jridgewell/trace-mapping": "^0.3.14", + "@jridgewell/trace-mapping": "^0.3.17", "jest-worker": "^27.4.5", "schema-utils": "^3.1.1", - "serialize-javascript": "^6.0.0", - "terser": "^5.14.1" + "serialize-javascript": "^6.0.1", + "terser": "^5.16.8" }, "engines": { "node": ">= 10.13.0" @@ -12070,21 +12146,21 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "node_modules/webpack": { - "version": "5.75.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz", - "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==", + "version": "5.89.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz", + "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==", "dependencies": { "@types/eslint-scope": "^3.7.3", - "@types/estree": "^0.0.51", - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/wasm-edit": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1", + "@types/estree": "^1.0.0", + "@webassemblyjs/ast": "^1.11.5", + "@webassemblyjs/wasm-edit": "^1.11.5", + "@webassemblyjs/wasm-parser": "^1.11.5", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.7.6", + "acorn-import-assertions": "^1.9.0", "browserslist": "^4.14.5", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.10.0", - "es-module-lexer": "^0.9.0", + "enhanced-resolve": "^5.15.0", + "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", @@ -12093,9 +12169,9 @@ "loader-runner": "^4.2.0", "mime-types": "^2.1.27", "neo-async": "^2.6.2", - "schema-utils": "^3.1.0", + "schema-utils": "^3.2.0", "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.1.3", + "terser-webpack-plugin": "^5.3.7", "watchpack": "^2.4.0", "webpack-sources": "^3.2.3" }, @@ -12406,9 +12482,9 @@ } }, "node_modules/webpack/node_modules/schema-utils": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", - "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dependencies": { "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", diff --git a/package.json b/package.json index 0f0f66d..06468b5 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@easyops-cn/docusaurus-search-local": "^0.29.0", "@mdx-js/react": "^1.6.22", "clsx": "^1.1.1", - "prism-react-renderer": "^1.3.3", + "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", "uuid": "^9.0.1" diff --git a/redirects.json b/redirects.json index 3e899ea..c88fb56 100644 --- a/redirects.json +++ b/redirects.json @@ -4,169 +4,41 @@ "to": "/8basehome/projects/projects-team-management" }, { - "from": "/backend/authentication", - "to": "/projects/backend/authentication" + "from": "/projects/backend/console/advanced-introspection", + "to": "/backend/console/advanced-introspection" }, { - "from": "/backend/graphql-api/error-handling", - "to": "/projects/backend/graphql-api/error-handling" - }, - { - "from": "/backend/graphql-api/geo-fields", - "to": "/projects/backend/graphql-api/geo-fields" - }, - { - "from": "/backend/graphql-api/grouping-and-aggregations", - "to": "/projects/backend/graphql-api/grouping-and-aggregations" - }, - { - "from": "/backend/graphql-api/mutations", - "to": "/projects/backend/graphql-api/mutations" - }, - { - "from": "/backend/graphql-api/mutations/related-record-mutations", - "to": "/projects/backend/graphql-api/mutations/related-record-mutations" - }, - { - "from": "/backend/graphql-api/mutations/single-record-mutations", - "to": "/projects/backend/graphql-api/mutations/single-record-mutations" - }, - { - "from": "/backend/graphql-api/mutations/update-by-filter-mutations", - "to": "/projects/backend/graphql-api/mutations/update-by-filter-mutations" - }, - { - "from": "/backend/graphql-api/queries/aggregation-query", - "to": "/projects/backend/graphql-api/queries/aggregation-query" - }, - { - "from": "/backend/graphql-api/queries/combining-arguments", - "to": "/projects/backend/graphql-api/queries/combining-arguments" - }, - { - "from": "/backend/graphql-api/queries/combining-queries", - "to": "/projects/backend/graphql-api/queries/combining-queries" - }, - { - "from": "/backend/graphql-api/queries/filtered-list-query", - "to": "/projects/backend/graphql-api/queries/filtered-list-query" - }, - { - "from": "/backend/graphql-api/queries/paginated-query-results", - "to": "/projects/backend/graphql-api/queries/paginated-query-results" - }, - { - "from": "/backend/graphql-api/queries", - "to": "/projects/backend/graphql-api/queries" - }, - { - "from": "/backend/graphql-api/queries/record-list-query", - "to": "/projects/backend/graphql-api/queries/record-list-query" - }, - { - "from": "/backend/graphql-api/queries/related-record-query", - "to": "/projects/backend/graphql-api/queries/related-record-query" - }, - { - "from": "/backend/graphql-api/queries/single-record-query", - "to": "/projects/backend/graphql-api/queries/single-record-query" - }, - { - "from": "/backend/graphql-api/queries/sort-list-query", - "to": "/projects/backend/graphql-api/queries/sort-list-query" - }, - { - "from": "/backend/graphql-api", - "to": "/projects/backend/graphql-api" - }, - { - "from": "/backend/graphql-api/subscriptions/client", - "to": "/projects/backend/graphql-api/subscriptions/client" - }, - { - "from": "/backend/graphql-api/subscriptions/complex-record-subscriptions", - "to": "/projects/backend/graphql-api/subscriptions/complex-record-subscriptions" - }, - { - "from": "/backend/graphql-api/subscriptions", - "to": "/projects/backend/graphql-api/subscriptions" - }, - { - "from": "/backend/graphql-api/subscriptions/simple-record-subscriptions", - "to": "/projects/backend/graphql-api/subscriptions/simple-record-subscriptions" - }, - { - "from": "/backend/graphql-api/variables", - "to": "/projects/backend/graphql-api/variables" - }, - { - "from": "/backend/console/advanced-introspection", - "to": "/projects/backend/console/advanced-introspection" - }, - { - "from": "/backend/console/advanced", - "to": "/projects/backend/console/advanced" - }, - { - "from": "/backend/console/api-explorer", - "to": "/projects/backend/console/api-explorer" - }, - { - "from": "/backend/console/ci-cd", + "from": "/projects/backend/console/ci-cd", "to": "/backend/console/ci-cd" }, - { - "from": "/projects/backend/tools", - "to": "/projects/backend/tools" - }, - { - "from": "/backend/console/users", - "to": "/projects/backend/console/users" - }, { "from": "/projects/backend/plugins-integrations/salesforce", "to": "/backend/data/salesforce" }, { - "from": "/backend/backend", - "to": "/projects/backend/backend" - }, - { - "from": "/backend/roles-and-permissions", - "to": "/projects/backend/roles-and-permissions" - }, - { - "from": "/backend/custom-functions/debugging", + "from": "/projects/backend/custom-functions/debugging", "to": "/backend/custom-functions/debugging" }, { - "from": "/backend/custom-functions/custom-functions-deployment", - "to": "/backend/custom-functions/custom-functions-deployment" - }, - { - "from": "/backend/custom-functions/custom-functions-executing-functions", - "to": "/backend/custom-functions/custom-functions-executing-functions" - }, - { - "from": "/backend/custom-functions/custom-functions-logs", - "to": "/backend/custom-functions/custom-functions-logs" - }, - { - "from": "/backend/custom-functions", + "from": "/project/backend/custom-functions", "to": "/backend/custom-functions" }, { - "from": "/backend/custom-functions/resolvers", + "from": "/projects/backend/custom-functions/resolvers", "to": "/backend/custom-functions/resolvers" }, { - "from": "/backend/custom-functions/tasks", + "from": "/projects/backend/custom-functions/tasks", "to": "/backend/custom-functions/tasks" }, { - "from": "/backend/custom-functions/triggers", + "from": "/projects/backend/custom-functions/triggers", "to": "/backend/custom-functions/triggers" }, + { + "from": "/backend/custom-functions-types", + "to": "/backend/custom-functions/types" + }, { "from": "/projects/backend/handling-files", "to": "/backend/data/handling-files" @@ -259,10 +131,6 @@ "from": "/backend/development-tools/dev-env/runtime-environment", "to": "/backend/custom-functions/dev-environment/runtime-environment" }, - { - "from": "/backend/development-tools", - "to": "/backend/development-tools" - }, { "from": "/backend/development-tools/sdk/api", "to": "/projects/backend/development-tools/sdk/api" @@ -279,17 +147,13 @@ "from": "/backend/development-tools/sdk/filestack-uploader", "to": "/projects/backend/development-tools/sdk/filestack-uploader" }, - { - "from": "/backend/development-tools/sdk", - "to": "/projects/backend/development-tools/sdk" - }, { "from": "/backend/development-tools/sdk/vs-code-plugin", "to": "/projects/backend/development-tools/sdk/vs-code-plugin" }, { - "from": "/backend/getting-started/connecting-to-api", - "to": "/projects/backend/getting-started/connecting-to-api" + "from": "/projects/backend/getting-started/connecting-to-api", + "to": "/backend/getting-started/connecting-to-api" }, { "from": "/projects/backend/getting-started/quick-start", @@ -300,783 +164,79 @@ "to": "/backend/getting-started" }, { - "from": "/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-cdns", - "to": "/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-cdns" - }, - { - "from": "/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-libraries", - "to": "/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/addingremoving-libraries" - }, - { - "from": "/frontend/adding-cdns-and-libraries/calling-frontend-functions/how-to-use-a-cdnlibrary-module-in-an-app", - "to": "/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/how-to-use-a-cdnlibrary-module-in-an-app" - }, - { - "from": "/frontend/adding-cdns-and-libraries/calling-frontend-functions/introduction", - "to": "/projects/frontend/adding-cdns-and-libraries/calling-frontend-functions/introduction" - }, - { - "from": "/frontend/app-components/common-component-properties", - "to": "/projects/frontend/app-components/common-component-properties" - }, - { - "from": "/frontend/app-components/common-component-style-attributes", - "to": "/projects/frontend/app-components/common-component-style-attributes" - }, - { - "from": "/frontend/app-components/component-categories", - "to": "/projects/frontend/app-components/component-categories" - }, - { - "from": "/frontend/app-components/component-consistency", - "to": "/projects/frontend/app-components/component-consistency" - }, - { - "from": "/frontend/app-components/component-groups", - "to": "/projects/frontend/app-components/component-groups" - }, - { - "from": "/frontend/app-components/input-components/autocomplete", - "to": "/projects/frontend/app-components/control-components/autocomplete" - }, - { - "from": "/frontend/app-components/input-components/button", - "to": "/projects/frontend/app-components/control-components/button" - }, - { - "from": "/frontend/app-components/input-components/checkbox", - "to": "/projects/frontend/app-components/control-components/checkbox" - }, - { - "from": "/frontend/app-components/input-components/date-picker", - "to": "/projects/frontend/app-components/control-components/date-picker" - }, - { - "from": "/frontend/app-components/input-components/field-array", - "to": "/projects/frontend/app-components/control-components/field-array" - }, - { - "from": "/frontend/app-components/input-components/file-dropzone-8base", - "to": "/projects/frontend/app-components/control-components/file-dropzone-8base" - }, - { - "from": "/frontend/app-components/input-components/file-dropzone", - "to": "/projects/frontend/app-components/control-components/file-dropzone" - }, - { - "from": "/frontend/app-components/input-components/file-picker-8base", - "to": "/projects/frontend/app-components/control-components/file-picker-8base" - }, - { - "from": "/frontend/app-components/input-components/file-picker-button-8base", - "to": "/projects/frontend/app-components/control-components/file-picker-buton-8base" - }, - { - "from": "/frontend/app-components/input-components/file-picker-button", - "to": "/projects/frontend/app-components/control-components/file-picker-button" - }, - { - "from": "/frontend/app-components/input-components/file-upload", - "to": "/projects/frontend/app-components/control-components/file-upload" - }, - { - "from": "/frontend/app-components/input-components/form-block", - "to": "/projects/frontend/app-components/control-components/form-block" - }, - { - "from": "/frontend/app-components/input-components/multiselect", - "to": "/projects/frontend/app-components/control-components/multiselect" - }, - { - "from": "/frontend/app-components/input-components/radio-group", - "to": "/projects/frontend/app-components/control-components/radio-group" - }, - { - "from": "/frontend/app-components/input-components/radio", - "to": "/projects/frontend/app-components/control-components/radio" - }, - { - "from": "/frontend/app-components/input-components/select", - "to": "/projects/frontend/app-components/control-components/select" - }, - { - "from": "/frontend/app-components/input-components/slider", - "to": "/projects/frontend/app-components/control-components/slider" - }, - { - "from": "/frontend/app-components/input-components/switch", - "to": "/projects/frontend/app-components/control-components/switch" - }, - { - "from": "/frontend/app-components/input-components/text-field", - "to": "/projects/frontend/app-components/control-components/text-field" - }, - { - "from": "/frontend/app-components/input-components/time-picker", - "to": "/projects/frontend/app-components/control-components/time-picker" - }, - { - "from": "/frontend/app-components/input-components/toggle-button-group", - "to": "/projects/frontend/app-components/control-components/toggle-button-group" - }, - { - "from": "/frontend/app-components/input-components/toggle-button", - "to": "/projects/frontend/app-components/control-components/toggle-button" - }, - { - "from": "/frontend/app-components/customizing-app-builder-components", - "to": "/projects/frontend/app-components/customizing-app-builder-components" - }, - { - "from": "/frontend/app-components/customizing-styling-on-components", - "to": "/projects/frontend/app-components/customizing-styling-on-components" - }, - { - "from": "/frontend/app-components/data-components/looper", - "to": "/projects/frontend/app-components/data-components/looper" - }, - { - "from": "/frontend/app-components/introduction", - "to": "/projects/frontend/app-components/introduction" - }, - { - "from": "/frontend/app-components/layout-components/async-content", - "to": "/projects/frontend/app-components/layout-components/async-content" - }, - { - "from": "/frontend/app-components/layout-components/card", - "to": "/projects/frontend/app-components/layout-components/card" - }, - { - "from": "/frontend/app-components/layout-components/container", - "to": "/projects/frontend/app-components/layout-components/container" - }, - { - "from": "/frontend/app-components/layout-components/footer", - "to": "/projects/frontend/app-components/layout-components/footer" - }, - { - "from": "/frontend/app-components/layout-components/header", - "to": "/projects/frontend/app-components/layout-components/header" - }, - { - "from": "/frontend/app-components/layout-components/menu", - "to": "/projects/frontend/app-components/layout-components/menu" - }, - { - "from": "/frontend/app-components/layout-components/paper", - "to": "/projects/frontend/app-components/layout-components/paper" - }, - { - "from": "/frontend/app-components/layout-components/popper", - "to": "/projects/frontend/app-components/layout-components/popper" - }, - { - "from": "/frontend/app-components/other-components/accordion", - "to": "/projects/frontend/app-components/other-components/accordion" - }, - { - "from": "/frontend/app-components/other-components/alert", - "to": "/projects/frontend/app-components/other-components/alert" - }, - { - "from": "/frontend/app-components/other-components/avatar", - "to": "/projects/frontend/app-components/other-components/avatar" - }, - { - "from": "/frontend/app-components/other-components/badge", - "to": "/projects/frontend/app-components/other-components/badge" - }, - { - "from": "/frontend/app-components/other-components/breadcrumbs", - "to": "/projects/frontend/app-components/other-components/breadcrumbs" - }, - { - "from": "/frontend/app-components/other-components/chip", - "to": "/projects/frontend/app-components/other-components/chip" - }, - { - "from": "/frontend/app-components/other-components/divider", - "to": "/projects/frontend/app-components/other-components/divider" - }, - { - "from": "/frontend/app-components/other-components/heading", - "to": "/projects/frontend/app-components/other-components/heading" - }, - { - "from": "/frontend/app-components/other-components/icon-button", - "to": "/projects/frontend/app-components/other-components/icon-button" - }, - { - "from": "/frontend/app-components/other-components/icon", - "to": "/projects/frontend/app-components/other-components/icon" - }, - { - "from": "/frontend/app-components/other-components/image", - "to": "/projects/frontend/app-components/other-components/image" - }, - { - "from": "/frontend/app-components/other-components/link", - "to": "/projects/frontend/app-components/other-components/link" - }, - { - "from": "/frontend/app-components/other-components/list-item", - "to": "/projects/frontend/app-components/other-components/list-item" - }, - { - "from": "/frontend/app-components/other-components/list", - "to": "/projects/frontend/app-components/other-components/list" - }, - { - "from": "/frontend/app-components/other-components/nav-list-item", - "to": "/projects/frontend/app-components/other-components/nav-list-item" - }, - { - "from": "/frontend/app-components/other-components/table", - "to": "/projects/frontend/app-components/other-components/table" - }, - { - "from": "/frontend/app-components/other-components/text", - "to": "/projects/frontend/app-components/other-components/text" - }, - { - "from": "/frontend/app-components/other-components/tooltip", - "to": "/projects/frontend/app-components/other-components/tooltip" - }, - { - "from": "/frontend/app-components/other-components/typography", - "to": "/projects/frontend/app-components/other-components/typography" - }, - { - "from": "/frontend/app-components/setting-event-listeners-on-components", - "to": "/projects/frontend/app-components/setting-event-listeners-on-components" - }, - { - "from": "/frontend/app-components/using-component-property-inputs", - "to": "/projects/frontend/app-components/using-component-property-inputs" - }, - { - "from": "/frontend/app-editor/introduction", - "to": "/projects/frontend/app-editor/introduction" - }, - { - "from": "/frontend/app-editor/understanding-the-app-builder-interface/editor-components-drawer", - "to": "/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-components-drawer" - }, - { - "from": "/frontend/app-editor/understanding-the-app-builder-interface/editor-header-menu-tools", - "to": "/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-header-menu-tools" - }, - { - "from": "/frontend/app-editor/understanding-the-app-builder-interface/editor-hidden-canvas", - "to": "/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-hidden-canvas" - }, - { - "from": "/frontend/app-editor/understanding-the-app-builder-interface/editor-page-canvas", - "to": "/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-page-canvas" - }, - { - "from": "/frontend/app-editor/understanding-the-app-builder-interface/editor-page-context-menu", - "to": "/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-page-context-menu" - }, - { - "from": "/frontend/app-editor/understanding-the-app-builder-interface/editor-settings-and-global-shortcuts", - "to": "/projects/frontend/app-editor/understanding-the-app-builder-interface/editor-settings-and-global-shortcuts" + "from": "/projects/backend/graphql-api/mutations/update-by-filter-mutations", + "to": "/backend/graphql-api/mutations/update-by-filter-mutations" }, { - "from": "/frontend/app-navigation/404-and-error-pages", - "to": "/projects/frontend/app-navigation/404-and-error-pages" + "from": "/projects/backend/graphql-api/queries/aggregation-query", + "to": "/backend/graphql-api/queries/aggregation-query" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/access-states-for-routes", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/access-states-for-routes" + "from": "/projects/backend/graphql-api/queries/combining-arguments", + "to": "/backend/graphql-api/queries/combining-arguments" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/adding-logic-to-navigation-events", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/adding-logic-to-navigation-events" + "from": "/projects/backend/graphql-api/queries/combining-queries", + "to": "/backend/graphql-api/queries/combining-queries" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/handling-redirects", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/handling-redirects" + "from": "/projects/backend/graphql-api/queries/filtered-list-query", + "to": "/backend/graphql-api/queries/filtered-list-query" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/how-to-create-layouts", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/how-to-create-layouts" + "from": "/projects/backend/graphql-api/queries/paginated-query-results", + "to": "/backend/graphql-api/queries/paginated-query-results" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/page-url-settings", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/page-url-settings" + "from": "/projects/backend/graphql-api/queries", + "to": "/backend/graphql-api/queries" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/using-meta-data-stored-on-pages", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/using-meta-data-stored-on-pages" + "from": "/projects/backend/graphql-api/queries/record-list-query", + "to": "/backend/graphql-api/queries/record-list-query" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/using-url-fragment-parameters", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/using-url-fragment-parameters" + "from": "/projects/backend/graphql-api/queries/single-record-query", + "to": "/backend/graphql-api/queries/single-record-query" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/using-url-parameters", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/using-url-parameters" + "from": "/projects/backend/graphql-api/queries/sort-list-query", + "to": "/backend/graphql-api/queries/sort-list-query" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages/using-url-query-parameters", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages/using-url-query-parameters" + "from": "/project/backend/graphql-api", + "to": "/backend/graphql-api" }, { - "from": "/frontend/app-navigation/create-and-editing-app-pages", - "to": "/projects/frontend/app-navigation/create-and-editing-app-pages" + "from": "/projects/backend/graphql-api/subscriptions/client", + "to": "/backend/graphql-api/subscriptions/client" }, { - "from": "/frontend/app-navigation/introduction", - "to": "/projects/frontend/app-navigation/introduction" + "from": "/projects/backend/graphql-api/subscriptions/complex-record-subscriptions", + "to": "/backend/graphql-api/subscriptions/complex-record-subscriptions" }, { - "from": "/frontend/application-layouts/creating-and-editing-layouts", - "to": "/projects/frontend/application-layouts/creating-and-editing-layouts" + "from": "/projects/backend/graphql-api/subscriptions", + "to": "/backend/graphql-api/subscriptions" }, { - "from": "/frontend/application-layouts/introduction", - "to": "/projects/frontend/application-layouts/introduction" + "from": "/projects/backend/graphql-api/subscriptions/simple-record-subscriptions", + "to": "/backend/graphql-api/subscriptions/simple-record-subscriptions" }, { - "from": "/frontend/application-layouts", - "to": "/projects/frontend/application-layouts" + "from": "/projects/backend/graphql-api/variables", + "to": "/backend/graphql-api/variables" }, { - "from": "/frontend/authenticating-app-users/calling-frontend-functions/introduction", - "to": "/projects/frontend/authenticating-app-users/calling-frontend-functions/introduction" - }, - { - "from": "/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-0auth", - "to": "/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-0auth" - }, - { - "from": "/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-basic-emailpassword", - "to": "/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-basic-emailpassword" - }, - { - "from": "/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-hosted-login-w-redirect", - "to": "/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-hosted-login-w-redirect" - }, - { - "from": "/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-json-web-tokens", - "to": "/projects/frontend/authenticating-app-users/supported-authentication-strategies/how-to-setup-authentication-for-json-web-tokens" - }, - { - "from": "/frontend/authenticating-app-users/supported-authentication-strategies/setting-up-protected-pages-in-app-builder", - "to": "/projects/frontend/authenticating-app-users/supported-authentication-strategies/setting-up-protected-pages-in-app-builder" - }, - { - "from": "/frontend/authenticating-app-users/supported-authentication-strategies/testing-authentication-in-development-mode", - "to": "/projects/frontend/authenticating-app-users/supported-authentication-strategies/testing-authentication-in-development-mode" - }, - { - "from": "/frontend/billing/inviting/managing-collaborators/billing-spec-tbd", - "to": "/projects/frontend/billing/inviting/managing-collaborators/billing-spec-tbd" - }, - { - "from": "/frontend/billing/inviting/managing-collaborators/introduction", - "to": "/projects/frontend/billing/inviting/managing-collaborators/introduction" - }, - { - "from": "/frontend/billing/inviting/managing-collaborators/upgradingdowngrading-subscription-tiers", - "to": "/projects/frontend/billing/inviting/managing-collaborators/upgradingdowngrading-subscription-tiers" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/accessing-frontend-data", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/accessing-frontend-data" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/connecting-to-a-data-source-8base-be-workspace", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/connecting-to-a-data-source-8base-be-workspace" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/deploying-publishing-an-app", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/deploying-publishing-an-app" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/dragging-and-dropping-components", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/dragging-and-dropping-components" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/introduction", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/introduction" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/managing-app-pages", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/managing-app-pages" - }, - { - "from": "/frontend/building-frontends-app-builder-walkthrough/selecting-a-design-theme", - "to": "/projects/frontend/building-frontends-app-builder-walkthrough/selecting-a-design-theme" - }, - { - "from": "/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-graphql-api", - "to": "/projects/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-graphql-api" - }, - { - "from": "/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-rest-api", - "to": "/projects/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-a-rest-api" - }, - { - "from": "/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-an-8base-be-workspace", - "to": "/projects/frontend/connecting-to-data-sources/creating-api-connections/connecting-to-an-8base-be-workspace" - }, - { - "from": "/frontend/connecting-to-data-sources/creating-api-connections", - "to": "/projects/frontend/connecting-to-data-sources/creating-api-connections" - }, - { - "from": "/frontend/connecting-to-data-sources/how-to-make-api-calls-requests/how-to-execute-a-graphql-querymutation", - "to": "/projects/frontend/connecting-to-data-sources/how-to-make-api-calls-requests/how-to-execute-a-graphql-querymutation" - }, - { - "from": "/frontend/connecting-to-data-sources/how-to-make-api-calls/how-to-execute-a-rest-api-call", - "to": "/projects/frontend/connecting-to-data-sources/how-to-make-api-calls/how-to-execute-a-rest-api-call" - }, - { - "from": "/frontend/connecting-to-data-sources/how-to-make-api-calls", - "to": "/projects/frontend/connecting-to-data-sources/how-to-make-api-calls" - }, - { - "from": "/frontend/connecting-to-data-sources/introduction", - "to": "/projects/frontend/connecting-to-data-sources/introduction" - }, - { - "from": "/frontend/send-form-data-with-an-api-request", - "to": "/projects/frontend/send-form-data-with-an-api-request" - }, - { - "from": "/frontend/custom-app-styling/creating-a-global-app-theme/component-styling-settings", - "to": "/projects/frontend/custom-app-styling/creating-a-global-app-theme/component-styling-settings" - }, - { - "from": "/frontend/custom-app-styling/creating-a-global-app-theme/exporting-importing-app-themes", - "to": "/projects/frontend/custom-app-styling/creating-a-global-app-theme/exporting-importing-app-themes" - }, - { - "from": "/frontend/custom-app-styling-creating-a-global-app-theme-introduction\",", - "to": "/projects/frontend/custom-app-styling-creating-a-global-app-theme-introduction\"," - }, - { - "from": "/frontend/custom-app-styling/creating-a-global-app-theme/setting-default-styles-on-components", - "to": "/projects/frontend/custom-app-styling/creating-a-global-app-theme/setting-default-styles-on-components" - }, - { - "from": "/frontend/custom-app-styling/introduction", - "to": "/projects/frontend/custom-app-styling/introduction" - }, - { - "from": "/frontend/custom-app-styling/understanding-the-app-builder-interface/adding-custom-fonts-and-icons-to-your-app", - "to": "/projects/frontend/custom-app-styling/understanding-the-app-builder-interface/adding-custom-fonts-and-icons-to-your-app" - }, - { - "from": "/frontend/custom-app-styling/understanding-the-app-builder-interface/configurations-in-the-theme-editor", - "to": "/projects/frontend/custom-app-styling/understanding-the-app-builder-interface/configurations-in-the-theme-editor" - }, - { - "from": "/frontend/custom-app-styling/understanding-the-app-builder-interface/using-a-css-design-framework", - "to": "/projects/frontend/custom-app-styling/understanding-the-app-builder-interface/using-a-css-design-framework" - }, - { - "from": "/frontend/custom-components/component-library/introduction", - "to": "/projects/frontend/custom-components/component-library/introduction" - }, - { - "from": "/frontend/custom-components/component-library/setting-up-your-local-development-environment", - "to": "/projects/frontend/custom-components/component-library/setting-up-your-local-development-environment" - }, - { - "from": "/frontend/custom-components/component-library/spec-tbd", - "to": "/projects/frontend/custom-components/component-library/spec-tbd" - }, - { - "from": "/frontend/custom-frontend-logic/calling-a-function-from-a-callback", - "to": "/projects/frontend/custom-frontend-logic/calling-a-function-from-a-callback" - }, - { - "from": "/frontend/custom-frontend-logic/calling-a-function-from-a-function", - "to": "/projects/frontend/custom-frontend-logic/calling-a-function-from-a-function" - }, - { - "from": "/frontend/custom-frontend-logic/calling-a-function-from-an-event", - "to": "/projects/frontend/custom-frontend-logic/calling-a-function-from-an-event" - }, - { - "from": "/frontend/custom-frontend-logic/calling-frontend-functions", - "to": "/projects/frontend/custom-frontend-logic/calling-frontend-functions" - }, - { - "from": "/frontend/custom-frontend-logic/creating-custom-frontend-functions", - "to": "/projects/frontend/custom-frontend-logic/creating-custom-frontend-functions" - }, - { - "from": "/frontend/custom-frontend-logic/introduction", - "to": "/projects/frontend/custom-frontend-logic/introduction" - }, - { - "from": "/frontend/custom-frontend-logic/functions/typed-arguments-in-frontend-functions", - "to": "/projects/frontend/custom-frontend-logic/functions/typed-arguments-in-frontend-functions" - }, - { - "from": "/frontend/custom-frontend-logic/using-installed-js-libraries-in-scripts", - "to": "/projects/frontend/custom-frontend-logic/using-installed-js-libraries-in-scripts" - }, - { - "from": "/frontend/data-in-the-frontend-(state)/data-scopes-for-app-builder-elements/theme", - "to": "/projects/frontend/data-in-the-frontend-(state)/data-scopes-for-app-builder-elements/theme" - }, - { - "from": "/frontend/data-in-the-frontend/adding-custom-state-data-entries", - "to": "/projects/frontend/data-in-the-frontend/adding-custom-state-data-entries" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/components", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/components" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/functions", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/functions" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/layouts", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/layouts" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/requests", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/requests" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/resource", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/resource" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/views", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements/views" - }, - { - "from": "/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements", - "to": "/projects/frontend/data-in-the-frontend/data-scopes-for-app-builder-elements" - }, - { - "from": "/frontend/data-in-the-frontend/getting-and-setting-state-data", - "to": "/projects/frontend/data-in-the-frontend/getting-and-setting-state-data" - }, - { - "from": "/frontend/data-in-the-frontend/introduction", - "to": "/projects/frontend/data-in-the-frontend/introduction" - }, - { - "from": "/frontend/data-in-the-frontend/understanding-local-vs-global-state-objects", - "to": "/projects/frontend/data-in-the-frontend/understanding-local-vs-global-state-objects" - }, - { - "from": "/frontend/getting-started/building-full-stack-go-to-market-apps-on-8base", - "to": "/projects/frontend/getting-started/building-full-stack-go-to-market-apps-on-8base" - }, - { - "from": "/frontend/getting-started-introduction", - "to": "/projects/frontend/getting-started-introduction" - }, - { - "from": "/frontend/getting-started/what-is-app-builder", - "to": "/projects/frontend/getting-started/what-is-app-builder" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/general-settings", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/general-settings" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/global-app-settings-interface", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/global-app-settings-interface" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/introduction", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/introduction" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-app-billing", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-app-billing" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-seo-in-app-builder", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/managing-seo-in-app-builder" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/seeing-app-activity-history", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/seeing-app-activity-history" - }, - { - "from": "/frontend/global-app-settings/handling-errors/failures-in-the-editor/using-custom-domains", - "to": "/projects/frontend/global-app-settings/handling-errors/failures-in-the-editor/using-custom-domains" - }, - { - "from": "/frontend/global-app-settings/inviting/managing-collaborators/assigning-collaborators-roles", - "to": "/projects/frontend/global-app-settings/inviting/managing-collaborators/assigning-collaborators-roles" - }, - { - "from": "/frontend/global-app-settings/inviting/managing-collaborators/revoking-access-from-collaborators", - "to": "/projects/frontend/global-app-settings/inviting/managing-collaborators/revoking-access-from-collaborators" - }, - { - "from": "/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/displaying-form-errors-to-app-users", - "to": "/projects/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/displaying-form-errors-to-app-users" - }, - { - "from": "/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/handling-request-errors-in-app", - "to": "/projects/frontend/handling-errors-and-debugging/handling-errors/failures-in-the-editor/handling-request-errors-in-app" - }, - { - "from": "/frontend/handling-errors-and-debugging/supported-authentication-strategies/adding-validations-and-custom-errors", - "to": "/projects/frontend/handling-errors-and-debugging/supported-authentication-strategies/adding-validations-and-custom-errors" - }, - { - "from": "/frontend/handling-errors-and-debugging/supported-authentication-strategies/introduction", - "to": "/projects/frontend/handling-errors-and-debugging/supported-authentication-strategies/introduction" - }, - { - "from": "/frontend/handling-errors-and-debugging/supported-authentication-strategies/reading-and-fixing-app-errors", - "to": "/projects/frontend/handling-errors-and-debugging/supported-authentication-strategies/reading-and-fixing-app-errors" - }, - { - "from": "/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-files", - "to": "/projects/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-files" - }, - { - "from": "/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-images", - "to": "/projects/frontend/images-and-files-in-app-builder/available-attributes-on-uploaded-images" - }, - { - "from": "/frontend/images-and-files-in-app-builder/displaying-an-image-or-file-on-a-page", - "to": "/projects/frontend/images-and-files-in-app-builder/displaying-an-image-or-file-on-a-page" - }, - { - "from": "/frontend/images-and-files-in-app-builder/introduction", - "to": "/projects/frontend/images-and-files-in-app-builder/introduction" - }, - { - "from": "/frontend/images-and-files-in-app-builder/uploading-an-image-or-file", - "to": "/projects/frontend/images-and-files-in-app-builder/uploading-an-image-or-file" - }, - { - "from": "/frontend/publishing-apps/adding-ssl-to-custom-domains", - "to": "/projects/frontend/publishing-apps/adding-ssl-to-custom-domains" - }, - { - "from": "/frontend/publishing-apps/cname-records-for-custom-domain", - "to": "/projects/frontend/publishing-apps/cname-records-for-custom-domain" - }, - { - "from": "/frontend/publishing-apps/deployment-settings", - "to": "/projects/frontend/publishing-apps/deployment-settings" - }, - { - "from": "/frontend/publishing-apps/introduction", - "to": "/projects/frontend/publishing-apps/introduction" - }, - { - "from": "/frontend/publishing-apps/making-an-app-public", - "to": "/projects/frontend/publishing-apps/making-an-app-public" - }, - { - "from": "/frontend/publishing-apps/publishing-apps-to-a-cdn", - "to": "/projects/frontend/publishing-apps/publishing-apps-to-a-cdn" - }, - { - "from": "/frontend/publishing-apps/seeing-deployment-history", - "to": "/projects/frontend/publishing-apps/seeing-deployment-history" - }, - { - "from": "/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-custom-viewport", - "to": "/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-custom-viewport" - }, - { - "from": "/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-desktop-viewport", - "to": "/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-desktop-viewport" - }, - { - "from": "/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-mobile-viewport", - "to": "/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-mobile-viewport" - }, - { - "from": "/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-tablet-viewport", - "to": "/projects/frontend/responsive-design-in-app-builder/changing-the-viewport/setting-a-tablet-viewport" - }, - { - "from": "/frontend/responsive-design-in-app-builder-changing-the-viewport", - "to": "/projects/frontend/responsive-design-in-app-builder-changing-the-viewport" - }, - { - "from": "/frontend/responsive-design-in-app-builder/introduction", - "to": "/projects/frontend/responsive-design-in-app-builder/introduction" - }, - { - "from": "/frontend/responsive-design-in-app-builder/managing-media-query-definitions", - "to": "/projects/frontend/responsive-design-in-app-builder/managing-media-query-definitions" - }, - { - "from": "/frontend/responsive-design-in-app-builder/writing-custom-media-query-rules", - "to": "/projects/frontend/responsive-design-in-app-builder/writing-custom-media-query-rules" - }, - { - "from": "/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/developer-permissions-in-the-editor", - "to": "/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/developer-permissions-in-the-editor" - }, - { - "from": "/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/introduction", - "to": "/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/introduction" - }, - { - "from": "/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/user-permissions-in-the-frontend-spec-tbd", - "to": "/projects/frontend/setting-rolebased-access-controls-and-frontend-permissions/inviting/managing-collaborators/user-permissions-in-the-frontend-spec-tbd" - }, - { - "from": "/frontend/triggering-events-in-the-app/introduction", - "to": "/projects/frontend/triggering-events-in-the-app/introduction" - }, - { - "from": "/frontend/triggering-events-in-the-app/managing-events-on-components-and-requests", - "to": "/projects/frontend/triggering-events-in-the-app/managing-events-on-components-and-requests" - }, - { - "from": "/frontend/triggering-events-in-the-app/specifying-events-in-editor", - "to": "/projects/frontend/triggering-events-in-the-app/specifying-events-in-editor" - }, - { - "from": "/frontend/triggering-events-in-the-app/triggering-events-in-custom-front-end-logic", - "to": "/projects/frontend/triggering-events-in-the-app/triggering-events-in-custom-front-end-logic" - }, - { - "from": "/gettingstarted/commontasks/building-responsive-applications", - "to": "/gettingstarted/commontasks/building-responsive-applications" - }, - { - "from": "/gettingstarted/commontasks/create-multiple-records-single-operation", + "from": "/projects/gettingstarted/commontasks/create-multiple-records-single-operation", "to": "/gettingstarted/commontasks/create-multiple-records-single-operation" }, { - "from": "/gettingstarted/commontasks/extending-the-api", + "from": "/projects/gettingstarted/commontasks/extending-the-api", "to": "/gettingstarted/commontasks/extending-the-api" }, { - "from": "/gettingstarted/commontasks/implementing-pagination-api-queries", - "to": "/gettingstarted/commontasks/implementing-pagination-api-queries" - }, - { - "from": "/gettingstarted/commontasks/index", + "from": "/projects/gettingstarted/commontasks/index", "to": "/gettingstarted/commontasks" - }, - { - "from": "/gettingstarted/commontasks/leveraging-navigation-events", - "to": "/gettingstarted/commontasks/leveraging-navigation-events" - }, - { - "from": "/gettingstarted/commontasks/real-time-applications", - "to": "/gettingstarted/commontasks/real-time-applications" - }, - { - "from": "/gettingstarted/commontasks/using-validating-forms", - "to": "/gettingstarted/commontasks/using-validating-forms" } ] \ No newline at end of file diff --git a/sidebars/_project.js b/sidebars/_project.js index 6489a46..06d4d91 100644 --- a/sidebars/_project.js +++ b/sidebars/_project.js @@ -23,16 +23,10 @@ const sidebars = { id: 'projects/introduction/index', }, items: [ - 'projects/introduction/01-what-is-8base', - 'projects/introduction/who-uses-8base', - 'projects/introduction/02-quickstart', - 'projects/introduction/03-main-modules-and-capabilities', - 'projects/introduction/04-projects', - 'projects/introduction/05-backend-capabilities-overview', - 'projects/introduction/06-frontend-capabilities-overview', + 'projects/introduction/01-what-is-8base', + 'projects/introduction/05-backend-capabilities-overview', 'projects/introduction/07-built-application-architecture', - 'projects/introduction/08-using-8base-at-scale', - // 'projects/introduction/navigating-our-docs', + 'projects/introduction/08-using-8base-at-scale', 'projects/introduction/10-developer-resources', ], }, @@ -52,61 +46,9 @@ const sidebars = { id: 'projects/gettingstarted/walkthroughs', }, items: [ - 'projects/gettingstarted/walkthroughs-fullstack', - 'projects/gettingstarted/walkthroughs-backend-movieapp', - 'projects/gettingstarted/walkthroughs-frontend-movieapp', + 'projects/gettingstarted/walkthroughs-backend-movieapp', ], - }, - { - type: 'category', - label: 'Jumpstart with Accelerators', - link: { - type: 'doc', - id: 'projects/gettingstarted/jumpstart/jumpstart', - }, - items: [ - { - type: 'category', - label: 'Authentication Accelerator', - items: [ - 'projects/gettingstarted/jumpstart/authentication-accelerator/signup', - 'projects/gettingstarted/jumpstart/authentication-accelerator/login', - 'projects/gettingstarted/jumpstart/authentication-accelerator/forgot-password', - ], - }, - { - type: 'category', - label: 'User Management Accelerator', - items: [ - 'projects/gettingstarted/jumpstart/user-management-accelerator/my-account', - 'projects/gettingstarted/jumpstart/user-management-accelerator/team-members', - 'projects/gettingstarted/jumpstart/user-management-accelerator/user-create', - 'projects/gettingstarted/jumpstart/user-management-accelerator/user-profile', - ], - }, - { - type: 'category', - label: 'Navigation Accelerator', - items: [ - 'projects/gettingstarted/jumpstart/navigation-accelerator/sidebar-control', - 'projects/gettingstarted/jumpstart/navigation-accelerator/breadcrumbs-management', - ], - }, - { - type: 'category', - label: 'Theme Management Accelerator', - link: { - type: 'doc', - id: 'projects/gettingstarted/jumpstart/theme-management-accelerator/theme-management', - }, - items: [ - 'projects/gettingstarted/jumpstart/theme-management-accelerator/darkmode-support', - 'projects/gettingstarted/jumpstart/theme-management-accelerator/adaptable-components', - 'projects/gettingstarted/jumpstart/theme-management-accelerator/theme-customization', - ], - }, - ], - }, + }, { type: 'category', label: 'Common Tasks', @@ -118,12 +60,7 @@ const sidebars = { 'projects/gettingstarted/common-tasks-configuring-role-based-access-control', 'projects/gettingstarted/common-tasks-using-groups-and-aggregations-queries', 'projects/gettingstarted/common-tasks-create-multiple-records-single-operation', - 'projects/gettingstarted/common-tasks-extending-the-api', - 'projects/gettingstarted/common-tasks-implementing-pagination-api-queries', - 'projects/gettingstarted/common-tasks-using-validating-forms', - 'projects/gettingstarted/common-tasks-leveraging-navigation-events', - 'projects/gettingstarted/common-tasks-building-responsive-applications', - 'projects/gettingstarted/common-tasks-real-time-applications', + 'projects/gettingstarted/common-tasks-extending-the-api', ], }, ], @@ -147,24 +84,13 @@ const sidebars = { 'projects/8basehome/projects/creating-projects', { type: 'category', - label: 'Projects Dashboard Walkthrough', + label: 'Project Dashboard Walkthrough', link: { type: 'doc', id: 'projects/8basehome/projects/projects-dashboard-walkthrough', }, items: [ 'projects/8basehome/projects/projects-backend-ui', - { - type: 'category', - label: 'Frontend', - link: { - type: 'doc', - id: 'projects/8basehome/projects/projects-frontend-ui', - }, - items: [ - 'projects/8basehome/projects/projects-frontend-creation', - ], - }, 'projects/8basehome/projects/projects-team-management', 'projects/8basehome/projects/projects-billing', 'projects/8basehome/projects/projects-settings', @@ -197,7 +123,7 @@ const sidebars = { items: [ { type: 'category', - label: 'Getting Started', + label: 'Backend Overview', link: { type: 'doc', id: 'projects/backend/getting-started-readme', @@ -314,100 +240,134 @@ const sidebars = { }, { type: 'category', - label: '8base Console', + label: 'GraphQL API Overview', link: { type: 'doc', - id: 'projects/backend/8base-console-readme', + id: 'projects/backend/graphql/graphql-api-readme' }, items: [ - 'projects/backend/8base-console-authentication', - 'projects/backend/8base-console-roles-and-permissions', - { - type: 'category', - label: 'Tools', - link: { - type: 'doc', - id: 'projects/backend/8base-console-platform-tools-readme', - }, - items: [ - 'projects/backend/8base-console-platform-tools-api-explorer', + { type: 'category', - label: 'Advanced', + label: 'GraphQL Queries', link: { type: 'doc', - id: 'projects/backend/8base-console-platform-tools-advanced', + id: 'projects/backend/graphql/graphql-api-queries-readme', }, items: [ - 'projects/backend/8base-console-platform-tools-advanced-advanced-introspection', + 'projects/backend/graphql/graphql-api-queries-single-record-query', + 'projects/backend/graphql/graphql-api-queries-record-list-query', + 'projects/backend/graphql/graphql-api-queries-related-data', + // { + // type: 'category', + // label: 'Related Data', + // link: { + // type: 'doc', + // id: 'projects/backend/graphql/graphql-api-queries-related-data', + // }, + // items: [ + // 'projects/backend/graphql/graphql-api-queries-related-record-retrieve-list', + // 'projects/backend/graphql/graphql-api-queries-related-record-query', + // ], + // }, + 'projects/backend/graphql/graphql-api-queries-combining-queries', + 'projects/backend/graphql/graphql-api-queries-combining-arguments', + 'projects/backend/graphql/graphql-api-queries-sort-list-query', + 'projects/backend/graphql/graphql-api-queries-filtered-list-query', + 'projects/backend/graphql/graphql-api-queries-paginated-query-results', + 'projects/backend/graphql/graphql-api-queries-aggregation-query', + 'projects/backend/graphql/graphql-api-grouping-and-aggregations-readme', + 'projects/backend/graphql/graphql-api-geo-fields-readme', ], }, - 'projects/backend/8base-console-platform-tools-users', - 'projects/backend/8base-console-platform-tools-ci-cd', - ], - }, - ], + { + type: 'category', + label: 'GraphQL Mutations', + link: { + type: 'doc', + id: 'projects/backend/graphql/graphql-api-mutations-readme', + }, + items: [ + 'projects/backend/graphql/graphql-api-mutations-single-record-mutations', + 'projects/backend/graphql/graphql-api-mutations-update-by-filter-mutations', + 'projects/backend/graphql/graphql-api-mutations-related-record-mutations', + ], + }, + { + type: 'category', + label: 'GraphQL Subscriptions', + link: { + type: 'doc', + id: 'projects/backend/graphql/graphql-api-subscriptions-readme', + }, + items: [ + 'projects/backend/graphql/graphql-api-subscriptions-simple-record-subscriptions', + 'projects/backend/graphql/graphql-api-subscriptions-complex-record-subscriptions', + ], + }, + 'projects/backend/graphql/graphql-api-variables', + // { + // type: 'category', + // label: 'GraphQL Code Samples', + // link: { + // type: 'doc', + // id: 'projects/backend/graphql/graphql-api-code-samples', + // }, + // items: [ + // 'projects/backend/graphql/graphql-api-subscriptions-client', + // ], + // }, + 'projects/backend/graphql/graphql-api-error-handling', + ], }, + 'projects/backend/8base-console-platform-tools-api-explorer', { type: 'category', - label: 'GraphQL API Overview', + label: 'App Services', link: { type: 'doc', - id: 'projects/backend/8base-console-graphql-api-readme', + id: 'projects/backend/app-services/app-services-index', }, - items: [ + items: [ { type: 'category', - label: 'Queries', + label: 'Roles and Permissions', link: { type: 'doc', - id: 'projects/backend/8base-console-graphql-api-queries-readme', + id: 'projects/backend/app-services/roles-and-permissions', }, items: [ - 'projects/backend/8base-console-graphql-api-queries-single-record-query', - 'projects/backend/8base-console-graphql-api-queries-record-list-query', - 'projects/backend/8base-console-graphql-api-queries-related-record-query', - 'projects/backend/8base-console-graphql-api-queries-sort-list-query', - 'projects/backend/8base-console-graphql-api-queries-combining-queries', - 'projects/backend/8base-console-graphql-api-queries-aggregation-query', - 'projects/backend/8base-console-graphql-api-queries-combining-arguments', - 'projects/backend/8base-console-graphql-api-queries-filtered-list-query', - 'projects/backend/8base-console-graphql-api-queries-paginated-query-results', + // 'projects/backend/app-services/app-services-data-permissions', + // 'projects/backend/app-services/app-services-apps', + 'projects/backend/app-services/administer-users', ], }, { type: 'category', - label: 'Mutations', + label: 'Authentication', link: { type: 'doc', - id: 'projects/backend/8base-console-graphql-api-mutations-readme', + id: 'projects/backend/app-services/authentication-index', }, items: [ - 'projects/backend/8base-console-graphql-api-mutations-single-record-mutations', - 'projects/backend/8base-console-graphql-api-mutations-related-record-mutations', - 'projects/backend/8base-console-graphql-api-mutations-update-by-filter-mutations', + 'projects/backend/app-services/authentication-8base', + 'projects/backend/app-services/authentication-auth0', + 'projects/backend/app-services/authentication-openID', ], - }, - { - type: 'category', - label: 'Subscriptions', - link: { - type: 'doc', - id: 'projects/backend/8base-console-graphql-api-subscriptions-readme', - }, - items: [ - 'projects/backend/8base-console-graphql-api-subscriptions-simple-record-subscriptions', - 'projects/backend/8base-console-graphql-api-subscriptions-complex-record-subscriptions', - 'projects/backend/8base-console-graphql-api-subscriptions-client', - ], - }, - 'projects/backend/8base-console-graphql-api-grouping-and-aggregations-readme', - 'projects/backend/8base-console-graphql-api-geo-fields-readme', - 'projects/backend/8base-console-graphql-api-variables', - 'projects/backend/8base-console-graphql-api-error-handling', + }, ], - }, - + }, + { + type: 'category', + label: 'Continuous Integration and Continuous Deployment (CI/CD)', + link: { + type: 'doc', + id: 'projects/backend/8base-console-platform-tools-ci-cd', + }, + items: [ + + ], + }, // { // type: 'category', // label: 'Plugins and Integrations', @@ -419,15 +379,17 @@ const sidebars = { // // ], // }, - { - type: 'category', - label: 'Local Development Environment', - link: { - type: 'doc', - id: 'projects/backend/development-tools-dev-readme', - }, - items: [ - + + ], + }, + { + type: 'category', + label: 'Advanced', + link: { + type: 'doc', + id: 'projects/backend/8base-console-platform-tools-advanced', + }, + items: [ { type: 'category', label: 'Command Line Interface (CLI)', @@ -443,7 +405,7 @@ const sidebars = { }, { type: 'category', - label: 'SDK', + label: 'JavaScript SDK', link: { type: 'doc', id: 'projects/backend/development-tools-sdk-readme', @@ -455,453 +417,10 @@ const sidebars = { 'projects/backend/development-tools-sdk-filestack-uploader', 'projects/backend/development-tools-sdk-vs-code-plugin', ], - }, - ], - }, + }, + 'projects/backend/8base-console-platform-tools-advanced-advanced-introspection', ], - }, - { - type: 'category', - label: 'Frontend Development', - link: { - type: 'doc', - id: 'projects/frontend/frontend-index', - }, - items: [ - { - type: 'category', - label: 'Getting Started', - link: { - type: 'doc', - id: 'projects/frontend/getting-started-introduction', - }, - items: [ - 'projects/frontend/getting-started-what-is-app-builder', - 'projects/frontend/getting-started-building-fullstack-gotomarket-apps-on-8base', - ], - }, - { - type: 'category', - label: 'Building Frontends App Builder Walkthrough', - link: { - type: 'doc', - id: 'projects/frontend/building-frontends-app-builder-walkthrough-introduction', - }, - items: [ - 'projects/frontend/building-frontends-app-builder-walkthrough-selecting-a-design-theme', - 'projects/frontend/building-frontends-app-builder-walkthrough-managing-app-pages', - 'projects/frontend/building-frontends-app-builder-walkthrough-dragging-and-dropping-components', - 'projects/frontend/building-frontends-app-builder-walkthrough-connecting-to-a-data-source-8base-be-workspace', - 'projects/frontend/building-frontends-app-builder-walkthrough-accessing-frontend-data', - { - type: 'category', - label: 'Data Binding', - link: { - type: 'doc', - id: 'projects/frontend/data-binding', - }, - items: [ - 'projects/frontend/data-binding-example-binding-request-to-table-component', - 'projects/frontend/data-binding-example-binding-custom-entries-to-card-component', - 'projects/frontend/data-binding-example-binding-function-to-looper-component', - 'projects/frontend/data-binding-example-binding-request-to-looper-component', - ], - }, - 'projects/frontend/building-frontends-app-builder-walkthrough-deploying-publishing-an-app', - ], - }, - { - type: 'category', - label: 'App Editor', - link: { - type: 'doc', - id: 'projects/frontend/app-editor-introduction', - }, - items: [ - { - type: 'category', - label: 'Understanding the App Builder Interface', - link: { - type: 'doc', - id: 'projects/frontend/app-editor-understanding-the-app-builder-interface', - }, - items: [ - 'projects/frontend/app-editor-understanding-the-app-builder-interface-editor-header-menu-tools', - 'projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-canvas', - 'projects/frontend/app-editor-understanding-the-app-builder-interface-editor-hidden-canvas', - 'projects/frontend/app-editor-understanding-the-app-builder-interface-editor-components-drawer', - 'projects/frontend/app-editor-understanding-the-app-builder-interface-editor-page-context-menu', - 'projects/frontend/app-editor-understanding-the-app-builder-interface-editor-settings-and-global-shortcuts', - ], - }, - ], - }, - { - type: 'category', - label: 'Custom App Styling', - link: { - type: 'doc', - id: 'projects/frontend/custom-app-styling-introduction', - }, - items: [ - 'projects/frontend/custom-app-styling-understanding-the-app-builder-interface-using-a-css-design-framework', - 'projects/frontend/custom-app-styling-understanding-the-app-builder-interface-configurations-in-the-theme-editor', - 'projects/frontend/custom-app-styling-understanding-the-app-builder-interface-adding-custom-fonts-and-icons-to-your-app', - { - type: 'category', - label: 'Creating a Global App Theme', - link: { - type: 'doc', - id: 'projects/frontend/custom-app-styling-creating-a-global-app-theme-introduction', - }, - items: [ - 'projects/frontend/custom-app-styling-creating-a-global-app-theme-exporting-importing-app-themes', - ], - }, - 'projects/frontend/custom-app-styling-creating-a-global-app-theme-setting-default-styles-on-components', - 'projects/frontend/custom-app-styling-creating-a-global-app-theme-component-styling-settings', - ], - }, - { - type: 'category', - label: 'Responsive Design', - link: { - type: 'doc', - id: 'projects/frontend/responsive-design-in-app-builder-introduction', - }, - items: [ - 'projects/frontend/responsive-design-in-app-builder-managing-media-query-definitions', - 'projects/frontend/responsive-design-in-app-builder-writing-custom-media-query-rules', - { - type: 'category', - label: 'The Viewport', - link: { - type: 'doc', - id: 'projects/frontend/responsive-design-in-app-builder-viewport', - }, - items: [ - 'projects/frontend/responsive-design-in-app-builder-changing-the-viewport', - 'projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-mobile-viewport', - 'projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-tablet-viewport', - 'projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-desktop-viewport', - 'projects/frontend/responsive-design-in-app-builder-changing-the-viewport-setting-a-custom-viewport', - ], - }, - ], - }, - { - type: 'category', - label: 'Application Layouts', - link: { - type: 'doc', - id: 'projects/frontend/application-layouts', - }, - items: [ - 'projects/frontend/application-layouts-creating-and-editing-layouts', - // "projects/frontend/application-layouts-adding-nested-layouts" - ], - }, - { - type: 'category', - label: 'App Navigation', - link: { - type: 'doc', - id: 'projects/frontend/app-navigation-introduction', - }, - items: [ - { - type: 'category', - label: 'App Pages States and Settings', - link: { - type: 'doc', - id: 'projects/frontend/app-navigation-create-and-editing-app-pages', - }, - items: [ - 'projects/frontend/app-navigation-create-and-editing-app-pages-page-url-settings', - 'projects/frontend/app-navigation-create-and-editing-app-pages-access-states-for-routes', - 'projects/frontend/app-navigation-create-and-editing-app-pages-using-url-parameters', - // "projects/frontend/app-navigation-create-and-editing-app-pages-handling-redirects", - // "projects/frontend/app-navigation-create-and-editing-app-pages-using-url-query-parameters", - 'projects/frontend/app-navigation-create-and-editing-app-pages-using-url-fragment-parameters', - 'projects/frontend/app-navigation-create-and-editing-app-pages-adding-logic-to-navigation-events', - 'projects/frontend/app-navigation-create-and-editing-app-pages-using-metadata-stored-on-pages', - ], - }, - 'projects/frontend/app-navigation-404-and-error-pages', - ], - }, - { - type: 'category', - label: 'App Components', - link: { - type: 'doc', - id: 'projects/frontend/app-components-introduction', - }, - items: [ - 'projects/frontend/app-components-customizing-app-builder-components', - 'projects/frontend/app-components-using-component-property-inputs', - 'projects/frontend/app-components-customizing-styling-on-components', - 'projects/frontend/app-components-setting-event-listeners-on-components', - 'projects/frontend/app-components-component-categories', - 'projects/frontend/app-components-component-groups', - { - type: 'category', - label: 'Components', - link: { - type: 'doc', - id: 'projects/frontend/app-components-components', - }, - items: [ - 'projects/frontend/app-components-common-component-properties', - 'projects/frontend/app-components-common-component-style-attributes', - //{ - // type: 'category', - // label: 'Form Components', - // items: [ - // 'projects/frontend/app-components-form-components-overview', - // ], - // }, - { - type: 'category', - label: 'Layout Components', - link: { - type: 'doc', - id: 'projects/frontend/app-components-layout-components', - }, - items: [ - 'projects/frontend/app-components-layout-components-async-content', - 'projects/frontend/app-components-layout-components-card', - 'projects/frontend/app-components-layout-components-container', - 'projects/frontend/app-components-layout-components-footer', - 'projects/frontend/app-components-layout-components-header', - 'projects/frontend/app-components-layout-components-menu', - 'projects/frontend/app-components-layout-components-paper', - 'projects/frontend/app-components-layout-components-popper', - ], - }, - { - type: 'category', - label: 'Control Components', - link: { - type: 'doc', - id: 'projects/frontend/app-components-control-components', - }, - items: [ - 'projects/frontend/app-components-control-components-form-block', - 'projects/frontend/app-components-control-components-autocomplete', - 'projects/frontend/app-components-control-components-button', - 'projects/frontend/app-components-control-components-checkbox', - 'projects/frontend/app-components-control-components-date-picker', - 'projects/frontend/app-components-control-components-field-array', - 'projects/frontend/app-components-control-components-file-picker-8base', - 'projects/frontend/app-components-control-components-file-picker-button-8base', - 'projects/frontend/app-components-control-components-file-dropzone-8base', - 'projects/frontend/app-components-control-components-file-upload', - 'projects/frontend/app-components-control-components-file-picker-button', - 'projects/frontend/app-components-control-components-file-dropzone', - 'projects/frontend/app-components-control-components-multiselect', - 'projects/frontend/app-components-control-components-radio', - 'projects/frontend/app-components-control-components-radio-group', - 'projects/frontend/app-components-control-components-select', - 'projects/frontend/app-components-control-components-slider', - 'projects/frontend/app-components-control-components-switch', - 'projects/frontend/app-components-control-components-text-field', - 'projects/frontend/app-components-control-components-time-picker', - 'projects/frontend/app-components-control-components-toggle-button', - 'projects/frontend/app-components-control-components-toggle-button-group', - ], - }, - { - type: 'category', - label: 'Data Components', - link: { - type: 'doc', - id: 'projects/frontend/app-components-data-components', - }, - items: [ - 'projects/frontend/app-components-data-components-looper', - ], - }, - { - type: 'category', - label: 'Other Components', - link: { - type: 'doc', - id: 'projects/frontend/app-components-other-components', - }, - items: [ - 'projects/frontend/app-components-other-components-accordion', - 'projects/frontend/app-components-other-components-alert', - 'projects/frontend/app-components-other-components-avatar', - 'projects/frontend/app-components-other-components-badge', - 'projects/frontend/app-components-other-components-breadcrumbs', - 'projects/frontend/app-components-other-components-chip', - 'projects/frontend/app-components-other-components-divider', - 'projects/frontend/app-components-other-components-heading', - 'projects/frontend/app-components-other-components-icon', - 'projects/frontend/app-components-other-components-icon-button', - 'projects/frontend/app-components-other-components-image', - 'projects/frontend/app-components-other-components-link', - 'projects/frontend/app-components-other-components-list', - 'projects/frontend/app-components-other-components-list-item', - 'projects/frontend/app-components-other-components-nav-list-item', - 'projects/frontend/app-components-other-components-table', - 'projects/frontend/app-components-other-components-text', - 'projects/frontend/app-components-other-components-tooltip', - 'projects/frontend/app-components-other-components-typography', - ], - }, - ], - }, - ], - }, - { - type: 'category', - label: 'Connecting to Data Sources', - link: { - type: 'doc', - id: 'projects/frontend/connecting-to-data-sources-introduction', - }, - items: [ - 'projects/frontend/connecting-to-data-sources-introduction', - { - type: 'category', - label: 'Creating API Connections', - link: { - type: 'doc', - id: 'projects/frontend/connecting-to-data-sources-creating-api-connections', - }, - items: [ - 'projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-an-8base-be-workspace', - 'projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-graphql-api', - 'projects/frontend/connecting-to-data-sources-creating-api-connections-connecting-to-a-rest-api', - ], - }, - { - type: 'category', - label: 'How to make API Calls (Requests)', - link: { - type: 'doc', - id: 'projects/frontend/connecting-to-data-sources-how-to-make-api-calls', - }, - items: [ - 'projects/frontend/connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-graphql-query-mutation', - 'projects/frontend/connecting-to-data-sources-how-to-make-api-calls-how-to-execute-a-rest-api-call', - ], - }, - 'projects/frontend/connecting-to-data-sources-send-form-data-with-an-api-request', - ], - }, - { - type: 'category', - label: 'Data in the Frontend', - link: { - type: 'doc', - id: 'projects/frontend/data-in-the-frontend-introduction', - }, - items: [ - 'projects/frontend/data-in-the-frontend-understanding-local-vs-global-state-objects', - { - type: 'category', - label: 'Data scopes for App Builder Elements', - link: { - type: 'doc', - id: 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements', - }, - items: [ - 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-layouts', - 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-views', - 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-requests', - 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-resource', - 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-functions', - 'projects/frontend/data-in-the-frontend-data-scopes-for-app-builder-elements-components', - // "projects/frontend/data-in-the-frontend-(state)-data-scopes-for-app-builder-elements-theme" - ], - }, - 'projects/frontend/data-in-the-frontend-getting-and-setting-state-data', - 'projects/frontend/data-in-the-frontend-adding-custom-state-data-entries', - ], - }, - { - type: 'category', - label: 'Custom Frontend Logic', - link: { - type: 'doc', - id: 'projects/frontend/custom-frontend-logic-introduction', - }, - items: [ - { - type: 'category', - label: 'Creating custom frontend functions', - link: { - type: 'doc', - id: 'projects/frontend/custom-frontend-logic-creating-custom-frontend-functions-readme', - }, - items: [ - 'projects/frontend/custom-frontend-logic-creating-custom-frontend-functions', - ], - }, - { - type: 'category', - label: 'Calling frontend functions', - link: { - type: 'doc', - id: 'projects/frontend/custom-frontend-logic-calling-frontend-functions', - }, - items: [ - 'projects/frontend/custom-frontend-logic-calling-a-function-from-an-event', - 'projects/frontend/custom-frontend-logic-calling-a-function-from-a-callback', - 'projects/frontend/custom-frontend-logic-calling-a-function-from-a-function', - ], - }, - 'projects/frontend/custom-frontend-logic-using-installed-js-libraries-in-scripts', - ], - }, - { - type: 'category', - label: 'Triggering Events in the App', - link: { - type: 'doc', - id: 'projects/frontend/triggering-events-in-the-app-introduction', - }, - items: [ - 'projects/frontend/triggering-events-in-the-app-specifying-events-in-editor', - 'projects/frontend/triggering-events-in-the-app-managing-events-on-components-and-requests', - 'projects/frontend/triggering-events-in-the-app-triggering-events-in-custom-frontend-logic', - ], - }, - { - type: 'category', - label: 'Images and Files in App Builder', - link: { - type: 'doc', - id: 'projects/frontend/images-and-files-in-app-builder-introduction', - }, - items: [ - 'projects/frontend/images-and-files-in-app-builder-uploading-an-image-or-file', - 'projects/frontend/images-and-files-in-app-builder-displaying-an-image-or-file-on-a-page', - // "projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-files", - // "projects/frontend/images-and-files-in-app-builder-available-attributes-on-uploaded-images" - ], - }, - { - type: 'category', - label: 'Publishing Apps', - link: { - type: 'doc', - id: 'projects/frontend/publishing-apps-introduction', - }, - items: [ - 'projects/frontend/publishing-apps-making-an-app-public', - 'projects/frontend/publishing-apps-seeing-deployment-history', - // "projects/frontend/publishing-apps-deployment-settings", - // "projects/frontend/publishing-apps-cname-records-for-custom-domain", - // "projects/frontend/publishing-apps-adding-ssl-to-custom-domains", - // "projects/frontend/publishing-apps-publishing-apps-to-a-cdn" - ], - }, - ], - }, + }, ], };