Content studio and content creation
In this chapter, we’ll give a short introduction to Content Studio, an app that serves as the main content management interface for XP, providing editors an efficient way of creating, and curating content without technical skills.
|The tasks and examples in this chapter are based on work done in previous chapters (starting with the sandboxes chapter). If you want to follow along with the examples, make sure you’re all caught up.|
Let’s start this chapter by installing Content Studio. In order to do that, access Applications app, click on the header item "install", search for "content studio" and finally click on the green "install" button.
If the app was installed successfully, you should now see it listed in XP admin menu on your dashboard. Click on it to visit Content Studio’s homepage.
After visiting Content Studio for the first time on a fresh sandbox, you’ll be welcomed with the following dialog:
The reason why this dialog shows up is because Content Studio manages content, and content is organized in independent repositories, which are named as a content projects, or simply as projects.
A project offer individual access control and permissions, as well as other settings to toggle features and language(s).
|Privileged users can manage projects via Content Studio settings.|
Now, head back to the wizard dialog to create your first project:
Content Studio is a powerful app with a lot of features, and one of its main goal is to provide an awesome user experience for creating and curating content.
Content is defined through content types (a concept we’ll introduce in the next section), which are defined and installed via applications.
Therefore, if we want to enable Content Studio to manage a specific type of content, we need to access content studio in a project which has an app assigned to it, and in this app, this specific content should defined via a content type.
With all this in mind, let’s now assign the previously created app to your first project:
We’ve reached a certain point in this guide where its worth giving a section to reiterate the differences between:
XP project folder and its files
Content Studio project
A "XP project folder and its files" is the folder containing the files needed in order to create a XP app. In the previous section, this was automatically generated for us when we picked the "Vanilla starter" using the command
enonic project create.
A "XP app" is the .jar file that is generated when you run the command
enonic project build on the project root folder.
A "Content Studio project", as explained in the section Task: your first project above, is a repository to store content, and the content creation is enabled through the apps you assign to a project.
In summary, you can have the following flow in mind:
|This flow is super simplified and there are a lot of details to each one of those boxes, but it should be sufficient to explain the main difference between those ideas and how they connect to eachother.|
From now on, we’ll use the term "project" to refer to a "XP project folder and its files" and also to a"Content Studio project", since it can be easily distinguished by the context in which te term is used.
We believe that this will help to avoid any confusion from your side. Now, back to work!
Every content item created in Enonic has a specific content type. The content type defines the data fields (aka properties) that piece of content can and must have.
|As mentioned before, content types are defined and installed via applications. If you unassign an application from the project you’re currently working on, you’ll no longer be able to create or edit content of that type.|
Now that we know what a content type is, let’s look at how we create them.
We’ll create a content type that contains two input fields. When shown in Content Studio, it will look like this:
Back to your preferred IDE, make sure you’re in the project folder (
myproject/) that you created in a previous chapter. All paths will be relative to this root folder.
Create a directory for content types:
src/main/resources/site/content-types/. XP is quite particular about project folder structure, so you need to put content types right where it expects to find them.
Create a directory called
artistin the newly created
content-types/directory. XP expects all content types to have their own directories.
artistdirectory, create a file called
artist.xml. The file name must match the directory name (except for the file extension). The full path to the content type from the project root should be
artist.xmlfile, place the following contents:The 'Artist' content type
<content-type> <display-name>Artist</display-name> (1) <description>Information about an artist</description> (2) <super-type>base:structured</super-type> <form> (3) <input name="name" type="TextLine"> (4) <label>Name</label> <help-text> The artist's name (if different from their professional moniker). </help-text> </input> <input type="TextArea" name="about"> <label>About the artist</label> </input> </form> </content-type>
1 This is what will be displayed in Content Studio when creating new content. 2 This is an optional description, but it is still recommended to add, as it will make life easier for your editors. 3 This is where we specify which fields (aka inputs) this content type shall have, basically the form, as seen in Content Studio. 4 The
typeattribute specifies what kind of input input the user will see in Content Studio, and the
labelspecifies how the input will be labeled.
Content types also have a large number of other, optional fields that we won’t get into here. If you’d like to learn more about this, consult the reference documentation. XP’s
inputelements are not the same as HTML
inputelements. To read more about it, see the chapter on input types .
enonic project deploy
If everything goes well, you should see your sandbox logs update now. And that’s the basics of creating new content types.
Next, let’s go back to Content Studio and create some actual content!
Go back to content studio and make sure you are on the project you’ve created on the beginning of this chapter.
Press "New …" to open the "Create Content" menu. You should see a content type "Artist".
|This content type is only visible there because of the updates we did to the app, i.e, your app is responsible to be delivering a artist structure in which content studio can start to actually create content.|
However, before we start creating artists, let’s create a folder.
Since we’ll be using this project in the coming chapters with more content types, having some hierarchy will make things easier. Choose a new folder and call it "artists".
Next, let’s create a few artists to get used to the workflow. We’ll start with Cardi B.
Select the artists folder (make sure it’s highlighted).
Create a new artist.
Give it the display name "Cardi B".
Use these details to fill in the form:Artist details (Cardi B on Wikipedia)
Figure 6. The content form filled out for the artist "Cardi B"
Belcalis Marlenis Almánzar
Belcalis Marlenis Almánzar (born October 11, 1992), known professionally as Cardi B, is an American rapper and songwriter.
Again, save and close the tab. Now repeat this process for these next two entries. Be aware that Content Studio lets you nest content, so if you try and create new content when "Cardi B" is selected in the hierarchy, it’ll nest the new content under "Cardi B". In this case, though, we want the artists to be nested directly under the current folder, so make sure "artists" folder is selected when you create new content.Missy Elliott (Missy Elliott on Wikipedia)
P!nk (P!nk on Wikipedia)
Melissa Arnette Elliott
Melissa Arnette Elliott (born July 1, 1971) is an American rapper, singer, songwriter, and record producer.
Alecia Beth Moore
Alecia Beth Moore (born September 8, 1979), known professionally as Pink (stylized as P!nk), is an American singer and songwriter.
With these artists created, your content hierarchy should now list the artists folder and the three artists.
Enonic provides XML Schema Definitions (XSDs) for text editor integration and validation of your XML schemas. To use it, add the attribute
xsi:schemaLocation to your content types as shown below:
<?xml version="1.0" encoding="utf-8"?> <content-type xmlns="urn:enonic:xp:model:1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:enonic:xp:model:1.0 https://raw.githubusercontent.com/enonic/xp/master/modules/core/core-api/src/main/resources/META-INF/xsd/model.xsd"> <display-name>Content type display name</display-name> <!-- rest of content elided for brevity --> </content-type>
Note that in-editor schema validation depends on whether your text editor supports validating against XSD schemas or not. If your editor doesn’t support it out of the box, it may be available via a Language Server Protocol (LSP) client.
You might have noticed the yellow circles with exclamation marks displayed on all the content we’ve been working on, both in the wizard and in the content grid. This is how Content Studio indicates whether something is published or not and whether there are any errors with it. There are four states:
- Error (red circle with a cross)
This indicates that there is something wrong with your content. Because XP uses structured content it can also validate content as it is created. If something doesn’t conform to the specified schema (for example: a required field has no value), it will fail to validate and be marked with this symbol.
- Work in progress (yellow circle with exclamation mark)
This symbol indicates that this piece of content has unpublished changes. That could be either because this is new content that has never been published, or it could be because there have been changes to this piece of content since it was last published.
- Ready for publishing (green circle with a check mark)
This piece of content is marked as ready to be published.
- Published (no icon)
This piece of content is published and has not been modified since.
So what does it mean for content to be published? It doesn’t make much of a difference to us at this stage of the tutorial, but when you’re working on production systems, it’s very important. So let’s talk briefly about Content Studio’s branching and publishing system.
Content Studio operates with two branches:
draft branch, where you work and edit;
master branch, holds the published content.
When you work on something in Content Studio, you’re working on the draft branch.
When you publish something, the master branch gets updated with the new content.
When you edit that same piece of content in Content Studio again, you’re back to working on the draft, and you have to publish it to see changes to the published content.
To publish a piece of content, right click it and select "Publish".
|You can also publish a piece of content by using the keyboard shortcut Ctrl+Alt+P/control+option+P.|
We’ll now install and give a brief introduction to the Data Toolbox app, so make sure to install it directly from the Applications app (same flow as installing Content Studio or any other app).
Data Toolbox provides you with a web interface to visualize and manipulate your XP data. We’ll now see how to inspect content using Data Toolbox.
Open the XP admin menu and select Data Toolbox. You should have this app installed from when you took the welcome tour.Figure 8. Data Toolbox
Navigate to the "Data Tree" menu. In this menu, the toolbox lists repositories within your XP instance. There are four repositories listed:
This is the current repository that holds your content.
This is the default repository.
This is where the audit log is stored. The audit log allows you to see a log of everything that’s been done in your XP instance, such as content creation, user administration, etc., and also tells you when it was done and by whom.
This is where XP stores data about your system, such as external applications and identity data.
This is a separate repository where scheduled jobs are stored (new in 7.7.0).
Navigate through to
Next up is a list of branches (as discussed above). As long as you’ve published your content, you can choose either one of these.
Keep navigating further down the tree:
When you’ve reached
contentyou should see all the content of your site listed. Navigate to
artiststo find actual pieces of content.
Choose one of your artists and check out both the info view and the JSON view, available via the buttons in the table row.Figure 9. The Data Toolbox node info view
To inspect the data associated with the artist, you can select "Display properties", which will bring up data about the node, such as its display name, its owner, when it was created, etc.Figure 10. The display properties view
Finally, you can navigate to the
dataproperty, where you’ll find the data stored on the artist.Figure 11. The properties.data view
Inspecting content is only a fraction of what Data Toolbox can do: it’s a versatile and powerful administrative tool, and we’ll see more of it in a later chapter.