Code On Time: User Interface

Blog

User Interface

Monday, June 17, 2013Print Subscribe

Client library uses HTMLEditorExtender control to provide rich text editing capabilities. The rich text editor can be enabled for a data field using the Text Mode property. The picture below shows rich text editor enabled on the Description field of Categories controller.

The popular open source WYSIWYG text editor CKEditor can be enabled as a replacement.

First, download a copy of CKEditor. There are multiple versions with different features and licensing terms that can be downloaded at http://ckeditor.com/download. Every download package contains “ckeditor” folder. Extract the folder to the root of your project output.

Deployment with Web App and Azure Projects

Note that for Web App Factory projects, the folder must be copied to WebApp folder. Azure Factory projects must have the folder placed in WebRole1 folder.

In addition, Web App and Azure Factory projects must have the folder included in the solution to ensure that ckeditor is published along with the application files. The following instructions explain the process.

Click on the project name on the home screen of the generator and press Develop to start Visual Studio.

At the top of Solution Explorer, click on Show All Files.

Right-click on the ckeditor folder that appeared and press Include In Project.

On the menu, press File | Save All to save changes.

Regenerating the Project

Switch back to the app generator. Proceed to regenerate the web application. The generator will detect the presence of the ckeditor folder and automatically reconfigure the code to link ~/ckeditor/ckeditor.js to the pages. The client library will use CKEditor for rich text fields when the corresponding JavaScript type is available.

Navigate to the Categories page, and start editing a record. CKEditor will now be used instead. The example below shows CKEditor 4.1.2 Standard.

Note that if you are trying multiple versions of CKEditor to preview its capabilities, make sure to clear the browser cache every time the files are replaced.

Labels: Application Builder, Tutorials, User Interface, Web Application Generator

Friday, June 14, 2013Print Subscribe

Customizing the Footer

The footer is displayed at the bottom of every page in a web app. The text will display a standard copyright message by default.

Let’s customize the footer content.

Changing the Footer Text

Start the web app generator and click on the project name. Select Settings, and click on Features. In the Copyright text box, enter the following:

Property	New Value
Copyright	©<b> Code On Time LLC</b> All rights reserved.

Press Finish, and then press Generate to continue regenerating the web app. Notice that the new copyright message is displayed.

A custom user control may be used when more complex or dynamic content is necessary.

Placing a Custom User Control in the Footer

In the Project Explorer, right-click on Customers / page container node, and press New Control.

Next to the User Control lookup, click on the New User Control icon.

Assign a name to the new user control:

Property	Value
Name	CustomerFooter

Press OK to save the user control. Press OK to add the control to the Customers page.

Right-click on Customers / page / control1 – CustomerFooter control node, and press Rename.

Change the name to “footer” and press Enter key to apply the change.

On the toolbar, press Browse. Notice that the user control has replaced the footer content.

Labels: Application Builder, User Interface, Web Application Generator

Friday, June 14, 2013Print Subscribe

Customizing the Sidebar

The sidebar is displayed on the left side of every content page. The About box displays a description for the page. The See Also box shows other pages on the same level in the navigation menu. The Summary box displays information about the selected record, if enabled for the specific view.

Customizing the About Box

Start the Project Designer. In the Project Explorer, double-click on Customers page node.

Change the About This Page property:

Property	New Value
About This Page	This page displays a list of customers.

Save the page. On the toolbar, press Browse. Notice that the text in About box has been updated.

Hiding See Also Box

The See Also box displays links to pages on the same hierarchy level. Let’s hide the See Also box.

In the Project Explorer, double-click on Customers page node.

Change the following:

Property	New Value
Custom Style	NoSeeAlso

Press OK to save. On the toolbar, press Browse. Notice that the See Also box has disappeared.

Custom content may be added to the sidebar in the form of a user control.

Placing a Custom User Control in the Sidebar

In the Project Explorer, right-click on Customers / page container node, and press New Control.

Next to the User Control lookup, click on the New User Control icon.

Assign a name to the user control.

Property	Value
Name	CustomerSidebar

Press OK to save the new user control. Press OK to add the user control to the page.

Right-click on Customers / page / control1 – CustomerSidebar node, and press Rename.

Change the name to “sidebar”, and press Enter key to apply changes.

On the toolbar, press Browse. Notice that the user control is now present in the sidebar.

Labels: Application Builder, User Interface, Web Application Generator