Home Cireson Uploads

Example: Creating a custom iframe page in the Cireson Portal

Joe_BurrowsJoe_Burrows Cireson Devops Super IT Monkey ✭✭✭✭✭
edited December 2016 in Cireson Uploads
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:







4.png 143.9K
6.png 24.1K
7.png 209.3K

Comments

  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    Hi @Joe_Burrows, thanks for providing this! Excellent resource that should come in handy!!
  • Joe_BurrowsJoe_Burrows Cireson Devops Super IT Monkey ✭✭✭✭✭
    No worries at all Jonathan :)
  • Tyson_ArztTyson_Arzt Customer IT Monkey ✭
    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_AllenDavid_Allen Partner Advanced IT Monkey ✭✭✭
    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_BurrowsJoe_Burrows Cireson Devops Super IT Monkey ✭✭✭✭✭
    edited November 2016
    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.

    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_AllenDavid_Allen Partner Advanced IT Monkey ✭✭✭
    Hi Joe, I read that on another post about the sealed value.  Good to know that unsealed (0) will not be affected by upgrades :smile:

    Thank you!
  • Sophia_TomtlundSophia_Tomtlund Customer IT Monkey ✭
    edited November 2016
    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_BurrowsJoe_Burrows Cireson Devops Super IT Monkey ✭✭✭✭✭
    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_BurrowsJoe_Burrows Cireson Devops Super IT Monkey ✭✭✭✭✭
    + 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_JordanChris_Jordan Customer Adept IT Monkey ✭✭
    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_HansenSebastian_Hansen Customer IT Monkey ✭
    edited September 2017
    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_HansenSebastian_Hansen Customer IT Monkey ✭
    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_HansenSebastian_Hansen Customer IT Monkey ✭
    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.
Sign In or Register to comment.