How to automatically refresh your Dynamics 365 Dashboard in UCI

Procedure:

1. Create an html web resource and add the following script in it:

<html><head>
     <title></title>
     <script type="text/javascript">

         // add visual timer just because we can
         var d = new Date();
         document.write(d.toLocaleTimeString());

         // refresh parent (dashboard) every 30 seconds
         // (timeout is in milliseconds)
         setTimeout("window.parent.document.getElementById('RefreshDashboard').click();", 30 * 1000);
     </script>
   <meta><meta><meta><meta><meta></head>
   <body>
</body></html>

2. Add the html web resource to a dashboard.

3. Click on “Edit Component” and make sure the web resource’s “Visible By Default” property is unchecked.

Explanation:

On the dashboard, there is a button called “Refresh Dashboard”. The ID of this button is RefreshDashboard. The script above clicks this button every 30 seconds. You can change the button to put in another value for seconds.

Filed under: Blog

Structured Content: Creating a template for Open Content

Open Content is a great tool giving inexperienced users a simple solution to maintaining small amounts of content.

Consider the scenario; you build a nice new website for a client who has no technical knowledge of websites. On launch day it is pixel perfect and the client is happy, hopefully. A couple of days later you get a call to say the website is broken. You go to the website and discover that the user has edited an HTML module, in source mode of course, and removed some mark-up; what a mess. All he wanted to do was add another line in a table.

How much easier would it be if all he had to do was click a + icon, enter the text he required into a nice form and click save? That is where Open Content helps and here I will show how to create such a template.

Requirement

Create a template to allow a website admin to build a tabbed element with a table on each tab. Each table will consist of rows containing columns for Description and Dates.

Template

Open Content does not, at this time, have a template to achieve this. However, it does have a template for tabs. We can use this template as the basis for a new template.

Start by placing an instance of Open Content on a page. It should look like:

Choose Create a new template, marked in yellow above.

Give your new template a name and click Save.

Schema

A schema is what drives Open Content. The schema defines your data structure. In this example, the schema contains a Module Title and an array of Tabs. Each Tab contains a table with an array of RowItems. Each RowItem consists of two columns, Description, and Dates.

Open Content uses JSON notation to define a schema. The schema for the example is shown below.

{ “type”: “object”, “properties”: { “ModuleTitle”: { “title”: “Module Title”, “type”: “string” }, “Tabs”: { “type”: “array”, “items”: { “title”: “Tab”, “type”: “object”, “properties”: { “tabName”: { “title”: “Tab Name”, “type”: “string” }, “RowItems”: { “type”: “array”, “items”: { “title”: “Row Item”, “type”: “object”, “properties”: { “description”: { “title”: “Description”, “type”: “string” }, “dates”: { “title”: “Dates”, “type”: “string” } } } } } } } } }


Quite often errors in Open Content are the result of incorrectly formed JSON. Usually a missing { or }. A useful site for checking a schema is https://jsonlint.com/

To edit a schema choose Edit Template Files from the module’s Actions menu.

Because a new template was created from an existing BootstrapTabs template the schema will need to be updated. Copy the schema above and paste it into the Schema text box. Click Save.

Building a Template

The next step is to build a template that will be used to display the data. Select Template from the dropdown. Once again the template shown will be for BootstrabTabs and will need to be updated to reflect the new schema.

The surrounding pair of {{#each Tabs}}  …  {{/each}} will loop through the data and for each Tab will insert a li with tabName from the schema.

Note: Because this template was created by copying an existing template there is an important change required. The original template BootstrapTabs had a Layout option of Tabs or Pills. This is used in the template to set a class of nav_tabs or nav-pills depending upon the setting. This can be seen on the ul tag as class=”nav nav-{{Settings.Layout}}s”. In the new template, only tabs will be used:

<div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        {{#each Tabs}}
      <li role="presentation" {{#if @first}}class="active"{{/if}} ><a href="#tab{{@index}}" aria-controls="tab{{@index}}" role="tab" data-toggle="tab">{{tabName}}</a></li>        
        {{/each}}
    </ul>

    <!-- Tab panes –>
    <div class="tab-content">

    </div>
</div>

Click Save & Close then click Edit Content to see the data entry form.

Enter a title for the module and then click the + icon to add tabs.

Enter a Tab name.

To add more tabs click the  icon just above the tab to the right. A UI of nested boxes shows the nesting of Row Items within Tabs.

Tabs and Row Items may be ordered using the and arrows.

Add Tab One, Tab Two and Tab Three and you should see

Next, add the HTML to the template for the table on each tab.

{{#each Tabs}} 
<div role="tabpanel" class="tab-pane {{#if @first}}active{{/if}}" id="tab{{@index}}">
    <div class="table-responsive">
        <table class="table">
	{{#each RowItems}}
            <tr>
		<td>{{Description}}</td>
		<td>{{Dates}}</td>
	    </tr>
	{{/each}}
	</table>
    </div>
</div>
{{/each}}

Once again {{#each Tabs}} is used to iterate through each tab in the array and within each tab {{RowItems}} is used to iterate through each row in the array of rows.

The result is a set of tabs with a table on each that makes life easy for site admins:

Further Reading:

https://alpacajs.org/

https://getbootstrap.com/components/#nav-tabs

https://handlebarsjs.com/

This article was written by Declan Ward on November 13, 2015 at 14:42. Since the original site is down, the intent of this article is to preserve content rather than copying it.

Filed under: Blog, DNN

How to switch queries in a select statement using filtering

I had a situation where I needed to change a SQL query altogether based on a parameter. So tried nulling and then using
COALESCE, IIF and CASE but they didn’t work all, I came up with a rather inefficient solution. It’s inefficient but I can
scale it for my small queries. The only quirk is that the output is the same, but that is to be expected if you’re try to
transfer data from a controller to a view.

Components:

Query1 and Query2 are two separate queries which output “num” and “person”.

@switchvalue is the parameter value you’re getting from a form or a querystring.

Query:

DECLARE @switchvalue INT = 1
    DECLARE @query1 TABLE (
    Num INT,
    Person VARCHAR(20)
    );
    DECLARE @query2 TABLE (
    Num INT,
    Person VARCHAR(20)
    );
    INSERT INTO @query1 (Num, Person)
    VALUES (0, 'John');
    INSERT INTO @query2 (Num, Person)
    VALUES (1, 'Rebecca');
    SELECT * FROM (
    SELECT 0 AS switch, * FROM @query1
    UNION ALL
    SELECT 1 AS switch, * FROM @query2
    ) a WHERE a.switch = @switchvalue

Filed under: Blog, SQLTagged with: , , ,

Mimic DNN theme to embed pages into Dynamics CRM

This is a theme you can install on DotNetNuke Community Edition to create pages which are embeddable in Dynamics CRM as web resources. There are a lot of open source tools available for DNN which can allow you to do quick web app building. Some of my favorite tools include the SqlViewPro and InjectAnything from RedTempo. Mix them all together and you got a great presentation tool you can use in Dynamics CRM Dashboards. Especially since CRM has Xrm.Page.context.getUserId() and DNN has the [User:Username] token.

It’s not a replacement for sophisticated BI tools but gets me to do some interesting stuff. So here it is.

Mimic – (Zip File)

Filed under: Blog, CSS, JS, SharePoint

Workaround for Transparent PNG Thumbnails in SharePoint Image Libraries

PNG files with transparency display the transparent bits as black instead of transparent in SharePoint image libraries. Since it’s been this way for years now, it’s unlikely Microsoft will fix the issue. Here’s a hacky workaround for when you really need it (like… when you have an icon library with black icons with transparent backgrounds).

sharepoint transparent png

Step 1 – Create Two Plain Text Columns

I like to call one LibURL and the other ImageURL. For LibURL, set the default to the URL of the library (sans forms/view.aspx) with no trailing slash (e.g. https://whatever.sharepoint.com/sites/sitename/libraryname).

Step 2 – Create a Workflow

I’m assuming you’re passably familiar with SharePoint workflows, if not head to Youtube and search for a beginner guide to SP2013 workflow. Create a list workflow on your image library and add the action “set field in current item” and tell it to set the ImageURL field to “Server-Relative URL”. Have it run when items are modified or created, and publish.

Step 3 – Create a Calculated Column

This calculated column will create the HTML needed to display our transparent thumbnails. This is the jankiest part, as it relies on the fact that calculated “number” columns in SharePoint render HTML. You could also set this with workflow instead (into a rich text column) if you’re worried about the reliance on a quirk, but calculated columns are kinda nifty. Set your data type to “number.” If you used the same column names as I did, your formula will be the following:

=CONCATENATE("<a href=",CHAR(34),[LibURL],[ImageURL],CHAR(34),"><img style=",CHAR(34),"max-width:80px;",CHAR(34)," src=",CHAR(34),[ImageURL],CHAR(34)," /></a>")

Step 4 – Fix your View

Image libraries default to the out-of-box thumbnail view. They should also create a second view called “all items” – this is a more typical list view. Head over to that view (or create a list view), enable your thumbnail column (the calculated one), move it to the first position, hide the image type icon (because it’s not super helpful), and try it out! Your new custom thumbnail should like to the full-size version of the image.

sharepoint custom png

This article was written by and originally posted by Christine Payton on her website christine-payton.com at this link.

Filed under: SharePointTagged with: , ,