Microsoft Dynamics 365 Blog

One of the key ways that you can integrate other web applications with Microsoft CRM is to use the Iframe control. When using Iframes to SharePoint Technologies pages you may want to remove the navigation and title bar chrome so that the document library has a more integrated appearance. Below are the steps I use to trim the chrome on Windows SharePoint Services v2 and SharePoint Portal Server 2003.


 


The first thing to do is to create a new view for your document library. By using a new view you can preserve the normal user experience when navigating the document library within SharePoint. This also provides for a tailored experience when integrated into Microsoft CRM.


 


 



         Figure 1 – Sections to Remove


 


Note: If you use “Split View” then saving the page will show the changes.


 


Creating a new view


 



  1. Navigate to the Document library
  2. On the left side click “Modify settings and columns”
  3. Scroll to the bottom of the settings page to the “Views” section
  4. Click “Create a new view”
  5. Choose “Standard View”
  6. Name the view and click OK to save (I usually name the view ‘FrameView’ so that I can easily identify it later.)


Open the site in FrontPage


 



  1. Click ‘Open Site’ from the File menu of Front page

    1. If your document library is in a sub-site navigate down to the correct sub-site. (Example: http://localhost:1919/sales/ where “sales” is a sub-site )

  2. Navigate to your document library in the site explorer
  3. Open the “Forms” folder under the document library
  4. Right click and select ‘Open’ on the view that was created above.


Find and remove the title bar frame


 


Now that we have the view open in FrontPage we need to find the sections to remove.



  1. Change the view to Split or Code view and start at the top line.
  2. Select ‘Find’ from the Edit menu and search for “ms-bannerframe”
  3. This will find a “table” element with the ms-bannerframe class.
  4. Select the complete tag (right click on table and click “Select Tag” is the easiest method to select the full tag)
  5. Delete the selected tag (This will remove the top level navigation bar)


Moving the RelativeFolderPath property


 


SharePoint has an important property stored in the titlebarareaframe that we need to move to the descriptiontext section.


 



  1. Select ‘Find’ from the Edit menu and search for “RelativeFolderPath”
  2. Select the tag and “Cut” it to the clipboard

<SharePoint:ListProperty Property=“RelativeFolderPath” runat=“server”/>



  1. Select ‘Find’ from the Edit menu and search for “ms-descriptiontext”
  2. Paste it just after the “Description” property
    <SharePoint:ListProperty Property=“Description” runat=“server”/>
    <SharePoint:ListProperty
    Property=“RelativeFolderPath” runat=“server”/>


Removing the titleareaframe


 



  1. Select ‘Find’ from the Edit menu and search for “div class=”ms-titleareaframe””
  2. Select and delete the complete “ms-titleareaframe” div tag


Removing the navigation bar sections


 



  1. Select ‘Find’ from the Edit menu and search for “class=ms-nav”
  2. Select and delete the TD tag with this class.

 



 


The view now has all of the title and navigation frames removed and will work will in an Iframe. SharePoint creates a virtual page for every view so you can craft a URL that will always show you desired view. The URL is made up of the following components


 



  1. Server
  2. Sub Site
  3. Document library name
  4. Forms folder
  5. View name

Example: http://localhost:1919/sales/Testframe/Forms/FrameView.aspx


 


Looking ahead, my next blog post will illustrate how to trim the chrome from a web part page. The structure is slightly different.


 


Rich Dickinson

We're always looking for feedback and would like to hear from you. Please head to the Dynamics 365 Community to start a discussion, ask questions, and tell us what you think!