Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/intro/ff-ui/dashboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ You can also find links to various resources to assist in building apps with Flu

- **Notifications Center**: The notification center simplify how you manage comments and invites across various projects. It conveniently centralizes all your project communications. And when you're ready to address a comment, tap on it and you'll be taken directly to the relevant section of the project.

- **My organization** From the [**My Organization tab**](my-organization.md), you can share custom code, assets, design systems, and APIs between your team users and across projects.
- **My Teams**: From the [**My Teams tab**](my-organization.md), you can share custom code, assets, design systems, and APIs between your team users and across projects.

- **Marketplace**: Enhance your FlutterFlow app effortlessly with the [**FlutterFlow Marketplace**](../../marketplace/index.md); access pre-built components and templates created by other users for seamless integration of new functionalities.

Expand All @@ -83,4 +83,3 @@ You can also find links to various resources to assist in building apps with Flu
- **Plan info**: See information about the current plan and eventually upgrade to access additional features.

- **Logout**: Safely log out from your FlutterFlow account.

Binary file added docs/intro/ff-ui/imgs/access-media-assets.avif
Binary file not shown.
Binary file removed docs/intro/ff-ui/imgs/access-media-assets.png
Binary file not shown.
Binary file modified docs/intro/ff-ui/imgs/add-custom-domain.avif
Binary file not shown.
Binary file added docs/intro/ff-ui/imgs/upload-sharable-media.avif
Binary file not shown.
Binary file removed docs/intro/ff-ui/imgs/upload-sharable-media.png
Binary file not shown.
244 changes: 38 additions & 206 deletions docs/intro/ff-ui/my-organization.md
Original file line number Diff line number Diff line change
@@ -1,172 +1,69 @@
---
slug: /flutterflow-ui/my-organization
title: My Organization
tags: [My Organization, FlutterFlow, UI, Design]
keywords: [Accounts, Billing, My Organization, Team Code, Team Media Assets, Team Design Library, Team API Library, Adding Domains ]
slug: /flutterflow-ui/my-teams
title: My Teams
tags: [My Teams, FlutterFlow, UI, Design]
keywords: [Accounts, Billing, My Teams, Team Code, Team Media Assets, Team Design Library, Team API Library, Adding Domains]
sidebar_position: 5
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# My Organization
From here, you can manage billing for your team, edit projects simultaneously, and share code, design systems, APIs, and assets. This makes collaboration between team members much easier and helps to keep everyone on the same page. Even if you don't have team members, you can still benefit from this feature by using it to share resources between your own projects, keeping your development process organized and efficient.
# My Teams
On the My Teams page, you can manage billing for your team, edit projects simultaneously, and share code, design systems, APIs, and assets. This makes collaboration between team members much easier and helps keep everyone on the same page. Even if you don't have team members, you can still use this page to share resources between your own projects and keep your development process organized.

With the ability to easily collaborate and share resources, you can create amazing apps faster than ever before.
By sharing resources from one place, teams can build more consistently across projects.



<figure>
![sharing-resources.png](imgs/sharing-resources.avif)
<figcaption class="centered-caption">Sharing resources between users and across their projects</figcaption>
</figure>

## Team code

## Team Code

:::warning
**Team Code Libraries are now deprecated**. Please use the new [**Libraries**](../../resources/projects/libraries.md) to share and reuse projects across multiple projects.
**Team Code Libraries are deprecated**. Please use the new [**Libraries**](../../resources/projects/libraries.md) to share and reuse projects across multiple projects.
:::

Imagine you are working on multiple apps. As the project progresses, you realize that some of the custom code can be used across multiple apps. With *Team Code*, you can create [Custom Functions](../../ff-concepts/adding-customization/custom-functions.md), [Widgets](../../resources/ui/widgets/composing-widgets/rows-column-stack.md), and [Actions](../../resources/control-flow/functions/action-flow-editor.md) that will be shared between your team members and their projects.
## Team Media Assets

This helps you reduce building time, effort, and costs by allowing members to reuse existing code. Furthermore, shared code is easier to maintain as changes only need to be made in one place.
Your team might be working on multiple projects that use the same icons, images, audio files, and other graphic resources. If each project has its own assets, the team has to upload the same resources multiple times.

Here's how you can share the custom code:
However, if the team shares an asset library across projects, they can save time, increase productivity, and ensure design consistency. If an asset needs to be updated, the team can update it in one place, and the changes will reflect across all projects.

1. Navigate to **My Organization > Team Code**.
2. Click **+ Add** and select what you want to create and share. See how to create [*Custom Function*](../../ff-concepts/adding-customization/custom-functions.md), [*Custom Widget*](../../ff-concepts/adding-customization/custom-widgets.md), and [Custom Action](../../ff-concepts/adding-customization/custom-actions.md).

<div style={{
position: 'relative',
paddingBottom: 'calc(45.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/ZBQK4f3KhcR0wA5vvJ7f?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>
To share team media assets:

3. To use the shared custom code, open the project in which you want to use the code and click on **Custom Functions** from the Navigation Menu.
1. Click **+ Add** and select from the *Team Function*, *Team Widget*, and *Team Action*.
2. A pop will open displaying the list of custom code names, click on it to add it to your project.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/TzSyFkSwGM5A4PZDCwO6?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

4. You can't edit the shared custom code directly in your project. To do so, you can duplicate it and modify it as per your requirement.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/Yk1uQVokPuizdWUU4UTd?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

## Team media assets

Your team might be working on multiple projects simultaneously, and they may require the same icons, images, audio files, and other graphic resources for each project. If each project has its own set of assets, the team will have to upload the same resources multiple times.

However, if the team shares their assets library between their projects, they can save time, increase productivity, and ensure consistency in design. Moreover, if any changes need to be made to an asset, the team can update it in one place, and the changes will reflect across all projects.

Here's how you can share the media assets:

1. Navigate to **My Organization > Team Media Assets** and click **Upload Media**.
2. The uploaded media will be accessible via **Project / Media Assets** from the **Navigation Menu**.
:::info
The shared media assets will have the 'teams' icon at the bottom right side.
:::
1. Go to **My Teams**, select your team, and click **Upload Media**.
2. Media assets shared with the team appear in the Media Assets tab of the Navigation Menu. You can then select and use these assets directly from the asset picker in the Properties Panel.

<Tabs>
<TabItem value="1" label="Upload sharable media assets" default>
![upload-sharable-media](imgs/upload-sharable-media.png)
<TabItem value="1" label="Upload shareable media assets" default>
![upload-sharable-media](imgs/upload-sharable-media.avif)
</TabItem>
<TabItem value="2" label="Access media assets">
![access-media-assets](imgs/access-media-assets.png)
![access-media-assets](imgs/access-media-assets.avif)
</TabItem>
</Tabs>

## Team design library
## Team Design Library

A company may have a website, a mobile app, and a desktop app, each with its own user interface and user experience. In such a case, rather than creating the same UI configuration for each project, creating a shared design system can help speed up the work and ensure consistency across all projects.
A company may have a website, a mobile app, and a desktop app, each with its own user interface and user experience. Instead of recreating the same design settings for each project, you can create a shared design system to speed up the work and keep designs consistent across projects.

A design system includes colors, typography, fonts, icons, app assets, a nav bar, and an app bar.
A design system includes colors, typography, fonts, icons, app assets, a Nav Bar, and an App Bar.

:::tip
To store pre-designed UI components, we highly recommend using [**Libraries**](../../resources/projects/libraries.md) for easy reuse across projects.
To store pre-designed UI components, we recommend using [**Libraries**](../../resources/projects/libraries.md) for easy reuse across projects.
:::

Here's how you can share the design library:

1. Navigate to **My Organization > Team Design Library** and click **+ Create New**.
2. Provide a name to the **Design System Project**.
3. A new project will open where you can configure the Theme, [NavBar](../../resources/ui/pages/page-elements.md#nav-bar) & [AppBar](../../resources/ui/pages/page-elements.md#appbar), and [App Assets](../../resources/projects/settings/general-settings.md#app-assets).
1. Navigate to **My Teams > Team Design Library** and click **+ Create New**.
2. Enter a name for the **Design System Project**.
3. A new project will open where you can configure the Theme, [Nav Bar](../../resources/ui/pages/page-elements.md#nav-bar), [App Bar](../../resources/ui/pages/page-elements.md#appbar), and [App Assets](../../resources/projects/settings/general-settings.md#app-assets).

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/wKuA4fKRkxiNXCkESJJt?embed&show_copy_link=true"
title=""
src="https://demo.arcade.software/Dammx5Es92gc1hbdU31p?embed&show_copy_link=true"
title="Create Team Design Library"
style={{
position: 'absolute',
top: 0,
Expand All @@ -185,18 +82,18 @@ Here's how you can share the design library:
</div>
<p></p>

4. To use the shared design library, open the project in which you want to use the design system and navigate to **Theme Settings** (navigation menu) **> Design System**.
5. Click on the **No Design System Selected**.
6. A pop will open displaying the list of the shared design systems, click on it to add it to your project.
4. To use the shared design library, open the project where you want to use the design system and navigate to **Theme Settings** (navigation menu) **> Design System**.
5. Click **No Design System Selected**.
6. A popup opens displaying the list of shared design systems. Select one to add it to your project.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/JvWQRp2yZHIAJqHu4Lfm?embed&show_copy_link=true"
title=""
src="https://demo.arcade.software/lIKiqtfucQxC9HLLKNTS?embed&show_copy_link=true"
title="Use Team Design Library"
style={{
position: 'absolute',
top: 0,
Expand All @@ -215,80 +112,15 @@ Here's how you can share the design library:
</div>
<p></p>

## Team API library
## Team API Library
:::warning
**Team API Libraries are now deprecated**. Please use the new [**Libraries**](../../resources/projects/libraries.md) to share and reuse projects across multiple projects.
**Team API Libraries are deprecated**. Please use the new [**Libraries**](../../resources/projects/libraries.md) to share and reuse projects across multiple projects.
:::
Imagine a company that has multiple mobile apps for different purposes, such as a shopping app, a loyalty app, and a delivery app. All these apps require similar functionalities, such as user authentication, product information, and order management. However, each app is developed by a different team.

To ensure consistency and efficiency across all the apps, the company decides to create a centralized API that can be used and modified as per the team's requirements. Sharing API calls also allows for easier testing and debugging, as any issues can be traced back to a single source.

Here's how you can share APIs:

1. Navigate to **My Organization > Team API Library**.
2. Click on the **+** button and select [**Create API Call**](../../resources/control-flow/backend-logic/api/create-test-api-calls.md).
3. To use the shared API, open the project in which you want to use the API and click on **API Calls** from the Navigation Menu.
1. Click **+** and select **Use Team API**.
2. A pop will open displaying the list of shared APIs, click on it to add it to your project.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/2ALaTBUoWnyeZHAqi5wR?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

4. You can't edit the shared APIs directly in your project. To do so, you can duplicate it and modify it as per your requirement.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/mT2NXzQoIYcsRP0XBVdG?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

## Add domains
## Add Domains

We allow you to add more custom domains and share them with all team members. This makes it simple to connect domains to the right projects and collaborate seamlessly.
You can add custom domains and share them with all team members. This makes it simple to connect domains to the right projects and collaborate seamlessly.

To do so, click on **Add Domains** (under My Organization).
To add a domain, click **Add Domains** under **My Teams**.

![Add custom domain](imgs/add-custom-domain.avif)
![Add custom domain](imgs/add-custom-domain.avif)
16 changes: 13 additions & 3 deletions firebase.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,17 @@
},
{
"source": "/getting-started/dashboard/my-organization",
"destination": "/flutterflow-ui/my-organization",
"destination": "/flutterflow-ui/my-teams",
"type": 301
},
{
"source": "/flutterflow-ui/my-organization",
"destination": "/flutterflow-ui/my-teams",
"type": 301
},
{
"source": "/flutterflow-ui/my-organization/",
"destination": "/flutterflow-ui/my-teams",
"type": 301
},
{
Expand Down Expand Up @@ -2215,7 +2225,7 @@
},
{
"source": "/settings-and-integrations/project-setup/team",
"destination": "/flutterflow-ui/my-organization/",
"destination": "/flutterflow-ui/my-teams",
"type": 301
},
{
Expand Down Expand Up @@ -2460,4 +2470,4 @@
}
]
}
}
}
Loading