Monday, December 24, 2012

Continuing from part 1 (here) ...

Building the component

Using Component Wizard, we will start a new component.

This component will be named “WCC_Interface_Branding”. The main requirement of a component name is that it be unique to the system. I usually prefix a component with the name of the customer, such that for aurionPro SENA, the component could be named “APS_Interface_Branding”. Using this convention, all custom components created for aurionPro SENA would be prefixed with “APS_” to distinguish them as created for aurionPro SENA.

For this component we will need five resources:

1.Resource – HTML Include

2.Resource – Static Table (HTML Format)

3.Template

4.Resource – default cs_string include

5.Resource – Strings – English cs_strings

Using the Component Wizard, create each of these as follows

Type of Resource

File Name

Load Order

HTML Include/String

resources/wcc_interface_branding_resource.htm

10

Static Table (HTML Format)

resources/wcc_interface_branding_static_tables.htm

10

Template

templates/wcc_interface_branding_template.hda

10

HTML Include/String

resources/lang/cs_strings.htm

10

HTML Include/String

resources/lang/en/cs_strings.htm

10

The first string resource is for the default language strings while the second holds the English version of the strings. Since the default is English, the English file is empty. It is needed only to prevent errors.

Strings

The string we want to add is the component description string. In Component Wizard,

1.Select the resources/lang/cs_strings.htm resource on the left

2.Select the Launch Editor… button on the left.
If you have not configured and editor you will get an error indicating this. If you get the error then select the Options menu and select Set HTML Editor. In Linux I set this to /usr/bin/gedit.

3.When you created the resource, a sample string was added. You can delete that.

4.Add the following within the body tags:

<@string csCompDesc_WCC_Interface_Branding@>

The WCC_Interface_Branding component alters

the web interface to change the out of the

box logo to a custom logo.

<@end@>

5.Save and close the editor

Now edit the English string file to simply state that it is a dummy file.

1.Select the resources/lang/en/cs_strings.htm resource on the left

2.Select the Launch Editor… button on the left.
If you have not configured and editor you will get an error indicating this. If you get the error then select the Options menu and select Set HTML Editor. In Linux I set this to /usr/bin/gedit.

3.When you created the resource, a sample string was added. You can delete that.

4.Add the following within the body tags:

<@string csCompDesc_WCC_Interface_Branding@>

The WCC_Interface_Branding component alters

the web interface to change the out of the

box logo to a custom logo.

<@end@>

5.Save and close the editor

Templates

Now add the templates. In Component Wizard,

1.Select the template resource on the left,

2.Then select the add button on the right to add a new template.

3.Since the templates we need are out of the box templates that we will modify, we need to select them from the dialog rather than recreate them. So in the AddIntradoc Template dialog, select the Select button.

4.Check the box to Show All.

5.Locate and select the TOP_MENUS_LAYOUT_JS template and then select OK
Note that you can sort this list by selecting the column heading.

Repeat the process to select the TRAYS_LAYOUT_JS template

The next step is to edit the templates. Select the TOP_MENUS_LAYOUT_JS template on the right and select the Launch Editor… button on the right.

It is always a good habit to include notes in your work to help others that come after you. At the top of this file I included a comment of

Next we have to set up the publish source for the component. This involves file system work as well as component wizard work. First the file system: open your file browser or terminal. Browse to the custom directory of your instance. For me, that is

Here you will find the directory for your component - WCC_Interface_Branding

Change into this directory.

Now create a directory structure that mimics the srcPath of the WCC_Interface_Branding_PublishedWeblayoutFiles table we created above. Into each bottom level directory, place our sena.gif file. When you are done it should look like the following