Getting EPiServer FileManager into Relate+ Clubs – Verbose Version
The CMS File Manager includes robust functionality not included in the Community Document Archive API’s. Per’s solution to take advantage of the CMS functionality is excellent! After implementing it myself I thought some people might benefit from having a verbose version of the all of the necessary steps. For some this may be overkill. For others it may be helpful. You’ll probably notice I borrowed some of Per’s blog verbiage. Fortunately he’s OK with this. :) All credit for the solution should go to Per.
The following steps will help you get started in setting this up for your Relate+ site. Obviously this is simply an example and can be tweaked according to your need.
- Open the Visual Studio project for the Relate+ site titled EPiServer.Templates.RelatePlus.csproj from the sites root directory (e.g. C:\EPiServer\Sites\<site name>\).
- In the project, under /Templates/RelatePlus/Pages, create a new page template called “ClubFiles”.
- For more information on creating page templates visit the “how to” page on EPiServer Page Templates.
- For more information on creating page types visit the “how to” page on EPiServer Master Pages.
- The next several steps require copying files from the EPiServer Demo Templates. If you do not have these templates installed visit EPiServer Demo Templates and follow the instructions to install them.
- Then from EPiServer Demo Templates:
- Copy the FileManager WebControl assembly(EPiServer.Demo.Filemanager.dll) from the bin directory of a site that has the Demo templates installed over to the Relate+ site bin directory (e.g. C:\EPiServer\Sites\<site name>\bin).
- In your Visual Studio project add a reference to the EPiServer.Demo.Filemanager assembly.
- **NOTE: Since WebControls only require the use of the assembly, not the actual code, adding the code files to the project is not necessary here. In other steps below you will need to copy the code.
FileManager User Controls
- Create a “Demo” folder as a sub-folder of “Templates” in the Relate+ project .
- Copy the entire contents of the File Manager UserControl folder (e.g. C:\EPiServer\Sites\<my site>\Templates\Demo\FileManager) to the “Demo” folder of the Relate+ project. The easiest way to do this is to drag-and-drop the folder from Windows Explorer to the new “Demo” folder in the Visual Studio Relate+ project.
- Create a “Styles” folder in the Relate+ project as a subfolder of /Templates/Demo.
- Create a “Default” folder as a subfolder of /Templates/Demo/Styles.
- Create a “Images” folder as a subfolder of /Templates/Demos/Default/Styles.
- Copy the entire contents of the “FileManager” and “extensions” folders to the previously created “Images” folder. The easiest way to do this is to drag-and-drop the folders from Windows Explorer to the new “Images” folder in the Visual Studio Relate+ project.
- Copy the stylesheet Styles.css to the previously created “Images” folder.
- Open the Styles.css stylesheet.
- All items in the stylesheet are not necessary. Remove everything but the sections titled: “Documents”, “File Manager Control”, and “Toolbar BUTTONS” to avoid conflicts.
- Open /RelatePlus/UserControls/Headers.ascx.
- In the Header.ascx file add a reference to the Styles.css stylesheet:
- Include the FileManager language text by copying file demo_EN.xml from the Demo Templates lang folder (e.g. C:\EPiServer\Sites\<my site>\lang) to your Relate+ sites lang folder (e.g. C:\EPiServer\Sites\<my site>\lang). The easiest way to do this is to drag-and-drop the file from Windows Explorer to the new “lang” folder in the Visual Studio Relate+ project.
- Create a new folder under the root called "Classes" in the Relate+ project.
- Copy the file EPiCheckBox.cs from the Demo /Templates /Templates/Demo/Workroom/Core to the new "Classes" folder.
- Open the file EPiCheckBox.cs file.
- Change the namespace to "EPiServer.Templates.RelatePlus.Classes".
- Change the registration of the checkbox control in /Templates/Demo/FileManager/FileList.ascx to the appropriate Assembly and Namespace. Initially it is set to:
- Based on these instructions it should be changed to:
- The FileManager VersionList also uses the checkbox class. Change the registration of the checkbox control in /Templates/Demo/FileManager/VersionList.ascx to the appropriate assembly and namespace. Follow the same steps as the last two above in the VersionList.ascx file.
In web.config register the File Manager Web control:
- Add one more addition to the tail of web.config:
- Still in the web.config, but in the Pages declaration, add:
- You will need to add some additional “using” statements to get the code to compile. The final code behind file, including these using statements, appears as follows:
- Navigate to CMS Admin mode.
- Select the “Page Type” tab.
- Under “Page Types” select “Clubs”.
- Select the “Settings” button.
- Select the “Available Page Types” tab.
- Ensure that the “ClubFiles” checkbox is selected. This will allow ClubFiles page types to be added underneath Clubs page types.
- Select “Save”.
- Navigate to Edit mode.
- In the structure, select “Clubs”.
- Right click and select “Create New”.
- Select the “ClubFiles” page type.
- Give it a Name such as “Files”.
- Select the “Save and Publish” button.
- In the site tree structure select “Clubs”.
- Select the “CreateClub” button on your Clubs page.
- Create a “Club Name” (e.g. “MySampleClub” and note the new “Files” tab!
Fixing the Bread Crumb
The File Manager is built for EPiServer CMS Pages and the bread crumb control expects the files to be in the page’s directory, where it gets the page owner and displays the Page Name. This will not work for Community/Relate+ clubs, so we need to change it to get the Club Name of that folder.
The current solution is a quick hack where it tries to parse the folder name, which is the club id and then get that club. Anyhow, in the usercontrol /Templates/Demo/FileManager/HeadingContent.ascx we modify the method AppendBreadCrumbs to:
Be sure to add the appropriate using statement for the Club class at the head of the AppendBreadCrumbs file:
Then the “final” solution looks like this:
And in Admin mode, File Management:
That’s it! The file manager should now be working in your Relate+ site.
Comments and feedback are welcome.