Hyper Open Edge Cloud

How to Use ERP5 to make online documents and images (Nexedi ERP5)

Explain how to make documents (Images, Web Pages and Test Pages) using ERP5.
  • Last Update:2013-11-06
  • Version:002
  • Language:en

How to use ERP5 to make online documents and images

How to make online documents front page

Example: ERP: Theory, Practice and Configuration

This document will show you how to use ERP5 to make online documents, such as Web Pages, Test Pages and the images in the documents. Please note that you need to have basic knowledge of writing in HTML in order to control the format.

Create "Web Page" from New tab

Create

Open "New" tab in ERP5 Nexedi front page, click on "Web Pages" in the "Knowledge Management" section.

Fill "View" tab of the document

Fill

Please fill carefully in the following areas:Reference, Version and Language, Classification and Groups, Publication Section, as circled in red.

Firstly, it is important to follow the Convention of Reference in ERP5 about documentations. The Reference of each document should be unique to retrieve a page easily. For example, "user-Howto.Manage.Support.Request". Secondly, the Version decides which document will be shown finally after published. Thirdly, the Classification defines who can access, modify or use this document, and the document can be associated to one or multiple entities in the Groups classification tree. In the end, Publication Section defines who can see this document.

Edit the document by "Edit" tab

Edit the document by

If you master the knowledge of writing in HTML5, you can edit your document directly in "Edit" tab.

The rule is:


<section class="chapter or screenshot or illustration or code or master"> or <section>
  <h1>SLIDE TITLE</h1>
  <img src="http://www.erp5.com/IMAGE REFERENCE IN ERP5?format=png" type="image/png" alt="IMAGE TITLE" title="IMAGE TITLE">
  SLIDE CONTENT IN HTML
  <details open="open">
    SLIDE DETAILS IN HTML
  </details>
</section>
            

Let's see some examples:

For front page:
<section class="illustration">
    <h1>Events</h1> <img src="http://www.erp5.com/user-Events.Event.Workflow?format=png" type="image/png" alt="Event workflow in ERP5" title="Event workflow in ERP5" /> <footer>by <a href="http://www.osoe-project.org/contact">OSOE Team</a>.</footer>
    <details open="open">
       <p>From this tutorial, we are going to present how to use the CRM system of ERP5 to manage the communication within and outside organsations. We will use the examples of VIFIB to explain how to use the ERP5 features of "Event" and "Ticket" to optimize the company's CRM process.</p>
    </details>
</section>

For Agenda:
<section>
<h1>Agenda</h1>
    <ul>
      <li>CRM system in ERP5</li>
      <li>Event types</li>
      <li>Event natures</li>
      <li>One sender / multiple receivers</li>
      <li>How to keep track of interactions</li>
      <li>The outgoing Event workflow</li>
      <li>The incoming Event workflow</li>
      <li>How to use worklists</li>
    </ul> <details open="open" /></details>
</section>

For Tutorial contents:
<section class="illustration">
    <h1>CRM system in ERP5</h1> <img src="http://www.erp5.com/user-Events.CRM.System.In.ERP5?format=png" type="image/png" alt="CRM system in ERP5: Person communication" title="CRM system in ERP5: Person communication" />
    <details open="open">
       <p>Due to the number of persons with whom we interact, and the growing number of communication tools of which only few leave a trace (ie. emails), and the difficulty of organising the trace of communication in a central system (ie. Emails are stored in personal mailboxes, Fax in a specific place etc.), the complexity of keeping trace of the communication within and outside of the organisation makes it difficult to learn from our experience and to share all the informations we have about one contact of our organisation. This gave birth to the CRM systems.</p>
      <p>CRM stands for Customer Relationship Management. These systems have been created to keep track of every interaction you have with the your customers. In ERP5, we see all the contacts of our organisation (ie. customers, suppliers, media, etc.) as "Customer", because they are all helpful to increase the value of our company. So in ERP5, the CRM system which includes features of campaigns, Events, Meetings, Sale Opportunities and Support Requests, is used for managing all the communication between our organisation and all the contacts.</p>
      <p>We will begin with the feature "Event" to explain the process of CRM in ERP5.</p></details>
</section>

I ll explain in detail later how to make the image using ERP5 and get the "IMAGE REFERENCE IN ERP5" , so that you can put it in the standard code as shown.

The screenshot is an example of the document "How to Manage Support Requests" writing in HTML. There is also test code because this document is used as a tutorial.

Document Online Page view & Presentation Slideshow & Chapter view

Click and see the three versions of a document

Session 2: CRM Tickets and Events

Using ERP5 Knowledge Management, we can produce one online document from Web Pages or Test Pages module, and then show them in three ways: Web Pages, Presentation (Slideshow) and Book Chapters, just by adding the following code after the URL when you creat a hyperlink to show the Presentation or the Book Chapter of the online document.

The rule is:

"?portal_skin=WhiteSlideShow" and "WebPage_viewAsChapter" 

Let's see an example:

  <ul>
    <li><a href="user-Howto.Process.Incoming.Events/view">Tutorial 4: How to process incoming Events</a> (<a href="user-Howto.Process.Incoming.Events?portal_skin=WhiteSlideShow">Presentation</a>) (<a href="user-Howto.Process.Incoming.Events/WebPage_viewAsChapter">Chapter View</a>)</li>
    <li><a href="user-Howto.Manage.Support.Request/view">Tutorial 5: How to manage Support Requests</a> (<a href="user-Howto.Manage.Support.Request?portal_skin=WhiteSlideShow">Presentation</a>) (<a href="user-Howto.Manage.Support.Request/WebPage_viewAsChapter">Chapter View</a>)</li>
  </ul>

Then you can get the agenda with the hyperlink to show the Presentation Slideshow and the Book Chapter of the online document, as shown in the slide and the front page of this guide.

Edit the document by "Edit Slideshow" tab

Edit the document by

There is a second way to edit the document, especially for the document to display as slideshow - edit the document using "Edit Slideshow" tab

.

Edit Slideshow: New slide added

Edit Slideshow: New slide added

First, in the Edit Slideshow tab, click on the square "Add Slide", this action will create a screen to edit the slide.

Edit Slideshow: Edit slide

Edit Slideshow: Edit slide

Edit the slide following the example of the screenshot.

First, please fill Chapter Name field and choose Type of Slide. Please note that, in the field "Type of Slide", if you need to put images in the slide, you should choose "Screenshot" or "Illustration", then two more fields will appear-Image Caption and Image URL.
The rule for Image URL field is:

http://www.erp5.com/IMAGE REFERENCE IN ERP5?format=png
For example, "http://www.erp5.com/user-Events.Event.Workflow?format=png"

Second, in the Slide Text field, you can put the content which should to be shown in the slide, besides the images.
Let's see some examples:

For the Front page,
<footer>by <a href="http://www.osoe-project.org/contact">OSOE Team</a>.</footer>

For the Agenda,
<ul>
      <li>CRM system in ERP5</li>
      <li>Event types</li>
      <li>Event natures</li>
      <li>One sender / multiple receivers</li>
      <li>How to keep track of interactions</li>
      <li>The outgoing Event workflow</li>
      <li>The incoming Event workflow</li>
      <li>How to use worklists</li>
</ul>

Third, in the Text field, you can put the details of your tutorial. In fact, as you are making a document for slideshow, you don't need to put the details in "Slide Text", because not all the detail tutorial contents should been shown in the slides. Instead, when you are writing the tutorial pages, you put only keywords or links in the "Slide Text", the slides are mainly used to show images, except the Agenda page. But here in the Text field, you can write whatever you want in HTML.
For example,

<p>Due to the number of persons with whom we interact, and the growing number of communication tools of which only few leave a trace (ie.emails), and the difficulty of organising the trace of communication in a central system (ie. Emails are stored in personal mailboxes, Fax in a specific place etc.), the complexity of keeping trace of the communication within and outside of the organisation makes it difficult to learn from our experience and to share all the informations we have about one contact of our organisation. This gave birth to the CRM systems.</p> <p>M stands for Customer Relationship Management. These systems have been created to keep track of every interaction you have with the your customers. In ERP5, we see all the contacts of our organisation (ie. customers, suppliers, media, etc.) as "Customer", because they are all helpful to increase the value of our company. So in ERP5, the CRM system which includes features of campaigns, Events, Meetings, Sale Opportunities and Support Requests, is used for managing all the communication between our organisation and all the contacts.</p> <p>We will begin with the feature "Event" to explain the process of CRM in ERP5.</p>

Finally, after editing your slide, please click on "Add a New Slide" button.

Edit Slideshow: "Slide created"

Edit Slideshow:

After you click on "Add a New Slide" button, a new window for slide editing will be created. You can continue to edit this new slide, or close this window and go back to the "Edit Slideshow" tab.

Note: before you click on the Save button, nothing is saved, so DO NOT switch tabs or shut down the computer before you have SAVE your changes.

Edit Slideshow: Save the changes after editing !!!

Edit Slideshow: Save the changes after editing

If you close the new created slide editing window, you will be lead to the Edit Slideshow tab, Click on Save button before any further action, especially before you switch to other tabs (eg, Preview tab) of the document you are edting.

Edit Slideshow: "Data Updated"

Edit Slideshow:

Only when you see "Data updated", you are sure that all the information are saved.

Edit Slideshow: Add a new slide

Edit Slideshow: Add a new slide

To continue editing your document in Edit Slideshow tab, click on the square "Add Slide" besides the first slide you have edited, this action will create a second slide editing window. Then just repear the previsous steps to edit more slides to complete your document slideshow.

Edit Slideshow: Drag to modify the slide order

Edit Slideshow: Drag to modify the slide order

You can drag to modify the slide order.

Edit Slideshow: Modify or Delete the slide

Edit Slideshow: Modify or Delete the slide

You can also click on the top left corner of a slide to modify it or on the top right corner to delete it.

Publish Document Alive

Publish Document Alive

After you have done edting your document, either by using Edit tab or Edit Slideshow tab, you can choose the actions to publish, release or share it. Then, the persons authorized can have access to this document to read it or modify it, according to the Classification, Groups and Publication Section you have defined in the View page. This is why it is important to fill up the View tab carefully.

In our example, since the document is for tutorial use, so click on "Publish Document Alive".

Document "Published Alive"

Document

Now the document is published alive, it becomes a part of our OSOE handbook for ERP5 users.

How to use ERP5 to make standard image for document

How to use ERP5 to make standard image for document

As mentioned before, now we will show how to make the image using ERP5 and get the "IMAGE REFERENCE IN ERP5" , so that you can put it in the standard code when using Edit tab (<img src="http://www.erp5.com/IMAGE REFERENCE IN ERP5?format=png" type="image/png" alt="IMAGE TITLE" title="IMAGE TITLE">), or in the Image URL field when using Edit Slideshow tab (http://www.erp5.com/IMAGE REFERENCE IN ERP5?format=png).

The reason that we are talking about the rules of making images for documents in ERP5, is to insure the good image quality. For example, as you can see in the photo, the image shown in the tutorial is clear and zoomable, which makes it easier for tutorial users to follow the steps.

Please note that, all the images used in the web/test pages should be ".svg" format. We suggest to use open source software Inkscape to make images, so that the .svg image can be created and modified easily. Now we are going to explain how to make two kinds of images we will use for documents-screenshot and illustration.

Make standard image with screenshot: Take a screenshot

Make standard image with screenshot: Take a screenshot

First, for the image with screenshot, take a screenshot with application such as "KSnapshot".

Make standard image with screenshot: Save screenshot as PNG format

Make standard image with screenshot: Save screenshot as PNG format

Save you screenshot in PNG format. Here, you can already follow the Convention of Reference in ERP5 about images, as circled in red in the screenshot: user-Howto.Manage.Support.Requests.Create.Event.Action.List.Screenshot.png. Be careful to check and complete the ".png" at the end, if it is not added automatically.

Make standard image with screenshot: Open svg image editor

Make standard image with screenshot: Open svg image editor

Open svg image editing application (eg, Inkscape), the default svg document size should be A4, of which the dimensions are - width:height=297x210mm=1052.36x744.09px=1.414:1. This ratio of image dimensions should be respected (DO NOT EXCEED 1.414) when you are adjusting the svg document's size to the screenshot's size later.

Make standard image with screenshot: Insert screenshot.png to Inkscape

Make standard image with screenshot: Insert screenshot.png to Inkscape

Since we are making a svg image with screenshot, click the insert button as circled in red, and choose the screenshot.png we just saved to insert it into the Inkscape drawing. Please be careful to choose the "Link" way but not the "Embed" way, as shown in the following screenshot.

Make standard image with screenshot: Choose "Link" way to insert the screenshot

Make standard image with screenshot: Choose

Choose the "Link" way to insert the screenshot in Inkscape. The reason is that we will use an online link of the screenshot which will be uploaded in ERP5 and published alive to replace the local URL of the screenshot from your computer. In this way, if we need to update the screenshot (backgroup) of the image in the document, we only have to update the screenshot uploaded in ERP5, instead of re-edit the svg image in Inkscape.

Make standard image with screenshot: Adjust svg document size to small screenshot.png

Make standard image with screenshot: Adjust svg document size to small screenshot.png

The principle to make a good svg image with screenshot, is as shown in the photo, DO NOT modify the insert screenshot's size (which can be found in image's property), but ONLY adjust the svg document's size to the screenshot's size, and respect the A4 ratio 1.414.

As you can learn from the photo, if the insert screenshot is smaller than A4 size, you should adjust the svg document's width and height to fit the screenshot. Remember DO NOT zoom up the small screenshot to fit the svg document. And always start to adjust the svg's size from the width than the height. Here I adjust the svg size a little bit smaller than the original screenshot, is to insure the final svg document don't have a white margin around the inserted screenshot.

Note: If after you adjust the svg size, the ratio exceeded 1:414, which means the height is bigger than width/1.414, than consider to retake a screenshot to fit the ratio, or to put a part in height of the screenshot (which is not important) outside the svg document's border (in width), in order to insure the screenshot to be shown in the end is under the ratio 1.414.

Make standard image with screenshot: Small screenshot fit

Make standard image with screenshot: Small screenshot fit

Make standard image with screenshot: Adjust svg document size to large screenshot.png

Make standard image with screenshot: Adjust svg document size to large screenshot.png

So what if the screenshot to insert is lager than the A4 size of the default size of the svg document? The principle is the same. Just remember to always start to adjust the svg's size from the width than the height, so that you can control the height not exceeded the ratio 1.414.

As you can learn from the photo, if the insert screenshot's width is lager than A4 size, you should adjust the svg document's width and height to fit the screenshot. Remember DO NOT zoom down the large screenshot to fit the svg document.

Note: If the insert screenshot's height is larger than A4 size, start to adjust svg's width to fit the screenshot's width, than consider to retake a screenshot to fit the ratio, or to put a part in height of the screenshot (which is not important) outside the svg document's border (in width), in order to insure the screenshot to be shown in the end is under the ratio 1.414.

Make standard image with screenshot: Large screenshot fit

Make standard image with screenshot: Large screenshot fit

Make standard image with screenshot: Illustration and decoration in svg

Make standard image with screenshot: Illustration and decoration in svg

After you insert the screenshot, you can add the decorations and make illustrations to explain the screenshot, if necessary.

Make standard image with screenshot: Upload and publish alive the screenshot.png to ERP5 Images module

Make standard image with screenshot: Upload and publish alive the screenshot.png to ERP5 Images module

To finish editing the svg image with the screenshot, since we have chosen the "Link" way to insert the screenshot in Inkscape, we have to make the URL of the screenshot which is uploaded in ERP5 and published alive to replace the local URL of the screenshot from your computer.

To achieve the URL of screenshot, the steps are the same as the URL of the published web page as mentioned before, create a new image document from the Images module, set Title, Reference (please follow the Convention of Reference in ERP5 about images, for example, "user-Howto.Manage.Support.Requests.Create.Event.Action.List.Screenshot"), Version, Language, Classification, Groups, etc., then upload the screenshot.png and save the changes. Then click on the Action-Publish Document Alive.

Make standard image with screenshot: Make published screenshot online URL

Make standard image with screenshot: Make published image online URL

Open a new window, type in the address as show in the photo-put the screenshot's reference in ERP5: "www.erp5.com/IMAGE REFERENCE IN ERP5?format=png", if the image is shown correctly, you can then copy the whole link, and paste it to the URL of insert screenshot's property in Inkscape.

Make standard image with screenshot: Replace the local URL of the insert screenshot as online URL

Make standard image with screenshot: Replace the local URL of the insert screenshot as online URL

Now you have got the "Link" of the insert screenshot, so go back to the Inkscape and paste the copied online URL in the screenshot's property to replace the local URL of your computer, as show in the photo.

Make standard image with screenshot: Upload and publish alive the image.svg to ERP5 Images module to get IMAGE REFERENCE IN ERP5

Make standard image with screenshot: Upload and publish alive the image.svg to ERP5 Images module

After you have changed the URL of the insert screenshot, save the changes and you have finished the svg image editing. The next step is to get the published image reference in ERP5, which we can put in the standard code as mentioned before: <img src="http://www.erp5.com/IMAGE REFERENCE IN ERP5?format=png" type="image/png" alt="IMAGE TITLE" title="IMAGE TITLE">

Now you know how to do this, just repeat the steps to "Make published screenshot online URL", then copy the reference of the published svg image, which is the IMAGE REFERENCE IN ERP5.

Make standard image with screenshot: Copy svg URL to Web/Test Page

Make standard image with screenshot: Copy svg URL to web page

Put the IMAGE REFERENCE IN ERP5 in the Edit tab or the Edit Slideshow tab.

Make standard image of Illustration: Illustrate in svg

Make standard image of Illustration: Illustrate in svg

For now, we know how to make standard image with screenshot for document. The second situation, is to make standard image of illustration, without screenshot. So if you have understand the previous steps, to make the illustration, you just need to skip all the steps about the screenshot, the others remains the same.

Open Inkscape with the default document size A4. Then make the illustration, such as a workflow of Event management, as shown in the picture.

Make standard image of Illustration: Upload and publish alive the image.svg to ERP5 Images module to get IMAGE REFERENCE IN ERP5

Make standard image of Illustration: Upload and publish alive the image.svg to ERP5 Images module to get IMAGE REFERENCE IN ERP5

Upload, Save, and Publish Document Alive. Repeat the same steps as mentioned before to get the reference of the published svg image, which is the IMAGE REFERENCE IN ERP5. And then, you can copy it and put in the Edit tab or the Edit Slideshow tab.

Make standard image of Illustration: Illustration shown in the online document

Make standard image of Illustration: Illustration shown in the online document

The same as image with screenshot, by following the steps to make standard svg image, the document user can see the details easily.

Verify published svg image

Verify published svg image

In the end, you can verify the published svg image as the method shown in the photo.

Note 1: Some figures to make sure the images can be displayed well after you integrate them into the Web/Test Page:
For Svg Document Properties: Page Size "A4", Orientation "Landscape". If necessary, adjust the svg document to fit the screenshot by respection the A4 ratio width:height ≥ 1.414:1.
For Letters: Style "Sans".
For Color which is much readable in the slide show: Blue "255691ff", Red "d40000ff".
For all the drawings: Stroke Style: Width 5px.

Note 2: Annotations (JP):
Do not put chapter numbers explicitely else it is hard to reuse. E.g, "from this tutorial (Chapter 12) to Chapter 18".
Do not do any layout styling in details, anything like a list of items or a list of serial numbers without sentence should be banned by principle. Instead you can use sentences. Bold words in sentences on different paragraphs can help making things more clear. If you use paragprhas then you can extend them and little by little and even give better examples.
The word "allows" is not the best in English (it is a common Frenglish of Nexedi). Use "can" with a different sentence order.
Put names for the people who do each step, introduce them. The same as for each example, you should repeat the example each time to makes things clear to students.
No syntax errors in sentences. E.g, "after sent the email, Cédric got a reply...".
Simplify the sentence, but state things clearly.

Note 3: Do not use the Edit tab and Edit Slideshow tab at the same time!
It will break the document's structure if you need to show the code or html in in the normal text.

Now you can make your own online document with HD images using ERP5, which can be published on the ERP5 website.