Website facelift

In previous chapters we have described creation of the Documentation from the requirements definition, via solution design, page for users and page for article editor, to the migration from the original Documentation. In this article we will take a look, how to easily improve look of the ObjectGears pages, to which users are exposed.

ObjectGears is a large system that allows to create solutions without coding knowledge. For this purpose there are numerous pages used which are intended for solution creator and ObjectGears administrator. These pages are standardized and their look does not have to be customized. Pages to which the user is exposed to are, however, worth of facelifting to reflect on your organization or project style (Corporate identity). In this way also Documentation which you are now looking at can be adapted, same like any solution that you use or decided to implement in ObjectGears.

In comparison with original screens showed in the article Editor functionality, the new page in the screen below has a better overall design and contains sections with hierarchy of articles and article structure (titles), which can be packed.

How to procede with the facelift? You can do everything in few steps:

1. Address HTML designer
2. Discuss your needs and visions
3. Test the page provided by HTML designer
4. Implement in ObjectGears

Address HTML designer

If you have designer in your team or you already collaborate with a company that develops for you e.g. web pages and are satisfied with their work, you are done with this step. If you want to look for somebody else, there are numerous companies and individuals that specialize in design and coding. Ask them to show you their previous work in order you know whether similar style would work also for you.

We have created the new look of the documentation with  a designer that we worked with already in the past.

Specification of your needs and visions

We have shared our views with the designer and after some feedback and reflecting proposals by the designer, following list was created:

• overall design facelift
• adding a panel containing structure of the article for an easy orientation of users
• panels can be packed in order user can maximize the screen for reading the article
• the page is fully responsive

Testing all the pages provided by the HTML designer

The developer created mock-up HTML pages containing Lorem ipsum text, which we have tested in all the relevant browsers and various screen sizes. The readers should have an adequate comfort no matter whether they use mobile phone, tablet, notebook or a large screen. In this phase it is necessary to pay attention e.g. to:

• wrapping of texts in panels if their length exceeds panel size
• correct composition of all the parts of the page in various devices
• correct function of buttons for packing the panels
• testing all the functionality in various browsers after correcting the bugs in order any new bug that might have been introduced, when fixing a previous bug, is detected

Implementation in ObjectGears

We have tested the pages in an environment provided by the developer. Now we need to implement the pages in an ObjectGears instance. This can be performed in a separate test environment. However, if only appearance is concerned, it is possible to create a new page and just to display on it already existing information in a new way. We have used also this approach.

New page and redirection

We will create a new page in menu Administration / Models / Pages.

Current Documentation with the original look was running on the address https://doc.objectgears.cz/vcd. The new page has to be distinguished and therefore we will chose e.g. https://doc.objectgears.cz/vcd2.

Users accessing these addresses have to be redirected to corresponding ObjectGears pages. This setting is performed in a script in the application event „After application start“ (Menu Administration / System / Application events).
Following script sets one url redirect to a particular article for the previous Documentation.

var m = OG.Model.GetByCode('vcd');
var cp = OG.ContentPage.GetAll().GetByCode(m.Id, 'article');

var r = OGRoute.Create('vcd_an_v', 'vcd/{lang}/an/{an}/v/{version}', '~/WebContentpage.aspx');
r.AddPar( 'id', cp.Id.ToString());
r.AddPar( 'version', '');
r.AddPar( 'lang', '');
r.Use();

We have copied this code for our new page, changed the page code from article to article2, url from vcd to vcd2 and renamed variables. Then we have added the script extended in such a way at the end of the original script and performed application restart. The example below shows just one url redirect. The real script contains nine redirects.

var cp2 = OG.ContentPage.GetAll().GetByCode(m.Id, 'article2');
var r2 = OGRoute.Create('vcd_an_v2', 'vcd2/{lang}/an/{an}/v/{version}', '~/WebContentpage.aspx');
r2.AddPar( 'id', cp2.Id.ToString());
r2.AddPar( 'version', '');
r2.AddPar( 'lang', '');
r2.Use();

Page modifications consist of two parts. Modifications in the Page scheme and modifications in Scripts. You can see these settings in the ObjectGears page detail on particular tabs.

Modifications of the Page scheme

We will insert into this tab the text of the HTML template that was provided by the deigner, or to be more precise the content of the element BODY. We will insert into the places that we want to fill in with a script (e.g. menu, page content, icons for localization etc.) code according to the below pattern:

{{Text:Language}}

The first part of the given command (Text:) is static, the second part (Language) will be changed according to particular variable text places that we will have in the page. This second part is an identifier. Therefore, we have to use another name for each inserting of such a variable text place. In the script we will then insert corresponding content according to the following example:

OGControls['Language'].Text = '…our text…';

Content that we want to set according to the script, has to be removed form the scheme and {{Text:…}} is included instead of it. Otherwise, both original content Lorem ipsum from the designer and the newly by the script inserted code would be contained. When removing this content we have to pay attention not to remove something that should stay. Also closing tag should be removed. Otherwise, the page could be displayed incorrectly.

Modification of Page scripts

The script in the page is to find out what should be displayed to the user - search, search results, list of tags or particular article. Based on this it displays particular part of the page to the user. Our change consisting in facelift will keep vast majority of the script same. We have to modify just parts that are generating the side navigation menu, main horizontal menu, article content...Here a bit of coding is necessary because the modification depends on how the designer developed the actual HTML pages.

Localization in the page

In case that you have in the page texts, that should be localized according to the selected language, use the code according to the following example:

var s = OG.GetLocText('en-US::How can we help you?~de-DE::Wie können wir Ihnen helfen?~cs-CZ::Jak vám můžeme pomoci?');
OGControls['LocHowHelp'].Text = s;

Function OG.GetLocText selects from the input text just the text of the current language set up by the user.
Texts do not have to be directly in the page script but you can use the object Message:

OG.MessageLoc.GetText(…)

After a profound testing we can migrate from the original look to the new one and display it also to external users, who work with url containing .../vcd (not .../vcd2). We can do that by copying content of the tabs Scheme and Script from the page of the new Documentation to the page of the original Documentation.