【Publisher】Branding with Custom Headers, Styling and Images

# Introduction #
Sometimes you would like to create your business web reports and customise them for branding so that the web reports or its login screen would have your company logo and the corporate colors.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1fcbc364-081a-299e-7b41-72737d917df3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1d01768b-5471-3e06-924c-432f74fc8420.png)

I tried to customise my reports so I will explain what I have done here.
There is also a page [here](https://www.sharperlight.com/datamodel-development-studio/2018/02/19/web-channel-branding/), where this branding customisation is explained by Sharperlight Software.

# Customisation #
### Resources ###
We have to prepare those things listed below;
+ Folder
+ Two HTML files
+ An Image
+ favicon.ico

Then the `two HTML files`, the `image` and `favicon.ico` must be placed in to the folder mentioned here.

#### Folder ####
This is the folder where HTML files, image and favicon are stored in.
The folder name must be **Costom**, and needs to be created under;
```
C:\ProgramData\SharperLight\MetaData\
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1995da59-d1b7-1a9b-20fa-feb34a54ed12.png)

#### Two HTML Files ####
They are branding files for the login screen.
One is for the header and it must be called as **UserLogonHeader.html**, the other is for its body and must be called as **UserLogonBody.html**.
This is the example of the contents for the header HTML, and it has the styling definition only.
```
<style>
h2 {
	background-color: #AD7207;
	background-image: none;
	color: #AD7207;
	width: 790px;
	margin-top: -2px;
}
#grLogon.k-widget, #grLogon.k-content {
	background: #D8BEBD !important;
	width: 800px;
	color: white;
}
.slTitle{
	color: white !important;
}
</style>
```
The style is applied here.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e8a0a448-1274-7e8b-b958-ebe802f29fcc.png)

Then, this is the contents for the body HTML, and it has a logo for the login screen.
```
<img src="File/Custom/Qiita Branding Sample Logo.jpg" style="width: 800px; height: 139px" >
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1cbe0332-6cb7-84d5-ae71-4ae423b5b27b.png)

#### An Image ####
This is basically a company logo.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5e16aeff-ba10-6251-c157-518d9946ae6a.png)
I prepared this image and saved as "Qiita Branding Sample Logo.jpg" into `...\Custom\` folder.

#### favicon.ico ####
This is a small image which will override the icon that is displayed on the tabs and when a shortcut is created to the web page.
I created a sample ico like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5e5a17a5-cc10-589c-1060-e7eeb594f796.png)
It is shown on the tab.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7a997bbe-0d1e-ae3c-e28c-f8e513369e69.png)

### The Usage ###
The two HTML filses mentioned above are automatically picked up, and are used by Sharperlight.
Then we have to specify the use of the image (logo) in the Header section of each published reports.
#### Header of the report ####
We can find the Header customise option here when we create a pubished report.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/694a2cd2-69d4-f786-9846-814e25a345fe.png)
It has a sample header definition when we open the editor first time, and the simplest way to create your own header is just replacing the image file path specified here.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/793a8d14-d6e2-45ba-f4d1-b2f1835d90b1.png)
I replaced the file path like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2e5d89d6-ce70-a919-57fd-682e5544e652.png)
```
'File\Custom\Qiita Branding Sample Logo.jpg'
```

:::note warn
Note
The sample header definition is written between these special tags.
```
<!--ReportPromptSectionBegin-->
...
...
<!--ReportPromptSectionEnd-->
```
It means that the header definition is placed in the prompt area, so it works only when your report has prompt area.
This is the prompt area talking about here.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/885aa7f3-ff55-a270-c6ee-131e8b8242e5.png)

We can remove those tags so that the custom header would be displayed regardless the report has the prompt or not.
:::

#### The use of resource option ####
The custom header code was directly written into the header option as mentioned above. 

You may think that we have to place the same code for other reports, and we have to update all of them one by one, once update is required.

We can avoid it by using **Resources** option.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/53d55e8a-d3a1-ec94-cce1-45bbf050efea.png)
We create a HTML file with the custom header definition, and import the file as a resource here.
Then we can set the reference code to the resouce into the header option.

I created a HTML file like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/551b2724-22d6-4b04-c547-6621353ce5bf.png)
Then impoted it as a resouce, got a reference code.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b46a83a7-488b-5dc9-0bc1-1870dfd63839.png)
The reference code was pasted into the header editor like this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/64051dbf-1d35-cd9d-8e45-d378f13aa2a9.png)

# Conclusion #
I think Branding gives the higher quality and reliability to your business reports and we can do it with Shaperlight without big efforts.

As a sample, another custom header.
```
<div style="padding:0 0 0 5px;margin:0;margin-bottom:0px;margin-top:0px;background-color:white;color:#404040;">

    <table style='margin: 0;padding: 0'>
    <tr>
        <td style='margin: 0;padding: 0;'>
            <img src='File/Custom/Qiita Branding Sample Logo_Rs.jpg' title="{*Dictionary.Code.Version} {*Application.Version}" height='90' width='338' style="border-style: none" />
        </td>
    <tr>
    </table>

</div>
    
<button class="cbutton button1" onclick="window.open('{*Url.Root}Report/?query=QiitaSample.ReportA&usid={_System.Rest.Usid}','_parent')">Report A</button>
<button class="cbutton button2" onclick="window.open('{*Url.Root}Report/?query=QiitaSample.ReportB&usid={_System.Rest.Usid}','_parent')">Report B</button>
<button class="cbutton button3" onclick="window.location.reload()"></button>
```

CSS option is used as well.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/dbff6aff-e736-7fe4-37d5-8e0b0dd1e550.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/bd34170b-d3a8-4dee-c78d-8d1706e23180.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c3c65b90-b377-08bc-6adc-c1f52c7e23b7.png)