Scrivito CMS: Using Rails framework and Widgets

by Elixir Consultant

• 0
• 57.2K
• Technical

Scrivito CMS: Using Rails framework and Widgets

Introduction:
This article gives you the details regarding Scrivito CMS, how to use Scrivito CMS for maintaining contents of a website using Rails framework, and also to create widgets using the same. (See why widgets in particular!).

Main points:
° As is with CMS, the main objective is to change the web content without changing the code.
° In Scrivito, everything is a widget.
° It provides numbers of widgets for every purpose (eg-image,video,text etc).
° All the contents are saved to cloud.
° Editor mode is password protected.
° Uploading files is done by drag and drop.
° It supports multiple devices using responsive web design.

Getting Started:
CMS(Content Management System) is the way to create and modify the web content, and Scrivito CMS obediently provides you with all the functionalities. It consists of an editor mode and visitor mode switch, with which you can just switch to ‘View As Website Editor’. Just click on the edit option, and now you become an editor(!) and you will be able to create a new content or modify the previous contents. You can also change size, location and style of the contents.

After changing the contents, you just need to publish all the changes and now you can see all the changes effected to the original website.

Scrivito also provides you with a feature to make multiple editors’ copy. This means that you can create multiple editor copies of the same website and therefore multiple users can edit the website content. The editor mode is password protected also, and you just need to add a editor password, thereby making the editing of your website more secure.

For a complete demo, sign into www.scrivito.com

Bringing in Scrivito CMS into your Rails Application:

Step-1
In order to integrate Scrivito into your rails application, you need to sign up into www.scrivito.com and generate the API and TENANT keys.

Step-2
Add the Scrivito gem to your Gemfile:

gem “scrivito”, “~> 1.8”

Step-3
Remove all the turbolinks from these files since Scrivito does not support it yet.

Gem(file)

JavaScript assets in app/assets/javascripts/application.js

Application layout in app/views/layouts/application.html.erb

(In this, remove the tag attribute data-turbolinks-track )

Then, run

bundle update scrivito

bundle install

Step-4
Require Scrivito JavaScript assets:

Next, require the following assets in app/assets/javascripts/application.js after jquery and jquery_ujs.

//= require jquery

/* Including jquery*/

//= require jquery_ujs

/* Including jquery_ujs*/

//= require scrivito

/* Including scrivito*/

Require Scrivito stylesheet assets:

Also, require the below assets in app/assets/stylesheets/application.css.

/*
*= require scrivito
*/

Step-5
Add head and body tags

Add scrivito_head_tags to the head section and scrivito_body_tags to the body section in app/views/layouts/application.html.erb. The result should look like this:

…
<%= scrivito_head_tags %>
…

<%= yield %>
…
<%= scrivito_body_tags %>
…

Step-6
Let Scrivito generate and migrate the basic structures:

Run this command to generate basic structure-

rails g scrivito:install

This will generate the basic structure for Scrivito.

Step-7
Create an .env file in your app root directory for your API credentials.

Your .env file look like:

SCRIVITO_TENANT = tenant-id-from-scrivito.com-dashboard

SCRIVITO_API_KEY = api-key-from-scrivito.com-dashboard

EDITOR_PASSWORD = the-editor-password

GOOGLE_MAPS_API_KEY = api-key-from-developer.google.com

In the above keys you can leave the editor password, but keep in mind that anyone can access your app and can change your content. If you want editing to be password protected then you must give a password for ‘EDITOR_PASSWORD’.

If you leave off your edit password field it should be not a problem in local but if you deploy in public you should set a password.

You can also leave ‘GOOGLE_MAPS_API_KEY’ but the maps widget won’t display a map. Anyways, you can add a key later on.

After this you need to migrate using below command:

bundle exec rake scrivito:migrate scrivito:migrate:publish

Step-8(optional)
If you want fresh example content then create seed data and run the seed data by running below command. This is an optional step, and you can choose to skip this step.

$ rails runner SeedDataName.create

This will create a new working copy for you and remove all existing content, add example pages, and publish the working copy.

Step-9
Now everything is set to run your application, you just need to start your server.

$ rails server

Open http://localhost:3000 in your browser.

Now you are able to create a new page widget or can change the contents of your widgets using editor option which is available on top of the header.

What’s next?
Creating a Page Type with Widgets:
The idea behind widgets –
Today, websites are not merely a combination of headlines and text. They have become a representation or a sort of branding for their representative. They contain news, events, galleries, information displayed in various formats, videos, regular updates and so much more. But this does not mean that the editors of such websites be made to create all the necessary dynamic content and functionalities on their own. Neither should they be made to use coding (be it simple or complex) to achieve their desired structures to be displayed.

A good CMS should allow all changes to content as well as the structure of the content be made in the easiest way possible. With this in mind, Scrivito has come up with widgets, which the developers themselves can express and also customize. They can be created into readymade widgets so that they can then be used to simply insert into the web pages.”

How to create a page type prepared for widgets?
Every web page is represented by a Scrivito CMS object. Therefore, this CMS object needs a field of type widgetlist (similar to other types such as string, date, etc.), in order to hold widgets.

The Scrivito SDK comes with a page generator that creates the model and the controller for the page, plus the index view as well as the page properties and thumbnail views for in-place editing:

Run this command

$ rails g scrivito:page MyPage

This will generate all the page related views models and controller.

In the model you can add the attributes what you need or you can add like this:

class MyPage < Obj
attribute :title, :string
attribute :body, :widgetlist
attribute :child_order, :referencelist
End

Now, new CMS objects based on the MyPage object class can be created. You might want to try this out in place on your Scrivito-based website.

Embedding widgets into a view

Just put below code in your page view/index.html.erb

<%= scrivito_tag_list :ul, @obj, :toclist do |list, child| %>
<%= list.tag :li do %>
<%= link_to child.display_title, scrivito_path(child) %>
<% end %>
<% end %>

<%= scrivito_tag :h1, @obj, :title %>
<%= scrivito_tag :div, @obj, :body %>

Now you are ready to add widgets to this page. The Scrivito CMS also comes with a basic set of widgets, so you can experiment a bit with them.

More about Widget Gallery:

All the basic widgets are by default installed when you create basic app structure but some more widgets are available other than the basic widgets, such as video widget, crm form widget, etc. if you want to use those widgets you need to generate those widgets by adding gems or generating by command.

Two ways of inserting widgets and widget data on a web page:

You can add widgets and its contents by visiting the website as editor.
You can add widgets and its contents from seed content creator.

Sample example of scrivito:

Suppose you are going to re-launch your website next month with a new look and new contents. In this situation you may have multiple changes and more work. So, one team of editor can work on the re-launch working copy while the other editors fix other issues (if any) or add new articles to the site using their individual working copy.

Advantages of Scrivito:

Don’t be afraid to make mistakes– If you have done some mistakes while editing no need to worry; simply delete your working copy, no matter how many mistakes or changes you have done. So, someone new to the website can play with things without the fear of destroying the site.
Easy to use– you can easily move your content by uploading video or image by easy drag and drop
No need of a professional– You do not need a professional developer to change the contents of the websites.
Scrivito CMS, in my opinion, is one of the best ways to maintain web contents. For more details on the Scrivito CMS, follow the documentation of https://scrivito.com/documentation.

Would you like to know more or see our Projects? Fill in the Contact form or drop a mail to sales@iterontech.com