|
| 1 | +--- |
| 2 | +slug: /flutterflow-ui/my-organization |
| 3 | +title: My Organization |
| 4 | +tags: [My Organization, FlutterFlow, UI, Design] |
| 5 | +keywords: [Accounts, Billing, My Organization, Team Code, Team Media Assets, Team Design Library, Team API Library, Adding Domains ] |
| 6 | +sidebar_position: 5 |
| 7 | +--- |
| 8 | +import Tabs from '@theme/Tabs'; |
| 9 | +import TabItem from '@theme/TabItem'; |
| 10 | + |
| 11 | +# My Organization |
| 12 | +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. |
| 13 | + |
| 14 | +With the ability to easily collaborate and share resources, you can create amazing apps faster than ever before. |
| 15 | + |
| 16 | +:::info |
| 17 | +Learn [**how to create a team**](../../accounts-billing/subscriptions/flutterflow-for-teams.md) to get started. |
| 18 | +::: |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +<figure> |
| 23 | +  |
| 24 | + <figcaption class="centered-caption">Sharing resources between users and across their projects</figcaption> |
| 25 | +</figure> |
| 26 | + |
| 27 | +## Team code |
| 28 | + |
| 29 | +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.md), and [Actions](../../resources/control-flow/functions/action-flow-editor.md) that will be shared between your team members and their projects. |
| 30 | + |
| 31 | +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. |
| 32 | + |
| 33 | +Here's how you can share the custom code: |
| 34 | + |
| 35 | +1. Navigate to **My Organization > Team Code**. |
| 36 | +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). |
| 37 | + |
| 38 | +<div style={{ |
| 39 | + position: 'relative', |
| 40 | + paddingBottom: 'calc(45.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 41 | + height: 0, |
| 42 | + width: '100%'}}> |
| 43 | + <iframe |
| 44 | + src="https://demo.arcade.software/ZBQK4f3KhcR0wA5vvJ7f?embed&show_copy_link=true" |
| 45 | + title="" |
| 46 | + style={{ |
| 47 | + position: 'absolute', |
| 48 | + top: 0, |
| 49 | + left: 0, |
| 50 | + width: '100%', |
| 51 | + height: '100%', |
| 52 | + colorScheme: 'light' |
| 53 | + }} |
| 54 | + frameborder="0" |
| 55 | + loading="lazy" |
| 56 | + webkitAllowFullScreen |
| 57 | + mozAllowFullScreen |
| 58 | + allowFullScreen |
| 59 | + allow="clipboard-write"> |
| 60 | + </iframe> |
| 61 | +</div> |
| 62 | +<p></p> |
| 63 | + |
| 64 | +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. |
| 65 | + 1. Click **+ Add** and select from the *Team Function*, *Team Widget*, and *Team Action*. |
| 66 | + 2. A pop will open displaying the list of custom code names, click on it to add it to your project. |
| 67 | + |
| 68 | +<div style={{ |
| 69 | + position: 'relative', |
| 70 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 71 | + height: 0, |
| 72 | + width: '100%'}}> |
| 73 | + <iframe |
| 74 | + src="https://demo.arcade.software/TzSyFkSwGM5A4PZDCwO6?embed&show_copy_link=true" |
| 75 | + title="" |
| 76 | + style={{ |
| 77 | + position: 'absolute', |
| 78 | + top: 0, |
| 79 | + left: 0, |
| 80 | + width: '100%', |
| 81 | + height: '100%', |
| 82 | + colorScheme: 'light' |
| 83 | + }} |
| 84 | + frameborder="0" |
| 85 | + loading="lazy" |
| 86 | + webkitAllowFullScreen |
| 87 | + mozAllowFullScreen |
| 88 | + allowFullScreen |
| 89 | + allow="clipboard-write"> |
| 90 | + </iframe> |
| 91 | +</div> |
| 92 | +<p></p> |
| 93 | + |
| 94 | +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. |
| 95 | + |
| 96 | +<div style={{ |
| 97 | + position: 'relative', |
| 98 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 99 | + height: 0, |
| 100 | + width: '100%'}}> |
| 101 | + <iframe |
| 102 | + src="https://demo.arcade.software/Yk1uQVokPuizdWUU4UTd?embed&show_copy_link=true" |
| 103 | + title="" |
| 104 | + style={{ |
| 105 | + position: 'absolute', |
| 106 | + top: 0, |
| 107 | + left: 0, |
| 108 | + width: '100%', |
| 109 | + height: '100%', |
| 110 | + colorScheme: 'light' |
| 111 | + }} |
| 112 | + frameborder="0" |
| 113 | + loading="lazy" |
| 114 | + webkitAllowFullScreen |
| 115 | + mozAllowFullScreen |
| 116 | + allowFullScreen |
| 117 | + allow="clipboard-write"> |
| 118 | + </iframe> |
| 119 | +</div> |
| 120 | +<p></p> |
| 121 | + |
| 122 | +## Team media assets |
| 123 | + |
| 124 | +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. |
| 125 | + |
| 126 | +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. |
| 127 | + |
| 128 | +Here's how you can share the media assets: |
| 129 | + |
| 130 | +1. Navigate to **My Organization > Team Media Assets** and click **Upload Media**. |
| 131 | +2. The uploaded media will be accessible via **Project / Media Assets** from the **Navigation Menu**. |
| 132 | +:::info |
| 133 | +The shared media assets will have the 'teams' icon at the bottom right side. |
| 134 | +::: |
| 135 | + |
| 136 | +<Tabs> |
| 137 | +<TabItem value="1" label="Upload sharable media assets" default> |
| 138 | + |
| 139 | +</TabItem> |
| 140 | +<TabItem value="2" label="Access media assets"> |
| 141 | + |
| 142 | +</TabItem> |
| 143 | +</Tabs> |
| 144 | + |
| 145 | +## Team design library |
| 146 | + |
| 147 | +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. |
| 148 | + |
| 149 | +A design system includes colors, typography, fonts, icons, app assets, a nav bar, and an app bar, as well as pre-designed UI components such as buttons and text widgets. |
| 150 | + |
| 151 | +Here's how you can share the design library: |
| 152 | + |
| 153 | +1. Navigate to **My Organization > Team Design Library** and click **+ Create New**. |
| 154 | +2. Provide a name to the **Design System Project**. |
| 155 | +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). |
| 156 | + |
| 157 | +<div style={{ |
| 158 | + position: 'relative', |
| 159 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 160 | + height: 0, |
| 161 | + width: '100%'}}> |
| 162 | + <iframe |
| 163 | + src="https://demo.arcade.software/wKuA4fKRkxiNXCkESJJt?embed&show_copy_link=true" |
| 164 | + title="" |
| 165 | + style={{ |
| 166 | + position: 'absolute', |
| 167 | + top: 0, |
| 168 | + left: 0, |
| 169 | + width: '100%', |
| 170 | + height: '100%', |
| 171 | + colorScheme: 'light' |
| 172 | + }} |
| 173 | + frameborder="0" |
| 174 | + loading="lazy" |
| 175 | + webkitAllowFullScreen |
| 176 | + mozAllowFullScreen |
| 177 | + allowFullScreen |
| 178 | + allow="clipboard-write"> |
| 179 | + </iframe> |
| 180 | +</div> |
| 181 | +<p></p> |
| 182 | + |
| 183 | +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**. |
| 184 | +5. Click on the **No Design System Selected**. |
| 185 | +6. A pop will open displaying the list of the shared design systems, click on it to add it to your project. |
| 186 | + |
| 187 | +<div style={{ |
| 188 | + position: 'relative', |
| 189 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 190 | + height: 0, |
| 191 | + width: '100%'}}> |
| 192 | + <iframe |
| 193 | + src="https://demo.arcade.software/JvWQRp2yZHIAJqHu4Lfm?embed&show_copy_link=true" |
| 194 | + title="" |
| 195 | + style={{ |
| 196 | + position: 'absolute', |
| 197 | + top: 0, |
| 198 | + left: 0, |
| 199 | + width: '100%', |
| 200 | + height: '100%', |
| 201 | + colorScheme: 'light' |
| 202 | + }} |
| 203 | + frameborder="0" |
| 204 | + loading="lazy" |
| 205 | + webkitAllowFullScreen |
| 206 | + mozAllowFullScreen |
| 207 | + allowFullScreen |
| 208 | + allow="clipboard-write"> |
| 209 | + </iframe> |
| 210 | +</div> |
| 211 | +<p></p> |
| 212 | + |
| 213 | +## Team API library |
| 214 | + |
| 215 | +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. |
| 216 | + |
| 217 | +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. |
| 218 | + |
| 219 | +Here's how you can share APIs: |
| 220 | + |
| 221 | +1. Navigate to **My Organization > Team API Library**. |
| 222 | +2. Click on the **+** button and select [**Create API Call**](../../resources/control-flow/backend-logic/api/create-test-api-calls.md). |
| 223 | +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. |
| 224 | + 1. Click **+** and select **Use Team API**. |
| 225 | + 2. A pop will open displaying the list of shared APIs, click on it to add it to your project. |
| 226 | + |
| 227 | +<div style={{ |
| 228 | + position: 'relative', |
| 229 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 230 | + height: 0, |
| 231 | + width: '100%'}}> |
| 232 | + <iframe |
| 233 | + src="https://demo.arcade.software/2ALaTBUoWnyeZHAqi5wR?embed&show_copy_link=true" |
| 234 | + title="" |
| 235 | + style={{ |
| 236 | + position: 'absolute', |
| 237 | + top: 0, |
| 238 | + left: 0, |
| 239 | + width: '100%', |
| 240 | + height: '100%', |
| 241 | + colorScheme: 'light' |
| 242 | + }} |
| 243 | + frameborder="0" |
| 244 | + loading="lazy" |
| 245 | + webkitAllowFullScreen |
| 246 | + mozAllowFullScreen |
| 247 | + allowFullScreen |
| 248 | + allow="clipboard-write"> |
| 249 | + </iframe> |
| 250 | +</div> |
| 251 | +<p></p> |
| 252 | + |
| 253 | +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. |
| 254 | + |
| 255 | +<div style={{ |
| 256 | + position: 'relative', |
| 257 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 258 | + height: 0, |
| 259 | + width: '100%'}}> |
| 260 | + <iframe |
| 261 | + src="https://demo.arcade.software/mT2NXzQoIYcsRP0XBVdG?embed&show_copy_link=true" |
| 262 | + title="" |
| 263 | + style={{ |
| 264 | + position: 'absolute', |
| 265 | + top: 0, |
| 266 | + left: 0, |
| 267 | + width: '100%', |
| 268 | + height: '100%', |
| 269 | + colorScheme: 'light' |
| 270 | + }} |
| 271 | + frameborder="0" |
| 272 | + loading="lazy" |
| 273 | + webkitAllowFullScreen |
| 274 | + mozAllowFullScreen |
| 275 | + allowFullScreen |
| 276 | + allow="clipboard-write"> |
| 277 | + </iframe> |
| 278 | +</div> |
| 279 | +<p></p> |
| 280 | + |
| 281 | +## Add domains |
| 282 | + |
| 283 | +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. |
| 284 | + |
| 285 | +To do so, click on **Add Domains** (under My Organization). |
| 286 | + |
| 287 | + |
0 commit comments