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.

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

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.

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.

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.

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

First, in the Edit Slideshow tab, click on the square "Add Slide", this action will create a screen to edit the 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.

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.

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.

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

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.

You can drag to modify the slide order.

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

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".

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

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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

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.