Adding web content
Use the following procedure to create web content.
Procedure
1. Go to ProCenter modules > Web configuration > Web content.
2. On the action panel, click Add.
3. In the data section, enter a Code and Description.
On the HTML, CSS, Javascript and / or Translations tabs, enter the relevant script. Based on the content provided in these tabs, the output is displayed in the Web content gadget on the homepage.
| You require HTML, CSS and Java knowledge to write a script that can be rendered and displayed in the browser. JQuery is supported and systems images can also be included in the pages. |
4. Click Save.
The content is ready to be displayed in the gadget on the homepage.
Example
The following image shows a few examples of code for HTML, CSS, JavaScript and Translation tabs:
HTML:
<h1> [&HeaderText] </h1>
<p> [&ParagraphText] </p>
<button onclick="showImage()">Show image</button>
<img class="room_image" src="/systemimages/cookieplanet">
CSS:
h1 {
color: red;
}
.room_image {
width: 25%;
height: 25%;
visibility: hidden; /* Here the image will be invisible */
}
Javascript:
function showImage() {
// Make the image element visible (JQuery is supported)
$( "img" ).css("visibility","visible");
}
Translation for English:
HeaderText=Hello world
ParagraphText=This is a test page
The content is processed and displayed on the homepage as in the image shown below:
On the Translations tab you can provide translations for each language.
The format is "key=translation" separated by new lines. Example: HeaderText=Hello world.
You can use the key as a macro in the HTML or JavaScript tabs. The syntax for the macro should be [&key]. Example: [&HeaderText]. The macros in the HTML and JavaScript tabs will be replaced with the translations belonging to the language of the logged in user.