Add portal widget to Dashboard

Some time ago I was working on custom functionality for a dashboard. The way to go, was to use the AngularJS features. However, my standard UI Page setup for an angular didn't work here. Also, using ngCloak and angular.bootstrap didn't solve my issues.

My solution was:

1) create a standard portal widget with page (myWidget)-- add all my logic here

2) create a new UI Page (myUIpage) which I use as a container to display a portal page (myWidget)

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
 <style>
        #preview{
            text-align: center;
        }
 </style>

     <div id="preview">     
       <iframe height="500" width="850" scrolling="no" src="/$sp?id=myWidget" />
    </div>
</j:jelly>

3) add my UI Page to a Dashboard widget 

function sections() {
    return {
		'SP Widget': {'name': 'myUIpage'}	
    };
}

function render() {
    var name = renderer.getPreferences().get("name");
    return renderer.getRenderedPage(name);
}

function getEditLink() {
    return "sys_ui_page.do?sysparm_query=name=" + renderer.getPreferences().get("name");
}

4) place a Dashboard widget on a Dashboard

and—voilà!— I got widget with nice AngularJS functionality  🙂