Create custom widgets

[Lansweeper]

The easiest widgets to make are those that simply show data, like the output of a SQL query, and don't require any input from the user. In this first example we will give a small example of how to make a small widget and how to add it to the website.

In order to make a widget, you first needs to create (or copy) an aspx-page in the appropriate website folder, being /WidgetsCustom/.

The first part of the aspx-file should always look something like this:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="LS.BaseControl" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="LS.Enums" %>
<%@ Import Namespace="LS" %>
<% Response.CacheControl = "no-cache";%>
<% Response.AddHeader("Pragma", "no-cache"); %>
<% Response.Expires = -1; %>
<% LS.User.Current().CheckUserWebsiteAccess(); %>

Next is the look up of data we want to show. For example if we want to show all the existing asset groups and the amount of assets assigned to each group, we can use this line of code:

var dsAssets = DB.ExecuteDataset("SELECT tblAssetGroups.AssetGroup, tblAssetGroups.AssetGroupid, COUNT(tblAssetGroupLink.AssetID) AS Count FROM tblAssetGroups INNER JOIN tblAssetGroupLink ON tblAssetGroups.AssetGroupID = tblAssetGroupLink.AssetGroupID GROUP BY tblAssetGroups.AssetGroup, tblAssetGroups.AssetGroupid");

All we need to do then is check if any data was gathered and if so show it in for example a table:

if (dsAssets.Rows.Count != 0)
{%>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<% foreach (DataRow myrow in dsAssets.Rows)
{%>
<tr>
<td align="left" valign="top">
<%:myrow["AssetGroup"]%>
</td>
<td align="right" valign="top">
<%:myrow["Count"]%>
</td>
</tr>
<% }%>
</table>
<%}%>

Next to showing data we can also show images or links to other pages, which make the widget more agreeable to look at and add some more functionality. You can use images which already exist in the /images/ folder, or add images of your own to the /WidgetsCustom/images folder.

To then use an image in the widget you simply need to provide the correct path in an image tag. Keep in mind that all paths need to contain the prefix "<%=ResolveUrl("~/")%>" . If we wanted to add an image in front of each row in our table, we could add this piece of code to our table-row:

<td width="10" align="left" valign="top">
<img src="<%=ResolveUrl("~/")%>images/tag_green.png" width="16" height="16" hspace="2" vspace="2" />
</td>

A good link for this widget would be one that links to the page where asset groups can be added and assets can be added or removed from these groups. Keep in mind that since only certain people may make adjustments to asset groups, the web-role of the current user should be checked before showing this link.

<%if (LS.User.Current().IsInRole(Permission.EditConfiguration))
{%><div style="float:right">
<a href="<%=ResolveUrl("~/")%>configuration/AssetGroups/" class="sml">config</a>
</div><% } %>

A more advanced link would be one that links to a report with all assets in a certain group. To do this we require the DBobject "web50getassetgroups" and the id of the asset group.

<td align="left" >
<a href="<%=ResolveUrl("~/")%>report.aspx?det=web50getassetgroups&@assetgroupid=<%:myrow["AssetGroupid"]%>&title=Assets in group <%= HttpUtility.UrlEncode(myrow["AssetGroup"].ToString()) %>"><%: myrow["AssetGroup"] %></a>
</td>

There are still some more things we can do to improve our simple widget, like changing the title displayed on top of the widget and make the widget refresh every few seconds. This last option is useful when data changes a lot, and is used in for example the scanning status widget.

<script type="text/javascript">
$('#WTitle<%=TabControlID %>', window.top.document).text("Just a simple test widget");
</script>

In order for the autorefresh to work, we had to inherit LS.BaseControl in the heading.

<%=AutoRefresh(10) %>

Putting it all together gives us the following:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="LS.BaseControl" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="LS.Enums" %>

<%@ Import Namespace="LS" %>

<% Response.CacheControl = "no-cache";%>

<% Response.AddHeader("Pragma", "no-cache"); %>

<% Response.Expires = -1; %>

<% LS.User.Current().CheckUserWebsiteAccess(); %>



<%var dsAssets = DB.ExecuteDataset("SELECT tblAssetGroups.AssetGroup, tblAssetGroups.AssetGroupid, COUNT(tblAssetGroupLink.AssetID) AS Count FROM tblAssetGroups INNER JOIN tblAssetGroupLink ON tblAssetGroups.AssetGroupID = tblAssetGroupLink.AssetGroupID GROUP BY tblAssetGroups.AssetGroup, tblAssetGroups.AssetGroupid");



if (dsAssets.Rows.Count != 0)

{%>

<table width="100%" border="0" cellpadding="0" cellspacing="0">



<% foreach (DataRow myrow in dsAssets.Rows)

{%>

<tr>

<td width="10" align="left" valign="top">

<img src="<%=ResolveUrl("~/")%>images/tag_green.png" width="16" height="16" hspace="2" vspace="2" />

</td>

<td align="left" ><a href="<%=ResolveUrl("~/")%>report.aspx?det=web50getassetgroups&@assetgroupid=<%:myrow["AssetGroupid"]%>&title=Assets in group <%= HttpUtility.UrlEncode(myrow["AssetGroup"].ToString()) %>"><%: myrow["AssetGroup"] %></a></td>

<td align="right" valign="top">

<%:myrow["Count"]%>

---

Was this post helpful? Select Yes or No below!
Did you have a similar issue and a different solution? Or did you not find the information you needed? Create a post in our Community Forum for your fellow IT Heroes!
More questions? Browse our Quick Tech Solutions.

---