Example: Creating a custom iframe page in the Cireson Portal

Joe_Burrows

I recently received a support ticket where I was asked for an example on how to create an iframe page in the Cireson Portal. Thought I would also post here as a working example in case it helps anyone else. Kudos to @john_doyle for creating this and sharing with me.

An iframe is a way to embed another source on a page to give a "single pane of glass". I often see customers use iframe as a way to link to other share point or intranet pages within their deployment of the portal. 

Currently there is two ways to achieve this: 

1. Use a SQL insert 
2. Create a view in the customspace\views folder and create the viewpanel in the customspace\views\viewpanels folder

Example 1: Creating the page using SQL insert method

Run the below SQL query against the ServiceManagement database: (Changing the URL and Menu Title to what you want)

--use a GUID generator to create some new guids for your view panel and navigation node.  NOTE: All guids must be completely lower case.
DECLARE @NavNodeGuid nvarchar(255)       = '2ba079a5-b334-4555-8ec0-ce842d7c4d77' 
DECLARE @ViewPanelGuid nvarchar(255)     = 'e850513d-10f3-4941-af8b-511ec14171f9'

-- replace these values with what you want
DECLARE @Url nvarchar(max)               = 'http://cireson.com/cireson-platform/'
DECLARE @MenuTitle nvarchar(255)         = 'Cireson Platform'
DECLARE @Locale nvarchar(3)              = 'ENU'         
                                                    
--this just deletes it if it already exists so that you can iteratively tweak it and recreate it easily
DELETE FROM DisplayString WHERE ElementID = @NavNodeGuid and LocaleID = @Locale
DELETE FROM NavigationNode WHERE Id = @NavNodeGuid
DELETE FROM ViewPanel WHERE id = @ViewPanelGuid

--this creates the navigation node display string
INSERT INTO [dbo].[DisplayString]  (ElementID, LocaleID, DisplayString) 
VALUES (@NavNodeGuid, @Locale, @MenuTitle)

--Create the navigation node.
--This example creates a navigation node with only one row/one column with a single view panel
INSERT INTO NavigationNode(Id, [Definition], Ordinal, Sealed, IsPublic, IsVisible, LicenseRequired, IconClass)
VALUES (
@NavNodeGuid, 
'{"Id":"' + @NavNodeGuid + '","layoutType":"full","view":{"header":{"title":"","subTitle":""},"body":{"content":{"rows":[{"columns":[{"ColSpan":12,"type":"viewPanel","ViewPanelId":"' + @ViewPanelGuid + '"}]}]}}}}',
0,0,0,0,NULL, 'fa fa-briefcase')

--Create the view panel
--This example defines a type=HTML view panel that fills up the entire view panel port and embeds an iframe pointed at the URL specified.  
--You can include HTML using an iframe like this example or you can hard code any HTML/Javascript in the view panel content attribute.
INSERT INTO ViewPanel(Id, [Definition], TypeId)
VALUES (
@ViewPanelGuid,
'{"id":"' + @ViewPanelGuid + '","type":"html","content":"<style>.embed-container {position: relative;top: -70px;}.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: -25px;width: 100%;height: 500px;}</style><script>$(window).resize(function () {$(''#' + @ViewPanelGuid + ''').css({ height: $(window).height() - 80, width: $(window).width() - 60 });});</script><div class=''embed-container''><iframe src=''' + @Url + ''' style=''border:0;'' onload=''(function (e, obj) { obj.style.height = ($(window).height() - 80) + \"px\"; obj.style.width = ($(window).width() - 60) + \"px\"; })(event, this)'' id='''+ @ViewPanelGuid + '''></iframe></div>"}',
'html'
)

Then in the portal Navigation settings make the page visible and public (Or target the desired AD groups)





More information in KB: https://support.cireson.com/KnowledgeBase/View/1245#/

Example 2: Create the view and viewpanel in the customspace folder

Copy the below text save as Cireson.js (or whatever-name.JS)to C:\inetpub\ciresonportal\customspace\views

{
	"Id" : "Cireson",
	"pageTitle": "Cireson",
	"layoutType" : "full",
	"view" : {
		"header" : {
			"title" : "",
			"subTitle" : ""
		},
		"body" : {
			"content" : {
				"rows" : [{
						"columns" : [{
								"ColSpan" : 12,
								"type" : "viewPanel",
								"ViewPanelId" : "CiresonViewPanel"
							}
						]
					}
				]
			}
		}
	}
}

Copy the below text save as CiresonViewPanel.js to C:\inetpub\ciresonportal\customspace\viewpanels

{
	"id" : "CiresonViewPanel",
	"TypeId" : "html",
	"Definition": {
		"content" : "<style>.embed-container {position: relative;top: -70px;}.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: -25px;width: 100%;height: 500px;}</style><script>$(window).resize(function () {$('#CiresonTvViewPanel').css({ height: $(window).height() - 80, width: $(window).width() - 60 });});</script><div class='embed-container'><iframe src='http://cireson.com/cireson-platform/' style='border:0;' onload='(function (e, obj) { obj.style.height = ($(window).height() - 80) + \"px\"; obj.style.width = ($(window).width() - 60) + \"px\"; })(event, this)' id='CiresonViewPanel'></iframe></div>"
	}
}

Now when navigating to /view/cireson the page will show:



Then you can add as a new link in the navigation and target the custom page:



Or instead of creating as a Nav node URL link create as a direct link in an ARO so the page appears on your service catalog:

Jonathan_Boles

Hi @Joe_Burrows, thanks for providing this! Excellent resource that should come in handy!!

Joe_Burrows

No worries at all Jonathan

Tyson_Arzt

I am going to semi-hijack this thread and ask if it is possible to embed the Cireson Portal into someone else's page?

For example if we have a company landing page and we wanted to embed the Cireson Portal into that would we be able to?

Thank you!

David_Allen

Thanks Joe, I always used the SQL option previously, but would you say using the CustomSpace folder would be the preferred option so it doesn't get wiped on major portal upgrades?


Also, is there an option to size the page appropriately if the link is on a charm fly out?  I have found the page goes off the right hand side of the browser window by the same amount of space the fly out consumes.

David

Joe_Burrows

Tyson_Arzt said:

I am going to semi-hijack this thread and ask if it is possible to embed the Cireson Portal into someone else's page?

For example if we have a company landing page and we wanted to embed the Cireson Portal into that would we be able to?

Thank you!

Hi Tyson

You should be able to if you can iframe it in the other page.

David_Allen said:

Thanks Joe, I always used the SQL option previously, but would you say using the CustomSpace folder would be the preferred option so it doesn't get wiped on major portal upgrades?


Also, is there an option to size the page appropriately if the link is on a charm fly out?  I have found the page goes off the right hand side of the browser window by the same amount of space the fly out consumes.

David

Hi David

Not sure on the size option. Id say the custom space is preferred as its easier to maintain. However if using SQL it should not wipe if you have sealed set = 0 like the bold:

--This example creates a navigation node with only one row/one column with a single view panel

INSERT INTO NavigationNode(Id, [Definition], Ordinal, Sealed, IsPublic, IsVisible, LicenseRequired, IconClass)
VALUES (
@NavNodeGuid, 
'{"Id":"' + @NavNodeGuid + '","layoutType":"full","view":{"header":{"title":"","subTitle":""},"body":{"content":{"rows":[{"columns":[{"ColSpan":12,"type":"viewPanel","ViewPanelId":"' + @ViewPanelGuid + '"}]}]}}}}',
0,0,0,0,NULL, 'fa fa-briefcase')

David_Allen

Hi Joe, I read that on another post about the sealed value.  Good to know that unsealed (0) will not be affected by upgrades

Thank you!

Sophia_Tomtlund

Hi Joe.
I am using the example 2, but when resizing the browser window, the iframe won't update until i press F5.

Any idea for solution?

Joe_Burrows

Sophia_Tomtlund said:

Hi Joe.
I am using the example 2, but when resizing the browser window, the iframe won't update until i press F5.

Any idea for solution?

Hi Sophia

Unfortunately I dont have a solution for this apart from F5 when resizing the window.

Regards
Joe

Joe_Burrows

+ Example 2 updated with the iframe example linked from an ARO direct link from @Chris_Keander feature request listed below:

https://community.cireson.com/discussion/1658

Chris_Jordan

Is there common security implications when using iFrames and some specific sites? I seem to get some examples working but not most of the cloud sites I use.

Sebastian_Hansen

Hey. Thank you for excellent example. Quick question, I'm using example 2 and the changes do not seam to take affect. When debugging I tried edited the example files supplied with the portal (view/view-example), changes here are not applied as well. When editing the custom.css changes are instant.

Do I need to restart the server for the config and templates to load?

Sebastian_Hansen

Joe_Burrows said:

Sophia_Tomtlund said:

Hi Joe.
I am using the example 2, but when resizing the browser window, the iframe won't update until i press F5.

Any idea for solution?

Hi Sophia

Unfortunately I dont have a solution for this apart from F5 when resizing the window.

Regards
Joe

Try attaching a resize event handler and have your resize function be triggered by this: https://developer.mozilla.org/en-US/docs/Web/Events/resize

Word of caution: Events like this will trigger on every change to the window size (in some browsers even while resizing), so be mindfull of stacking. Re-calculating sizes of iframes will triggers the the draw engine in your browser and recalculation of the DOM, a cpu/gpu heavy operation which might affect the usability of your product (especially on mobile devices) - maybe a mute point since the window is actually being scaled, but something to be mindful of noen the less.

In general, I would recommend looking into metrics on how often your users actually rescale the window, before over engineering a solution like this.

Sebastian_Hansen

Sebastian_Hansen said:

Hey. Thank you for excellent example. Quick question, I'm using example 2 and the changes do not seam to take affect. When debugging I tried edited the example files supplied with the portal (view/view-example), changes here are not applied as well. When editing the custom.css changes are instant.

Do I need to restart the server for the config and templates to load?

Solved this, there were two issues:

1. The local cache was persistent even with hard reset: Keep calm and empty cache.
2. The URI mapping is a direct referral to the JS-file in the view folder, not the ID used in the config for that file: Name you JS-file to whatever your path will be.