【Publisher】Try adding an Excel download icon to a web report

# Introduction #
Sharperlight Publisher is an end-user application designed to facilitate the creation of tables, charts, and visualizations on a web browser based on dynamically extracted data from your preferred data sources. 
Today, we will explore how to add an icon for downloading what has been created as a table in a Microsoft Excel file, and also adjusting its size and position.

# Creating a Web Report #
Launch the **Publisher** from the Sharperlight application menu.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f46486da-5bf2-8c17-09ca-82bc297faf9d.png)
Once the Publisher is launched, initiate the creation of a web report by clicking `New` button.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4dc21ffc-eb4b-c13a-9480-d845c8f882af.png)
First, enter the **Code**, **Group**, **Title**, and **Report Title**. The combination of **Code** and **Group** will serve as a unique identifier for this report.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/14ff8c19-26ee-08d3-d319-ef126425febc.png)
Next, create the core query for the report. Launch the **Query Builder** by clicking on the `Edit Query` button.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9bebc369-1535-2cbe-96b5-e9db7a5aa800.png)
In the Query Builder, you will utilize an existing database. Sharperlight generally communicates with database through a datamodel, referred to as `Product`. Here, in the filter area, specify which datamodel to connect to under `Product`.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/072bd467-f577-f35e-d5ec-2e3c66a61ebd.png)
Once the datamodel is specified, you gain access to each table defined within that datamodel. In the `Table` section of the filter area, choose the table you want to use from the list.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9245fdf5-5feb-115d-407e-6dd2911c00a2.png)
When the table is specified, the columns belonging to that table and JOIN information will be displayed in a tree format in the selection area.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4634684b-36da-be76-078d-78a9cdeaa6a9.png)
You will now select which columns' data to output from the displayed columns in the selection area. Double-click or drag and drop the desired columns to the output area.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c41cb08c-7581-076d-9ff5-ee963bf238a9.png)
Additionally, you can set filter items by dragging and dropping them into the filter area. For this instance, you specified **Order date** as the filter.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/100daa06-94d0-ee53-6906-06131045bf2e.png)
The item **Total Amount** at the bottom of the output area does not exist in the selection area. This is called an **Expression**, one of the extended options provided by Sharperlight. Here, you are defining an expression `Unit Price` x `Quantity` to calculate the total amount.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/af03fcb7-4603-3a54-cc02-d0e25dafa08e.png)
Verify the query by clicking the `Preview` button. If data is displayed, then it is considered successful.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5caed3c5-ef34-a0af-ff32-715cd9c3aaf1.png)
Return to the query definition screen by clicking the `Back to Query` button, and then save the query by clicking the `OK` button.

Next, navigate to the `Options` tab. Ensure that the `Default Type` is set to **Table**.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ca14665c-6d67-b9c4-898a-2f5c50cee826.png)
Leave the various other options as default and click the `OK` button to save the web report.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/cba158f5-bfab-05ac-0334-f0a1c0c0fb72.png)

Launch the **Sharperlight Service** either from the Sharperlight application menu or through the Windows service dialog. 
From the application menu, if available.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d96d03f3-c670-09b3-5245-35ba8689b837.png)
From the Windows Service dialog.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ca10e7b6-3f8a-7c89-fd3a-7c8234ce4a9b.png)
Return to the Publisher, select the report you created earlier, and execute **View Report** from the right-click menu.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7ea1283e-eaa7-95bf-f997-c661704f30e0.png)
The default browser will display a table like this. The columns you set in the filter area of the Query Builder are shown at the top of the report.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4942f51a-4004-3e93-0e77-e3ae2944aea1.png)
That completes the basic setup for the web report.

# Displaying Icons #
Now, let's add the Excel download icon. Go back to the Publisher and open the definition of the web report you created earlier. Move to the `Options` tab, and at the bottom right, check the **Icon Excel** checkbox to turn it **On**.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c1dabe11-71cc-015b-af1b-4bc45351d304.png)
Save the definition of the web report with the `OK` button, and refresh the displayed report in the browser with the F5 key. An Excel icon should now appear in the corner. Clicking on it will download the displayed information as an Excel file.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b4cbd75f-eafb-2e09-f4e9-f9f08bcf112e.png)

# Decorating the Icon #
"**But the icon is small; I want it to be bigger.**" If you think that, you can use CSS for customization. Return to the Publisher, open the definition of the web report again. In the `Options` tab, about halfway down, turn on the **Custom Styles, CSS** option.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d2904bca-aa46-b414-a9a9-8bbc99c2cf2c.png)
Open the editor by clicking on the `Edit` button, and paste the following CSS syntax. (This is just an example.)
```
<style type="text/css">
.k-i-excel {
    font-size: 40px;
    margin-right: 50px;
}
</style>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f95b01ab-db1c-f45b-1e00-588ce7b26a4c.png)
Save the changes, refresh the report again, and you should see the icon displayed larger as per the custom CSS.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0579a7c6-b736-dccb-5708-3e9c21c707ea.png)

You can use the browser's developer tools to inspect and find class names or IDs for elements like icons. Then, you can apply custom styles or decorations to enhance their appearance. Keep in mind that in some cases, customization might be limited by the application or platform.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/60bb737c-9487-4ad8-0837-e328ba6eaea7.png)

# Conclusion #
Web reports created with Sharperlight are essentially standard HTML pages with CSS. As demonstrated, you can customize them freely, adjusting sizes, positions, and more as needed. Feel free to explore and try out different modifications.
Once again, keep in mind that in some cases, customization might be limited by the application or platform.