Multiple users editing the same prototype

With Justinmind, multiple users can work and collaborate on the same prototypes at the same time. In Justinmind, we call this “Teamwork”.

Team prototyping explained

Teamwork prototypes can be worked on by multiple users at the same time. This works by ‘locking’ the screen or prototype component you’re currently editing so you can apply changes, while your team members can simultaneously apply changes to other elements from Justinmind on their own computers. You can then update your prototype to show new changes without leaving the editor.

To use Teamwork, you’ll need a Justinmind online account. This will give you access to the platform that stores all of your shared prototypes, as well as their revisions.

You’ll also need Internet access to connect your online account and perform sharing operations. However, you can work offline on a shared prototype and save the changes once your connection has been restored.

There are a few concepts you need to be familiar with in order to get started with Teamwork prototypes:

Shared prototype

A Teamwork prototype is referred to as a “Shared prototype” in the Justinmind editor under the Teamwork section in the main menu.Teamwork shared prototype

Prototype owner

The Prototype owner is the user who uploaded and shared a prototype to their online account. In addition to being able to edit this prototype, they can also:

  • Invite users to edit their shared prototypes
  • Remove a user’s access to their shared prototypes
  • Rename their shared prototypes
  • Delete their shared prototype from the Justinmind server

To change the owner of a Teamwork prototype, the prototype owner should navigate to the main menu in Justinmind, select Teamwork > Manage Shared Prototypes > Select the Project > Click the ‘gear’ icon next to ‘Owner’ and choose a new owner from your account users.

Prototype users

Prototype users can edit a Teamwork prototype once invited by the prototype’s owner.

Note: Teamwork prototypes will not appear in your online account projects. They are only accessible from within the Justinmind editor.

Operations for a shared prototype

These are the operations you can perform with Teamwork prototypes from Justinmind’s User Interface module:

Operations from the File menu

From the File main menu option, you can perform the following operations:

New Shared Prototype – click to create a new empty Teamwork prototype.new shared prototype
Open shared prototype – click to open a Teamwork prototype from a list of Teamwork prototypes in which you are the owner or an added user.open shared prototype

Operations from the Teamwork menu

From the Teamwork main menu option, you can perform the following operations:

Open shared prototype – click to open a Teamwork prototype, selected from a list of Teamwork prototypes in which you are the owner or an added user.

You will need to open the Teamwork prototype to work on it.teamwork open shared prototype
Once you’ve selected “Open shared prototype”, the following dialog will appear:open shared prototype dialog

  1. Select a prototype to open from the list on the left side of the dialog.

    If “(Local copy)” appears next to a prototype’s name, it contains the content from the last time you opened the Teamwork prototype, and you can open it without connecting to the Internet.
  2. Once selected, you’ll find a description of the prototype (name, number of revisions, version of Justinmind it was created with, the account owner and the prototype owner) on the right side of the dialog.

    If you are the prototype’s owner, or the Justinmind account owner of the account where this shared prototype has been placed, you will also find the following buttons:

    Manage users – click to manage the users who have access to the shared prototype
    View history – click to view the version history of the shared prototype

    Learn more about this here.

    When you’ve selected the prototype you want to open, click “OK”.

Share prototype – click to share the current prototype with other prototyping users.share prototype
When the “Share” option is selected, a dialog will appear. It will prompt you to choose an account to place the prototype into (if you have access to more than one Justinmind account). You will also be required to enter a name for the new shared prototype.share dialog
Select the relevant account and click “Share”.

Another dialog screen will appear, prompting you to invite users to edit your shared prototype.

To invite users to edit your shared prototype, click the ‘+’ icon. In the dialog that appears, keep the first radio button selected to invite a user currently associated to your online account, or select the second radio button to invite a new user. You’ll need to fill in their email, first and last names, and role (regular user or developer). Then, click “OK” twice. See more on adding/removing users below.edit shared prototype

Invited users will receive activation and invitation emails at the email address entered in this dialog.

Manage shared prototypes – click to see a list of all your Teamwork prototypes, including options to view and edit the users, history, and owner of the prototypes.manage shared prototype

Add/Remove users – click here to modify which users can edit the shared prototype.add remove users
This operation will let you add users so that they can edit the shared prototype, or remove their access. This operation is only available to the prototype’s owner, or the owner of the associated account.

Once you’ve selected “Add/Remove users”, the following dialog will appear:add remove users dialog
Here, you’ll find a list of users who can edit the prototype. Click the ‘+’ icon to add a user. Click the ‘X’ icon to remove the selected user’s access to your Teamwork prototype.

Note that removing a user from this list will lead to the loss of any local (unsaved) changes to the Teamwork prototype.

Adding a new prototyping user

In the dialog that appears, keep the first radio button selected to add a user currently added to your online account, or select the second radio button to add a new prototyping user.

You’ll need to fill in their email, first and last names, and role (regular user or developer). Once you’ve added all the users you wish to grant access to, click “OK” twice.adding new user

These users will receive activation and invitation emails at the email address entered in this dialog.

View locked elements – click to display the shared prototype’s locked screens, templates, masters, data masters, variables or comments, and display which user has locked them.locked elements
Once clicked, the following dialog will appear:locked elements dialog
Learn more about locked elements here.

Commit all – click to upload all local changes made to the shared prototype to the server.commit all
In the dialog that appears, you’ll find:commit all dialog

  1. The change (modify, delete or add) made to a prototype’s component
  2. To which type of component the change has been made (e.g. template, screen, data master)
  3. The name of the component
  4. A comments box in which you can leave a comment related to the change made

Click “Ok” update all local changes.

Update all – click to load all new changes made by other users to the shared prototype.update all
In the dialog that appears, you’ll find:update all dialog

  1. The revision number (each time a user hits “Commit” when working on a shared prototype, they create a new revision)
  2. The date and time of the revision
  3. The name of the user who made the changes
  4. Any comments included
  5. A list of all the changes applied in this revision

Discard all changes – click to discard all local changes.discard all changes
Discarding local changes means ignoring all changes made after the last commit. You can always discard local changes you’ve made to a shared prototype – the prototype will revert back to the state prior to the most recent commit.

Unlock all – click to unlock all locked components.unlock all

Show history – click to display the prototype’s commit history. Here you’ll find all revisions and be able to create new prototypes from them.show history

In the dialog that appears, you’ll find:show history dialog

  1. The revision number
  2. The date and time of the revision
  3. The name of the user who made the changes
  4. Any comments included
  5. A list of all the changes applied in this revision
  6. New prototype from revision – click to create a new prototype from a previous revision of the currently shared prototype. The new prototype will not be a shared prototype, and will not record revisions automatically.

Close prototype – click to close the currently shared prototype. You will be prompted to unlock the UI elements you currently have locked before closing the prototype, and asked if you want commit your changes to the server.close prototype

Contextual menu for UI elements in shared prototypes

When working on a shared prototype, components are locked by users so that they can be edited without having changes overwritten by other users. Lockable components include screens, templates, masters, data masters, variables and comments. To lock a specific UI element, its container component (e.g. screen or template) will also need to be locked.

Every lockable component can be locked/unlocked from its contextual (right-click) menu. The contextual menu includes the following operations for shared prototypes:contextual menu ui elements

  • Commit – click to upload the local changes of the selected component, and its dependents (if there are any). Dependent elements will be shown in a dialog before the commit operation is performed.
  • Discard changes – click to discard the local changes made to the selected component.
  • Lock/Unlock – click to lock or unlock the selected component.

    The locked/unlocked status of a component is indicated with a locked/unlocked padlock icon on the left of the component:

contextual-menu-piruletas.png-1
Lock
There are two ways to lock a prototype’s UI element:

  1. Click on the UI element as if to edit it. If someone else is also working on this prototype, a dialog will appear prompting you to lock the element:lock
    Select the “Lock automatically” checkbox to have elements you select lock automatically when working with shared prototypes. This setting can be enabled or disabled in “Preferences”.
  2. Another way to lock an element is through the contextual menu of the container component. Right click on the container component (e.g. screen or template) and from the contextual menu that appears, select the “Lock” option.lock-option-1

Unlock
To unlock an element, right click on the container component and select the “Unlock” option.unlock-1
If the element you are unlocking has local changes you haven’t yet committed, you will be prompted to either commit or discard them. Click “Commit all” to commit them or “Cancel” to discard them.commit unlock
Once edited and saved, we recommend that you unlock elements so other users can edit them too.

For more information on ‘Commit’ and ‘Discard’ operations, click here.

Note: you can only unlock UI elements that are currently locked by you.

If you are the owner of a shared prototype, you also have the power to unlock elements someone else has locked. In order to do so, just remove the user who has the elements locked (“Add/Remove users”). Elements will be unlocked but the user will lose their local changes.

Operations for the owner of the shared prototype

If you own a shared prototype or you are the owner of a Justinmind online account that stores shared prototypes, you can perform the following advanced operations. All of these operations can be accessed from the same dialog that pops up when selecting “Manage shared prototypes” from the “Share” main menu option.

When you’ve selected “Manage shared prototypes”, a new dialog will appear with a list of all the shared prototypes you own or have stored in your account and you have permission to modify:operations prototype owner

  1. Click the “Manage Users” button to manage the users who have access to the shared prototype. The “Add/Remove users” dialog will appear. For more information about adding/removing users, see the Add/Remove users section above.
  2. Click the “Owner” gear icon to change the shared prototype owner.
  3. Click the ‘X’ to delete the selected prototype from the server. By deleting a shared prototype, you will delete all revisions as well.

Changing the shared prototype’s owner

This specific operation can only be performed by the owner of the Justinmind online account where the shared prototype is stored.

When you click the gear icon, another dialog with a list of all possible owners will appear. Note that only Justinmind account owners can take on the role of prototype owner.

The prototype’s owner will be identified with an Avatar icon:shared prototype owner

Deleting a shared prototype

When you click the ‘X’ in the Manage shared prototypes dialog, a confirmation dialog will pop up before executing the operation:deleting shared prototype

Enter “DELETE” to confirm the operation. This operation will delete the prototype and all its shared information (revisions, invited users and history). Once deleted, none of the users who were working on this prototype will be able to commit changes and their prototypes will convert into local prototypes so they can still keep working on them.

Working offline with shared prototypes

If for any reason you don’t have internet access, you can work offline on your shared prototypes. However, you won’t be able to commit, update or lock new elements until your internet connection has been restored.

While offline, you will only be able to work with your currently locked elements. It’s important to lock the elements you are going to work with before starting your work offline.

How to work offline

When opening a shared prototype, your connection to the servers will be checked. If Justinmind can’t establish a connection, a dialog will pop up asking you what you would like to do:work offline
Click “Work offline” if you want to open a locally-stored copy of the prototype and work on it offline. A new dialog will show all the locally-stored copies available. Select the desired prototype and click “OK”.work offline dialog

Save changes when working offline

When working offline with a shared prototype, changes can’t be committed until your connection has been restored. However, you can save changes locally, and commit them once the connection is restored. To do so, go to the “File” main menu option and select “Save a copy”. Choose where you want to save your local copy and click “Save”.

Synchronization checks

When working with a shared prototype with an internet connection, Justinmind performs synchronization checks with the servers to detect differences between the user’s local copy and the servers’ copy of the shared prototype.

These checks may detect when a prototype has been deleted from the server, when your permissions to modify a prototype have been revoked, or when the prototype has been modified by other computers using the same user.

Some of these checks will generate a message (e.g. “Prototype deleted” or “Permissions revoked”):synchonization checks
However, if the problem is related to lock synchronization, a dialog will appear with the following options:synchronization dialog

  • Revert to last revision – click to open the last prototype revision. Note that you will lose all local changes.
  • Work offline – click to start working on the prototype as a local copy