Getting Started with Nuxeo Studio

Updated: October 10, 2017 Page Information Edit on GitHub

This page shows you how to start customizing the Nuxeo Platform using Nuxeo Studio. You'll see how to:

  • Get a Nuxeo Studio project using Nuxeo Online Services
  • Get a running Nuxeo Platform instance
  • Change the logo of your Nuxeo Platform instance
  • Create a new document type

Nuxeo Studio is a Nuxeo tool provided as part of the Nuxeo Online Services subscription offer. If you are a Nuxeo customer, you should already have a username and password to connect to and access your Studio project. Otherwise, we provide a 30-day trial offer so you can discover Nuxeo Studio and its configuration capabilities.

Get a Nuxeo Platform Instance

The Nuxeo Platform is available in different packages. Here we will use the ZIP archive.

Installing the Nuxeo Platform using the .zip package installs the Nuxeo Platform only. External dependencies must be installed separately.

To install and start the Nuxeo Platform ZIP archive:

  1. Unzip the .zip archive using your favorite tool.
  2. To start the Nuxeo Server: MAC OS: Double-click on the Start Nuxeo.command file. Windows: Double-click on the Start Nuxeo.bat file. Linux:
      chmod +x ./bin/nuxeoctl
      ./bin/nuxeoctl start --gui
    
  3. In a browser, go to http://NUXEO_SERVER/nuxeo.
  4. Fill in the information in the configuration wizard steps.
  5. At the Nuxeo Online Services step, provide your Nuxeo Online Services credentials. If you don't have an account, you can register for a free 30-day trial offer:
    • Provide a valid email address
    • Click on the confirmation link sent to the email address you provided
    • Your Online Trial account should now be created
  6. At the Modules step, select Nuxeo JSF UI.
  7. Click on Start at the final step. Your application is ready to use.

Activate development mode to avoid having to package and deploy your application whenever you want to visualize your changes from Nuxeo Studio. This way you only need to hot reload from the Update Center or the Nuxeo Dev Tools extension.

To activate development mode:

  1. When the application has started, log in with Administrator/Administrator credentials.
  2. Click on ADMIN > Update Center. The Nuxeo Studio tab is displayed.
  3. Click on the Activate button to activate development mode.
  4. Click on the Restart Server button displayed on top of the Admin Center.

You can now access Nuxeo Studio from Online Services by clicking on this link: connect.nuxeo.com/nuxeo/, or from the Go to Studio button in Nuxeo Dev Tools and start customizing your application.

Our firs goal is to change the logo displayed in the banner of the Nuxeo Platform application. We'll assume you already have a logo in the PNG or JPG format.

Studio Customization

Change the logo:

  1. In Studio's menu, under Configuration, click on the Branding section.
  2. Click on the New button.
  3. In Feature ID field, type "MyBranding" and click on the Next button.

On the Main Pages tab:

  1. Check the box "Set as default branding".
  2. Click on the Select Resource button of the "Logo image" field. A "Select Resource" window pops up. It shows a list of images available by default, imported with the "Default Nuxeo Platform Configuration" template.
  3. Click on Choose File and select an image from your desktop.
  4. Click on the Upload button. The selected image is uploaded to Studio, added to the list of available images and selected.
  5. Click on the Ok button at the bottom of the popup window. The path of the uploaded image is displayed next to the Select resource button.
  6. Click on Save at the bottom of the screen.

Deploying Changes on Your Nuxeo Platform Instance

In Nuxeo Dev Tools extension, simply click on the Hot Reload button. Otherwise...

  1. Go to your Nuxeo Platform instance, typically available at http://NUXEO_SERVER/nuxeo.
  2. Connect with login/password Administrator/Administrator.
  3. Click on ADMIN > Update Center > Nuxeo Studio.
  4. Click on the Update button. Your logo is updated.

Create a Contract Document Type

Here we want to create a custom document type named "Contract" that will hold specific metadata related to the notion of a contract: contract owner, starting date, policy.

Studio Customization

  1. In Studio's menu, under Configuration, click on the Content Model section, then Document Types. Click on the New button.
  2. Fill in the creation form as follows and click on Next: ID: Contract Extends: File Label: Contract Description: Contract document type for internal use.

    Your document type is created.

  3. Fill in the Definition tab:
  4. Fill in the Schema tab with the following metadata:

Now we'll customize the form that's used to create the document. On the Creation Layout tab:

  1. Click on the icon to remove the WARNING and Description widgets.
  2. Drag and drop the fields Owner, Start and Policy from the schema Contract to the grid.
  3. Click on  if you wish to edit a label, then click on Save in the popup when you're done.

Creation Layout Tab

On the Edit Layout tab, we can customize the form used to update the metadata of the document:

  1. Click on the button Import Layout and select Import 'create' layout.
  2. Click on the button Add Row.
  3. Drag and drop the field Reminder from the schema Contract to the grid.
  4. Click on  if you want to edit the widget label, then click on Save in the popup when you're done.

Edit Layout Tab

  1. On the View Layout click on the button Import Layout and select Import 'edit' layout.
  2. Click on Save.
  3. Deploy your changes on your Nuxeo Platform instance.
  4. Now go to a workspace in your Nuxeo Platform instance and create a new Contract document!

You are now ready to use Nuxeo Studio! You can:

13 days ago manonlumeau NXDOC-1326: finish tutorials section
a year ago Solen Guitter 26
a year ago Solen Guitter 25 | NXDOC-857: remove nuxeo.io
a year ago Manon Lumeau 24
a year ago Manon Lumeau 23
2 years ago Solen Guitter 22 | Update Studio menu labels
2 years ago Solen Guitter 21 | Fix links
2 years ago Manon Lumeau 20 | Fix links
2 years ago Julie Allouch 19
2 years ago Solen Guitter 18
2 years ago Solen Guitter 17
2 years ago Bertrand Chauvin 16 | Update titles to fix anchor links
2 years ago Manon Lumeau 14
2 years ago Manon Lumeau 15
2 years ago Solen Guitter 13
2 years ago Manon Lumeau 12
2 years ago Manon Lumeau 11
3 years ago Manon Lumeau 10
3 years ago Manon Lumeau 8
3 years ago Manon Lumeau 9
3 years ago Manon Lumeau 7
3 years ago Manon Lumeau 5
3 years ago Manon Lumeau 6
3 years ago Manon Lumeau 4
3 years ago Manon Lumeau 3
3 years ago Manon Lumeau 2
3 years ago Manon Lumeau 1
History: Created by Manon Lumeau