Skip to content

Commit e466a5a

Browse files
johnbhiggins7johnbhiggins7
committed
added image and arcades to collaborate page
1 parent 4629058 commit e466a5a

File tree

5 files changed

+100
-16
lines changed

5 files changed

+100
-16
lines changed

‎docs/understanding-the-flutterflow-ui/projects/how-to-collaborate-on-projects.md

Lines changed: 100 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,67 +11,151 @@ FlutterFlow allows for multiple ways to collaborate on a project as well as the
1111
You can also invite users to your project who are not part of your organization. For instance, you might want to share your work with clients, stakeholders, or team members of the client.
1212

1313
When you invite users to your project, you have the flexibility to assign them different roles depending on their level of involvement. For example, you can grant editing privileges to collaborators who are actively working on the project while assigning read-only access who need to view the progress. Alternatively, you can also make them the owner of the project, giving them full control.
14-
<div class="alert alert--info" role="alert">
15-
<h4>Notes</h4>
14+
:::info
1615
- When you add a user, the default role assigned is the *Editor* role.
1716
- Users with read-only access will only be able to access that specific project and won't be able to access any shared *Teams* libraries (e.g., custom code, design system).
1817
- Read-only users added to *Teams*/*Organization* will not count against your *Teams* seat count.
1918
- You must verify your email before inviting users.
20-
</div>
19+
:::
2120

2221
### How to Invite Users
2322

23+
<div style={{
24+
position: 'relative',
25+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
26+
height: 0,
27+
width: '100%'
28+
}}>
29+
<iframe
30+
src="https://demo.arcade.software/9XkpLuC3tpiFFapWi7ao?embed&show_copy_link=true"
31+
title="Sharing a Project with a User"
32+
style={{
33+
position: 'absolute',
34+
top: 0,
35+
left: 0,
36+
width: '100%',
37+
height: '100%',
38+
colorScheme: 'light',
39+
}}
40+
frameborder="0"
41+
loading="lazy"
42+
webkitAllowFullScreen
43+
mozAllowFullScreen
44+
allowFullScreen
45+
allow="clipboard-write">
46+
</iframe>
47+
</div>
48+
2449
1. Navigate to **Settings & Integrations** (from the left *Navigation Menu*) **> Project Setup > Collaboration > Invite Users**.
2550
2. Click on the **Invite User**. This will open a popup to enter user's email.
2651
3. Input their **email address** and select **Invite**.
2752
4. If a user isn't already a FlutterFlow user, we will send them an invite email. Their status will be shown as **Pending** until they create an account.
2853
5. To provide read-only access, tick the **Read Only** checkbox.
2954

30-
<div class="alert alert--info" role="alert">
31-
<h4>Note</h4>
55+
:::info
3256
FlutterFlow subscriptions are seat based. A user added to your project will only have access to the features of their account plan.
33-
</div>
57+
:::
3458

3559
## Branching Permissions
3660
The owner of a project can manage permissions related to branching. Owners can control two types of branching permissions:
3761

3862
- Editing Permissions: Determines who is allowed to edit branching permissions.
3963
- Merging into Main: Specifies who is allowed to merge branches into the main branch.
4064

65+
<div style={{
66+
position: 'relative',
67+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Correctly maintaining the aspect ratio with additional padding
68+
height: 0,
69+
width: '100%'
70+
}}>
71+
<iframe
72+
src="https://demo.arcade.software/P5MgPJuBBeaIm7dfEjqI?embed&show_copy_link=true"
73+
title="fghjkl - FlutterFlow"
74+
style={{
75+
position: 'absolute',
76+
top: 0,
77+
left: 0,
78+
width: '100%',
79+
height: '100%',
80+
colorScheme: 'light'
81+
}}
82+
frameBorder="0"
83+
loading="lazy"
84+
webkitAllowFullScreen
85+
mozAllowFullScreen
86+
allowFullScreen
87+
allow="clipboard-write">
88+
</iframe>
89+
</div>
90+
4191
## Sharing a Project with an Organization
4292
To share a project with all team members in your organization, enable the "Share with my organization" option.
4393

94+
![Share Project With Organization](../../../static/img/share-project-with-organization.avif)
95+
4496
## Real-Time Collaboration
4597
Real-Time Collaboration is a powerful feature that allows multiple builders to work together on the same project or, rather same page and design system simultaneously. With this, all builders can see the changes being made to the page as they happen and can also make their own changes to the page without interfering with the work of others.
4698

99+
47100
This increases efficiency and productivity, as multiple builders can work on various aspects of the project or together on the same page at the same time.
48101

49102
To enable real-time collaboration, navigate to Settings & Integrations (from the left Navigation Menu) > Project Setup > Collaboration > click Enable Updated Collaboration.
50103

104+
![Realtime Collaboration Setup](../../../static/img/realtime-collaboration-setup.png)
105+
51106
Now when multiple builders are on the same page, it looks like this:
52107

108+
![Realtime Collaboration](../../../static/img/real-time-collaboration.gif)
109+
53110
To disable this feature anytime, click the Disable Updated Collaboration button.
54111

55-
<div class="alert alert--info" role="alert">
56-
<h4>Notes</h4>
112+
:::caution
57113
- This feature is still in Beta, and unexpected issues may occur. Ensure you regularly create project versions as a backup.
58-
114+
:::
115+
:::info
59116
- Real-Time collaboration is a feature of our Teams and Enterprise plans.
60-
</div>
61-
117+
:::
62118
## Transferring Project
63-
<div class="alert alert--danger" role="alert">
64-
<h4>Caution</h4>
119+
:::danger
65120
This step can not be undone. If you want to regain project ownership, the new project owner will need to transfer ownership back to you.
121+
:::
122+
123+
<div style={{
124+
position: 'relative',
125+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Maintain aspect ratio plus extra padding
126+
height: 0,
127+
width: '100%'
128+
}}>
129+
<iframe
130+
src="https://demo.arcade.software/hUnKMJ7eqD81SRHkxEmt?embed&show_copy_link=true"
131+
title="Transferring Project"
132+
style={{
133+
position: 'absolute',
134+
top: 0,
135+
left: 0,
136+
width: '100%',
137+
height: '100%',
138+
colorScheme: 'light'
139+
}}
140+
frameBorder="0"
141+
loading="lazy"
142+
webkitAllowFullScreen
143+
mozAllowFullScreen
144+
allowFullScreen
145+
allow="clipboard-write">
146+
</iframe>
66147
</div>
148+
149+
67150
1. Navigate to **Settings & Integrations** (from the left Navigation Menu) **> Project Setup > Collaboration > Invite Users.**
68151
2. Click on the **Status** (e.g., Active) of the person you want to transfer project ownership to. You can only transfer ownership to someone with a status of **Active**.
69152
3. A popup will appear, and select **Yes**.
70153

71154
## Project Activity
72155
You can see a running history of changes made while building that helps you track progress and stay up to date on project changes. This feature allows team members to see all the updates made to a project in real-time, enabling them to understand how the project is evolving and collaborate more efficiently.
73156

74-
<div class="alert alert--info" role="alert">
75-
<h4>Note</h4>
157+
![Project Activity](../../../static/img/flutterflow-project-activity.avif)
158+
159+
:::info
76160
Teams users can access the last 7 days of project edits, while FlutterFlow Enterprise users can access and download all previous project edits.
77-
</div>
161+
:::

‎static/img/flutterflow-project-activity.avif

108 KB
Binary file not shown.

‎static/img/real-time-collaboration.gif

5.19 MB
Loading

‎static/img/realtime-collaboration-setup.png

22.4 KB
Loading

‎static/img/share-project-with-organization.avif

121 KB
Binary file not shown.

0 commit comments

Comments
 (0)