The DevExpress "Office Applications (Mobile friendly)" demo showcases many of our ASP.NET controls: RichEdit, Spreadsheet, FileManager, and more. It's inspired by the feature-rich functionality of Office 365 online, however, our demo allows any ASP.NET developer to build similar features and host it locally.
The "Office Applications" is a big demo with lots of great features. Unfortunately, it's not a great learning tool. So we've created a smaller version of this demo that teaches you how to build the core parts, step-by-step, with detailed explanation.
Responsive Sample App
To encourage folks to download, test, fork, comment, question, etc., we've put the "DevExpress / aspnet-documentmanagement-bestpractices" sample on GitHub:
https://github.com/DevExpress/aspnet-documentmanagement-bestpractices
This sample application demonstrates 'best practices' when using the DevExpress ASP.NET File Manager, Panel, Spreadsheet, and Rich Text Editor. These controls are used to implement a responsive web application for managing office documents and media files (*.docx, *.xlsx, *.jpg, etc.).
Online Demo
Click or scan the QR code below to open the online example and experience the demo on your desktop or your mobile device.
In the repository, you'll find a full Visual Studio ASP.NET solution and several guides:
- Step 1: Populating the File Manager with files using a database as a file storage
- Step 2: Implementing custom filtering and applying security settings for the File Manager
- Step 3: Building a responsive layout for the file explorer using DevExpress controls and CSS styles
- Step 4: Reading and viewing office documents using Rich Text Editor and Spreadsheet controls
Download this repository and run it on your machine (details below). This sample app requires DevExpress ASP.NET controls (v18.1 or higher). Download the latest installer from the DevExpress website.
Application description
The application's main screen includes three main layout elements:
- Header with text and two navigation buttons
- Left-side collapsible menu
- File explorer
The file explorer, represented by the ASPxFileManager, displays the application's file system. End-users can manage files and folders: create, delete, copy, rename, or replace them.
The left-side menu allows end-users to display files only with specific extensions or files that were modified recently. End-users can collapse/expand the menu by clicking the hamburger button. If a browser window's width is less than 960px, the menu is collapsed when the application is started; otherwise, it is expanded.
End-users can view and edit office documents (xlsx, xls, csv, docx, doc, rtf, and txt files) by clicking the corresponding item in the file explorer. The documents are opened in view mode:
This mode is optimized for viewing documents, specifically for mobile devices:
- Pages render faster than in edit mode
- Improved readability for different devices, due to the adaptive layout
- Easy navigation through documents on mobile devices using the browser's built-in page search
End-users can to return to the file explorer or edit the document using the navigation buttons. When an end-user clicks the pen button then the document is opened in edit mode. Office documents are then either loaded in the ASPxRichEdit or ASPxSpreadsheet controls depending on their format (docx, xlsx, etc.).
End-users can edit and save documents in this mode. The back button returns users to the read-only view.
How to launch the project on a local machine
The following steps are required to create a database that stores files contained in the AppData/Files folder. These files in the new database are then used to display in the file explorer. Refer to the Populating the File Manager with files using a database as a file storage topic to see this feature's description.
Follow the instructions below to launch the project on your machine:
- Run the CreateDatabase.aspx page in your browser.
- Click the Create and populate Database button.
- Wait until the button's text is changed to Database created.
- Now run the Default.aspx page and experience the sample application.
What are you thoughts on this new well-documented ASP.NET sample app? Drop me a line below. Thanks!