Sitefinity 5 Nuts & Bolts - PDF

Sitefinity 5by the Falafel Sitefinity Team

Welcome to Sitefinity 5 We hope you enjoy the book as much as we, at Falafel Software, enjoyed creating it.

Sitefinity 5 2012 Falafel SoftwareAll rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or mechanical, including photocopying, recording, taping, or information storage and retrieval systems - without the written permission of the publisher. Products that are referred to in this document may be either trademarks and/or registered trademarks of the respective owners. The publisher and the author make no claim to these trademarks. While every precaution has been taken in the preparation of this document, the publisher and the author assume no responsibility for errors or omissions, or for damages resulting from the use of information contained in this document or from the use of programs and source code that may accompany it. In no event shall the publisher and the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused directly or indirectly by this document. Printed: April 2012

Publisher Falafel Software Inc. Falafel Sitefinity Team Noel Rice Basem Emara Alain "Lino" Tadros Bary Nusz Gary Campbell Scott Frolich Matt Kurvin Technical Editors Basem Emara George Saddeh Alain "Lino" Tadros Cover Designer Matt Kurvin Team Coordinator Alain "Lino" Tadros Administration Sean Samuel Production Falafel Software Inc.

Special thanks to: All the team members at Telerik worldwide for creating a magnificant piece of software in Sitefinity. The authors also would like to thank the Falafel team members in Colorado, Texas, Michigan, N. Carolina, Canada, Lebanon and California for their feedback and recommendations on the subjects of the manual. Also the team would like to thank the following members of the Telerik Sitefinity team for their hard work and continuous support: Gabe Sumner Ivan Dimitrov Georgi Chokov Steve Miller Ivan Osmak Boyan Rabchev Anton Hristov Josh Morales Hristo Borisov Radoslav Georgiev Lidiya Petkova Slavo Ingilizov Stanislav Velikov Vassil Terziev

4

Sitefinity 5

Table of Contents1 Introduction 2

What .......................................................................................... You Need to Know Before Reading This Courseware 2 What Do You Need to Have Before Reading This Courseware .......................................................................................... 3 How .......................................................................................... This Courseware is Organized 4 What .......................................................................................... is a CMS and why do you need one? 7 Sitefinity .......................................................................................... 3.7 vs. 5.x 8

2 Setting Up Your Environment

10

Objectives .......................................................................................... 10 Installing .......................................................................................... Sitefinity 5 11 Installing .......................................................................................... the SDK 14 Summary .......................................................................................... 17

3 Getting Started

19

Objectives .......................................................................................... 19 Sitefinity .......................................................................................... Project Manager 20 Dashboard .......................................................................................... 22 About .......................................................................................... Pages and Content 23 Front .......................................................................................... End vs. Back End 24 Creating .......................................................................................... Projects 25 Summary .......................................................................................... 40

4 Pages

42

Objectives .......................................................................................... 43 Page .......................................................................................... Settings 44

2012 Falafel Software

Contents

5

Editing .......................................................................................... the Page 51 Tour .......................................................................................... of Page Administration 77 Summary .......................................................................................... 82

5 Content

84

Objectives .......................................................................................... 85 Tour .......................................................................................... of the Content Menu 86 Content .......................................................................................... Block 87 News .......................................................................................... 94 .......................................................................................... Events 101 .......................................................................................... Images and Albums 106 .......................................................................................... Video 118 .......................................................................................... Lists 127 .......................................................................................... Blogs 132 .......................................................................................... Documents 145 .......................................................................................... Forms 153 .......................................................................................... Social Sharing Options 162 .......................................................................................... Summary 164

6 Permissions

166

.......................................................................................... Objectives 167 .......................................................................................... Built-In Roles 168 .......................................................................................... Creating a Role 169 .......................................................................................... Creating a User 171 .......................................................................................... Test the New User 173 .......................................................................................... Summary 174

7 Workflow

176

.......................................................................................... Objectives 177 .......................................................................................... Defining a Workflow 178 2012 Falafel Software

6

Sitefinity 5

.......................................................................................... Testing the Workflow 183 .......................................................................................... Summary 184

8 Analytics

186

.......................................................................................... Objectives 187 .......................................................................................... Setup 188 .......................................................................................... Using Analytics in the Administrator 191 .......................................................................................... Summary 194

9 Widget Templates

196

.......................................................................................... Objectives 197 .......................................................................................... Accessing Widget Templates 198 .......................................................................................... Changing a Template 199 .......................................................................................... Creating a New Template 202 .......................................................................................... Managing Widget Templates 204 .......................................................................................... Summary 205

10 Page Templates

207

.......................................................................................... Objectives 208 .......................................................................................... Creating and Using a Page Template 209 .......................................................................................... Stying 221 .......................................................................................... Debugging CSS 225 .......................................................................................... Summary 229

11 Responsive Web Design

231

.......................................................................................... Objectives 232 .......................................................................................... Creating Rules 233 .......................................................................................... Previewing the Results 236 .......................................................................................... Device Characteristics 237 .......................................................................................... Adding New Behaviors 239 2012 Falafel Software

Contents

7

.......................................................................................... Summary 242

12 Working with Master Pages

244

.......................................................................................... Objectives 245 .......................................................................................... Masterpage Overview 246 .......................................................................................... Using a MasterPage from the Marketplace 247 .......................................................................................... Editing 3rd Party Templates 256 .......................................................................................... Master Page Surgery Tips 265 .......................................................................................... Summary 269

13 Developing in Sitefinity

271

.......................................................................................... Objectives 272 .......................................................................................... What Flavor API? 273 .......................................................................................... Getting Started with Sitefinity Development 274 .......................................................................................... Sitefinity Projects in Visual Studio 278 .......................................................................................... Developing with Thunder 280 .......................................................................................... Summary 281

14 Using the Sitefinity API

283

.......................................................................................... Objectives 284 .......................................................................................... Working with Pages 285 .......................................................................................... Working with Content Items 291 .......................................................................................... Publishing 297 .......................................................................................... Summary 298

15 Authentication and Security

300

.......................................................................................... Objectives 301 .......................................................................................... Claims vs Forms Authentication 302 .......................................................................................... Setting the Authentication Type 303 .......................................................................................... Login Programmatically 304 2012 Falafel Software

8

Sitefinity 5

.......................................................................................... Logout Programmatically 306 .......................................................................................... Create a User 307 .......................................................................................... Roles and Permissions 308 .......................................................................................... Summary 311

16 Using the Fluent API

313

.......................................................................................... Objectives 314 .......................................................................................... Fluent API Facades 315 .......................................................................................... Working with Pages 316 .......................................................................................... Working with Content Items 319 .......................................................................................... Summary 337

17 Working with Forms

339

.......................................................................................... Objectives 340 .......................................................................................... Getting a List of All Forms 341 .......................................................................................... Retrieve a Single Form 343 .......................................................................................... Retrieving Form Entry Values 344 .......................................................................................... Summary 349

18 Localization

351

.......................................................................................... Objectives 352 .......................................................................................... Localizing Front End Pages 353 .......................................................................................... User Language Selection 360 .......................................................................................... Localizing In Code 362 .......................................................................................... Localizable Strings 363 .......................................................................................... Localizing Back End Pages 364 .......................................................................................... Summary 367

19 Working with Widgets

369

.......................................................................................... Objectives 370 2012 Falafel Software

Contents

9

.......................................................................................... User Controls 371 .......................................................................................... Custom Controls 382 .......................................................................................... Custom Control Designers 394 .......................................................................................... Using RadControls for ASP.NET AJAX with Sitefinity 408 .......................................................................................... Silverlight Controls 410 .......................................................................................... Communication between Custom Control and Silverlight 418 .......................................................................................... Custom Form Controls 427 .......................................................................................... Summary 439

20 Working with Modules

441

.......................................................................................... Objectives 442 .......................................................................................... Create a Custom Module 443 .......................................................................................... Add Module Content 450 .......................................................................................... Customizing the Backend Grid 452 .......................................................................................... Add the Module to a Page 455 .......................................................................................... Working with the Module in Code 458 .......................................................................................... Summary 462

21 Sitefinity Web Services

464

.......................................................................................... Objectives 465 .......................................................................................... Getting Available Services and Methods 466 .......................................................................................... Anatomy of a Web Service Call 470 .......................................................................................... Using Claims Authentication 471 .......................................................................................... Using Forms Authentication 486 .......................................................................................... What Next? 495 .......................................................................................... Summary 496

22 Content Classification - Taxonomy

498

.......................................................................................... Objectives 499 .......................................................................................... Terminology 500 2012 Falafel Software

10

Sitefinity 5

.......................................................................................... Getting Started 501 .......................................................................................... Listing Taxonomies 502 .......................................................................................... Listing Taxa 503 .......................................................................................... Finding Frequently Used Categories and Tags 504 .......................................................................................... Get Items by Category or Tag 506 .......................................................................................... Adding Categories and Tags 509 .......................................................................................... Summary 510

23 Dynamic Data

512

.......................................................................................... Objectives 513 .......................................................................................... Adding Custom Fields 514 .......................................................................................... Using the DynamicData Facade 520 .......................................................................................... Programmatically Listing Types 521 .......................................................................................... Programmatically Listing Fields 523 .......................................................................................... Reading and Writing Custom Field Values 528 .......................................................................................... Summary 529

24 About Falafel

531

.......................................................................................... Support and Services 532

Index

537


1Introduction

2

Sitefinity 5

1

IntroductionWhat You Need to Know Before Reading This CoursewareThis Courseware first demonstrates how to be productive right away using Sitefinity in a business environment, progresses to administrative and designer tasks and finishes up with details on developing for Sitefinity. Depending on your use of Sitefinity, different parts of the book will be useful to you. Business Users: If you want to create web content but have no interest in web site

administration or fiddling with technical details.Designers and Administrators: If you are responsible for the installation and setup of new

web site projects, configuration and management of users.Developers: If you need to programmatic control over Sitefinity websites or widgets, need to adapt Sitefinity to include features that dont exist out-of-the-box or need to access data contained in your Sitefinity website or feed data to your website.


Introduction

3

What Do You Need to Have Before Reading This CoursewareServer SideMicrosoft Windows Server 2003, 2008, Windows XP [1] Windows Vista, Windows 7 Internet Information Services 6+[2] Microsoft .NET Framework 4.0

DatabaseMicrosoft SQL Express 2005 2008 Microsoft SQL Server 2005, 2008

Supported BrowsersInternet Explorer 7+ Firefox 3.6 + JavaScript must be enabled on all browsers Silverlight 4 plug-in must be installed on all users' browsers

Tip!

In practice, Chrome, Opera and Safari also work well with Sitefinity. Business users may want to use Chrome, currently the fastest browser on the market. Firefox can be used for any testing and debugging by web designers and developers. You may need to use Internet Explorer based on business needs.

*http://www.sitefinity.com/a sp-net-cms-fea tures/systems-requirements.a spx NOTE 1: You ca n run Sitefinity with Windows XP, only when using the Sitefinity integra ted web server. NOTE 2: It is not required to use IIS. If you wa nt to use IIS, you must configure it for Silverlight Applica tion. For more informa tion, see Configuring IIS for Silverlight a pplica tion below. NOTE 3: If you a re using Windows XP or Windows Server 2003 ma ke sure you ha ve upda ted your Windows Insta ller to version 4.5.


4

Sitefinity 5

How This Courseware is OrganizedSetting Up Your EnvironmentThis Chapter covers the basic installation of Sitefinity.

Getting StartedIn this Chapter you will create a minimal, simple Sitefinity website. The website will contain a single "Welcome" page populated with text.

PagesThis chapter explains the options for creating and configuring a page. Then you'll learn how to edit page content and layout, paying particular attention to working with the HTML Editor. A tour of the page administration explores the list of pages and the possible Actions you can take, filtering and managing pages.

ContentThis chapter tours the Content Menu and demonstrates how to work with each type of content. You'll learn how to create content, how to use widgets to display content in a page and how to configure the widget to fine-tune the layout and behavior of the content.

PermissionsThis chapter explains how the built-in roles are used, how to create a role, how to create a user and how to assign roles to users.

WorkflowIn this chapter you'll learn how to define and test a workflow.

AnalyticsIn this chapter you will learn how to setup Analytics. A brief survey of the Analytics interface will show you the kinds of web traffic information you can generate and analyze.

Widget TemplatesThis chapter demonstrates where you can access widget templates, how to edit the template markup, how to create your own custom templates and how to work with the Administration menu Widget Templates option.


Introduction

5

Page TemplatesIn this chapter you'll learn use page templates to establish a basic layout and content across multiple pages. You will add styles to the page template using both the CSS widget and using ASP.NET Themes. Finally, you'll learn how to debug CSS issues.

Responsive Web DesignIn this chapter you'll learn how Responsive Web Design helps your application react to device sizes ranging from full-sized desktop or notebook screens to the smallest of handheld devices. You'll learn how to define rules that react to different screen configurations, how to make basic layout changes based on those configurations and how to fine tune all aspects of the page using styles.

Working with Master PagesIn this chapter you'll learn how Master pages work together with the page template and theme. You'll see how to use a Master page from the marketplace and how to "slice-anddice" third party templates to integrate them in your web site.

Developing in SitefinityIn this chapter you will learn the basics for getting started with Sitefinity development. You'll learn what basic flavors of the API are available to you and how to work with the API in Visual Studio.

Using the Sitefinity APIThis chapter explains how to work with the Sitefinity API. First you'll learn how to create a Sitefinity page programmatically and then how to display the hierarchy of pages in a tree view. You'll also create content programmatically and perform CRUD (Create Read Update Delete) operations against content items. Finally, you will add a programmatically created content item to a page, on-the-fly.

Using the Fluent APIThis chapter demonstrates how the Fluent API works with pages and content items. You will learn how to upload images and documents. In particular, you will use a web service to load images to an Album en-masse. Finally, you will use the Fluent API to return lists of content items, filter, sort and select content items into useful subsets and then bind your results to ASP.NET controls.


6

Sitefinity 5

Working with FormsThis chapter explains how to programmatically retrieve forms and form items. This chapter will also discuss how to get at the form entry column names and captions.

LocalizationIn this chapter you will learn how to localize front end pages using Sitefinity Administration, how to localize strings in code, how to localize back end pages and how to use the Interface Labels & Messages page.

Working with WidgetsThis chapter steps you through how to create user and custom controls available from the toolbox and usable within the page. You will also learn how to create designers for custom controls to assist your users in configuring the control. You will use a RadControls "RadComboBox" and "RadGrid" inside your page as well as perform CRUD operations against live data. You will see how to integrate a Silverlight control and how to make the Silverlight control and page communicate. Finally, you will create a custom form control.

Working with ModulesIn this chapter you will work with modules to handle custom data. You will learn how to create a custom module, add content to the module and add the module widget to a page to view the data. You will also learn how to customize the backend table of module data.

Sitefinity Web ServicesThis chapter demonstrates how to work with both Forms Authentication and, the new default, Claims Authentication. This chapter first shows how to get all the available web services and method calls. You will learn the basic steps in common with all web service method calls, how to log in and log out of Sitefinity from a web service and how to retrieve and parse information from a web service call.

Content Classification - TaxonomyThis chapter introduces the basic terminology for Taxonomies and shows how to traverse hierarchies of taxonomies and taxa. You'll learn about how to get statistics for a taxon, retrieve items by a category or tag and how to programmatically add categories and tags.

Dynamic DataIn this chapter you'll learn how to add a new custom field to a content item from the Sitefinity back end. Then you'll use the DynamicData facade to programmatically list types and fields. Finally, you'll learn how to read and write custom field values.


Introduction

7

What is a CMS and why do you need one?A Content Management System (CMS) allows multiple people to contribute website content from any location. Before CMS, one person received email with web change requests, managed all the code and recompiled the entire site for each change. Even the graphic web designer, who made changes continually, had to send email to that one person. That one person was the bottleneck. What about business users? Each business group (marketing, accounting, sales, etc.) wants to own their particular area without the bother of sending a ticket to an IT department and waiting for the ticket to be received and processed. CMS lets you split up the work for the web site and store the results in a single database or file system. Web designers can completely change website look-and-feel without having to know anything about content. Business users can create news, events and blogs and completely ignore how their content is presented. CMS "workflow" allows documents to be approved or rejected before being published, e.g. accounting makes their own changes and submits for approval while a manager verifies that numbers being published to the outside world do not conflict with company policies. While Sitefinity makes it easy to set up the initial website, you must think about maintaining and extending the website later for new capabilities. You can maintain Sitefinity content in one place and reuse the content everywhere. Maintenance is largely a matter of point-and-click, drag-and-drop. Sitefinity is completely extensible so that developers can integrate with 3rd party packages (e.g. Salesforce), add new custom widgets and modules.


8

Sitefinity 5

Sitefinity 3.7 vs. 5.xSitefinity was created based on Telerik's internal need for content management of their own website. Now thousands of companies use the product. Along the way, Telerik learned about the real world needs for the product. Sitefinity 5 is very different from Sitefinity 3.7. In fact, you might consider Sitefinity 5 a brand new product with a new background database and excellent new architectural underpinnings. One key Sitefinity 5 architecture change is the extensive use of AJAX technology to speed up administration page refreshes. In Sitefinity 3.7 , you had to wait for the entire page to refresh. In Sitefinity 5.0, AJAX technology allows a small request to the server and only a small part of the page is refreshed.


2Setting Up Your Environment

10

Sitefinity 5

2

Setting Up Your EnvironmentObjectivesThis Chapter covers the basic installation of Sitefinity.


Setting Up Your Environment

11

Installing Sitefinity 5Once you have downloaded the installation for Sitefinity from www.sitefinity.com, follow the steps below to install the product. 1. Run the installation. The Welcome page will display. Click the Read License Agreement button to reviewing the license terms. If you accept the license conditions Click the I Agree - Continue button to continue.

Figure 1 --The Welcom e Screen

2. The Summary page will list the features to be installed. If you want to install the product in a custom location or specify the features to install, click the Customize button. Click the Install button to continue.

Figure 2 --Sum m ary


12

Sitefinity 5

3. The Installing Sitefinity page displays status. No action is required on this page.

Figure 3 --Installation

4. In the Completed Successfully Installation page, leave the Launch Sitefinity Project Manager option checked and click the Finish button to close the installation wizard and display the Sitefinity Project Manager.

Figure 4 --Com pleted Page



13

5. The Sitefinity Project Manager provides quick access to creating and configuring Sitefinity projects.

Figure 5 --Sitefinity Project Manager


14

Sitefinity 5

Installing the SDKThe Sitefinity SDK includes important resources for development not included directly with the core Sitefinity install. Once you have downloaded the installation for the Sitefinity SDK from w w w .sitefinity.com > Developer Netw ork > SDK, follow the steps below to install the product. 1. Run the installation. The Welcome page will display. Click the Read License Agreement button to reviewing the license terms. If you accept the license conditions Click the I Agree - Continue button to continue.

Figure 6 --The Welcom e Screen

2. The Summary page will list the features to be installed. If you want to install the product in a custom location or specify the features to install, click the Customize button. Click the Install button to continue.

Figure 7 --Sum m ary



15

3. The Installing Sitefinity page displays status. No action is required on this page. The Installation will also install other Telerik products including RadControls for ASP.NET AJAX, RadControls for Silverlight and OpenAccess ORM.

Figure 8 --Installation

4. In the Completed Successfully Installation page, leave the Launch Sitefinity SDK Browser option checked and click the Finish button to close the installation wizard.

Figure 9 --Com pleted Page


16

Sitefinity 5

5. The SDK Browser includes a rich set of resources for getting started with Sitefinity, starter kits, code samples, widgets, blogs, documentation and links.

Figure 10 --SDK Brow ser



17

SummaryIn this Chapter you learned how to install Sitefinity.


3Getting Started

Getting Started

19

3

Getting StartedObjectivesIn this Chapter you will create a minimal, simple Sitefinity website. The website will contain a single "Welcome" page populated with text.


20

Sitefinity 5

Sitefinity Project ManagerThe Sitefinity Project Manager is the starting point for creating, managing and browsing your Sitefinity website. The Sitefinity Project Manager is available from the Start menu under All Programs | Telerik | Sitefinity | Sitefinity Sitefinity Project Manager. Use this application to: Create a New Project brings up the New Project Wizard where you can create a Sitefinity project on your local file system, in an IIS (Internet Information Services) website on your machine, a remote web site or using FTP to a remote web site. Import a Project prompts so you can add an existing project. The Actions menu and the right-click, context menu contain similar options to perform against any of the selected projects.

Figure 11 --Sitefinity Sitefinity Project Manager


Getting Started

21

From the Actions menu you can: Go to the Administration backend of the site. Browse to display the live site. Explore the Sitefinity project in the file system. Upgrade a project to the latest version. Edit the project in Visual Studio opens the Sitefinity project in Visual Studio. Show the License Information to see the license constraints such as the product version, number of concurrent users allowed, number of published pages allowed, etc. Show Cassini Info displays the Sitefinity Integrated ASP.NET server dialog along with the Url of the project, physical path, port, and virtual path. You can also start and stop the server from this dialog. Remove eliminates the project from the Project Manager and optionally, will delete the actual files that make up the project. Set SF3.7 for migration prompts for the location of an existing 3.7 website and migrates the project to the current version.

Figure 12 --Actions Menu


22

Sitefinity 5

DashboardThe Dashboard is the first visible Page when you navigate to Administration. The Dashboard has the main menu across the top, links to videos and documentation to help you get started and a "Full Documentation" link at the bottom of the page.

Figure 13 --Sitefinity Adm inistration


Getting Started

23

About Pages and ContentSitefinity websites are built from two major pieces: Pages and Content. Pages are containers of data. Content is the data that will be placed in the containers. Once you create a page, it goes straight into the database. Likewise, any content you create is saved immediately into the database. You can backup and restore the database and automatically recreate your entire website.


24

Sitefinity 5

Front End vs. Back EndPages and content can be placed in either front-end or back-end locations. Front-end refers to the live published site that the end user will see, while back-end refers to the administration (Dashboard) portion that is used to create sites in Sitefinity but is hidden from the user.


Getting Started

25

Creating ProjectsSitefinity projects can be created using major technology platforms for websites including: Right in your own local file system Using IIS (Internet Information Services) Remotely, through a FTP (File Transfer Protocol) or HTTP (Hypertext Transfer Protocol). The Sitefinity Sitefinity Project Manager makes it easy to get started building your own websites. You don't have to use IIS (Internet Information Services) or spend days making sure the web site will work. The Sitefinity installation includes everything you need to get started building your website.

Lab: Creating a Minimal Sitefinity WebsiteThis Lab demonstrates creating a minimal Sitefinity website stored in your local file system. In this example we're not going to go into the details, but simply walk through creating the web site on your local file system. This project will be launched using the built-in web server.


26

Sitefinity 5

Creating the Project 1. From the Sitefinity Project Manager click the Create a New Project button from the toolbar at the top of the window.

Figure 14 --New Project

2. The Create New Project Wizard displays. Enter the Project Name "CarConduit". Click the Next button to continue.

Figure 15 --Creating a New Project


Getting Started

27

3. The Activate a License page of the wizard displays. Enter your Email address and Password from your Sitefinity.com account. If you have a license file downloaded, select the Use a License File You Have Downloaded option and choose the file using the Browse button.

Figure 16 --Activating a License

Notes

If you have already created a project, then you will be able to select from existing licenses.


28

Sitefinity 5

4. Select the Sitefinity edition that fits the requirements of your project.

Figure 17 --Selecting Sitefinity Edition

Notes

Click the Compare All Editions link that navigates to http://www.sitefinity.com/ purchase/license-comparison.aspx where a matrix displays product capabilities, licensing and pricing.


Getting Started

29

5. Select the Free Trial or Licensed options button. Subsequent steps will verify your Sitefinity.com login against your licenses. Click the Next button to continue.

Figure 18 --Selecting the Type of Installation

6. The Confirm License page will display the status of your license. Check the Open the Administration of this Project... option. Click the Finish button to close the wizard.

Figure 19 --Confirm ing the License


30

Sitefinity 5

7. The new project will be added to the list in the Sitefinity Project Manager. At this point Sitefinity has created everything needed for the website except for the database. 8. The Status column for the project will update briefly, then a browser window will open to display the Project Startup . The first step of the project startup is to Set the Database. This example assumes you have Microsoft SQL Server Express installed on your machine with the default instance name of "SQLExpress". Click the Continue button.

Figure 20 --Setting the Database


Getting Started

31

Notes

If you have a full version of SQL Server installed, click the Microsoft SQL Server option. You will need to provide authentication information, the Server and Database names before clicking the continue button. If you don't have SQL Server Express, you can download it from www.microsoft.com/ express/database/. Each database type will have its own set of authentication entry requirements for the particular database. The screenshot below shows the entries required for each.


32

Sitefinity 5

9. The second project setup step is to Register the Administrator for the site. Enter the First Name, Last Name, Username and Password that will be used to login to your new website and finally, an Email address. Click the I'm Done button. The Administrator will be granted all possible rights for the project, including the ability to add content, pages and new users.

Figure 21 --Registering the Adm inistrator


Getting Started

33

10.Next, you will be prompted to login to the new site. Enter the Username and Password from the previous step and click the Login button.

Figure 22 --Logging In

11.After logging in, the site administration Dashboard page will display. From here you can use the menu to navigate between administration tasks.

Figure 23 --The Adm inistration Site


34

Sitefinity 5

Creating a Page Now you will create a "Welcome" page for your website. 1. From the administration site, click the Pages menu option.

Figure 24 --The Pages Menu Option

2. Click the Create a Page link.

Figure 25 --The Create a Page Link


Getting Started

35

3. The Create a Page entry form will display. Enter "Welcome" in the Name field.

Figure 26 --Entering the Page Nam e

4. Scroll further down the form and enter "Welcome to CarConduit" in the Title for Search Engines field.

Figure 27 --Entering the Page Title


36

Sitefinity 5

5. Scroll to the bottom of the form, leave the remaining entry fields at their defaults and click the Create and Go to Add Content button.

Figure 28 --Creating the Page

6. The editor for your new "Welcome" page has a set of content boxes surrounded by dotted lines. The right site of the page is titled Drag Widgets and contains a number of widgets that can be dragged into the content areas. Drag a Content Block widget over to the top box and drop it there.

Figure 29 --Adding the Content Block Widget


Getting Started

37

7. Click the Enter Content link.

Figure 30 --Clicking the Enter Content Link

8. In the Edit dialog that displays, enter the text "Welcome to CarConduit!". Click the Save button to close the Edit dialog.

Figure 31 --Editing the Content Block


38

Sitefinity 5

9. At this point we have a minimal page that is working and retrieving data from the database, but is still in draft mode. The page can't be accessed from the outside world yet. At this point you have the option to click the Save as Draft button and continue to work on the page without publishing it. Instead, click the Publish button to make the new page visible in your new website. This step will return you to Pages administration.

Figure 32 --Publishing the Page

10.In Pages administration locate the Welcome page in the list and click the View link.

Figure 33 --View ing the New Page

11.The new page will display in the browser. Notice that the address bar shows a "localhost" address, followed by the project name, then the page name, i.e. "/ CarConduit/welcome". Also notice that the title "Welcome to CarConduit" appears at the top of the page. Finally, the content "Welcome to CarConduit!" displays in the page body. The steps for creating rich, complex pages are essentially the same and involve additional widgets and content.

Figure 34 --The Finished Page


Getting Started

39

Setting the Default "Home" Page How do you set the default, "home" page? 1. In the Administration list of pages, click the Actions drop down list and select the Set as Homepage link.

Figure 35 --Setting the Hom epage

2. Notice that the "Home" icon appears in the icon next to the page name.

Figure 36 --Hom e Icon

3. Navigate to the site and the default page is displayed automatically without having to write out the complete URL in the browser address bar.


40

Sitefinity 5

SummaryIn this Chapter you created a simple Sitefinity website. The website contains a single "Welcome" page populated with text.


4Pages

42

Sitefinity 5

4

PagesClicking the Pages menu item brings you to Pages administration where you can create new pages, rework the layout of the page and set the content of the page. Pages administration has tools to perform all possible actions in Sitefinity.

Figure 37 --Pages


Pages

43

ObjectivesThis chapter explains the options for creating and configuring a page. Then you'll learn how to edit page content and layout, paying particular attention to working with the HTML Editor. A tour of the page administration explores the list of pages and the possible Actions you can take, filtering and managing pages.


44

Sitefinity 5

Page SettingsIn the Chapter "Getting Started", we did a quick walk-through of building a page without paying much attention to the detail. As a business user, do you care about any of these other settings for creating pages? Absolutely! The page settings help get your page noticed by search engines like Google, Bing and Yahoo (the major three). Other settings determine how your entire page is arranged. Let's create another page and look at the settings: 1) From the administration site, click the Pages menu option. 2) Click the Create a Page link. 3) The first section of Create a Page is used to name the page and set its location. See the screenshot below for an example of how to fill this section. The Name will display in the navigation. The Name "Contact Us" will appear in menus and other widgets to show the list of pages in the site. Put this page... places the page at the top, "root" level of the site, or Under parent page... to select a parent. In the screenshot below, the "Contact Us" page is placed under the "Welcome" page.Url is a powerful component of Sitefinity that can specify the how the page will be

accessed in the browser and by internet search engines. Notice that Url does not end in a suffix like".aspx" as in past versions of Sitefinity. Sitefinity "Navigation rerouting" allows the Url to be completely different from the Name of the page and does not have to match up with any technical naming convention. By default, the Url will be the Name of the page, using dashes in place of spaces. In the screenshot below, clicking the Change button, renames the Url "contact-us" to "contact-carconduit". The Show in Navigation checkbox by default makes the "Contact Us" page visible in all navigation widgets. Uncheck this option if you want the page available but not immediately visible from navigation menus.


Pages

45

Select the Use this page only to group other pages checkbox to have the page become a holder for other pages. If you select this option, the remaining sections that come below (e.g. Title and Description) are eliminated.

Figure 38 --Setting the Page Nam e and Location


46

Sitefinity 5

4) Title for Search Engines appears in the page title and is also important for Search Engine Optimization (SEO). Be sure to enter something here so that Google or Bing will not ignore your page. Remember, no Title means your page will have a lower search engine ranking.

Figure 39 --Assigning the Title

Tip!

Google robots look for the dash symbol. Google responds best when the web site name is followed by a dash "-", then a short description. For example, "Falafel Software - Home Page".


Pages

47

5) The Template section lets you control the layout of the page, e.g. the header, footer, toolbars and content areas, how many columns, and how many rows are on the page. Templates create areas that are ready for you to add content to. Click the Select another Template button to choose from a list of predefined template layouts. If you're feeling adventurous you could select the Don't use Template option to start the page completely from scratch.

Figure 40 --Assigning a Tem plate

Notes

Other templates with custom layouts can be created, but this is not a business user task. Developers or designers can create templates using drag and drop in Visual Studio.


48

Sitefinity 5

6) The Description and Keywords section is another section that's important to define for the best ranking by search engines. Make the Description short and sweet (two sentences max). In the Keywords entry, add the most important words first.

Figure 41 --Entering Description and Keyw ords

Tip!

The key information for the search engines are Title, Description and Keywords. Each search engine has a slightly different priority for these. Some search engines will go up to using eleven keywords while some don't use more than eight. If there are too many keywords, the engine may drop your keywords altogether or just use the first few. So keep the most important keywords first and don't use too many.


Pages

49

7) The options on the Advanced Options page only need to be changed if a designer or developer has a specific need. In particular, leave the Allow search engines to index this page option enabled so the page will be automatically indexed for searching. The other options fill specific needs: Check the Require SSL to make the page use the HTTPS protocol. HTTPS is used to provide secure communication for sensitive information, e.g. credit card numbers. Enable ViewState is unchecked by default. ViewState is what appears to be garbage characters inside of HTML and is used by the browser to know how to reload the page when the browser Back button is clicked. You should only check this option if you need ViewState and know why you need it. As a business user, you will not need to use this setting, unless your designer requires it. Include RadScriptManager is enabled when required by certain AJAX controls. Set this checkbox if your designer or developer requires AJAX support. Allow Parameter Validation needs to be checked if you're passing parameters to your page. Allow Multiple Urls for this Page Caching Options should be "As set for the whole site". Later you can set caching for the entire site at one time from Administration > Settings > Advanced Settings > System > Output Cache Settings.


50

Sitefinity 5

Use the HTML included in the tag entry to add script links, style sheet links and "meta" tags. This text box is used to add certain HTML tags that aren't built into Sitefinity already. The screenshot below shows an example of a Meta tag used to refresh the content every 15 seconds from the server. "Expires" is another important Meta tag used to let search engines know that a particular page or document is no longer valid after a certain date. You can look up more Meta tag examples online that you can cut-and-paste into the text box.

Figure 42 --Advanced Options

8) Click the Create and go to add content button to create and edit the page.


Pages

51

Editing the PageAfter clicking the Create and Add Content button, the new page will display. If you want to navigate back to change any of the page information, click the Title & Properties link.

The title of the page shows at the top along with the current page status (should show as "Draft"). The page is not published and will not be visible to users from the browser. The page designer shows on the left and widgets on the right. Notice the buttons Content and Layout at the top right that toggle between the two main views of the designer. Layout shows where the content will go while Content shows the widgets that will display in the page.

Figure 43 --Designing the Page


52

Sitefinity 5

Editing ContentIn this walk-through, we will add some generic HTML content with our contact information, and an image that represents the company and dresses up the page. 1) Click the Content button found at the top of the "Contact Us" page, 2) The right side, labeled Drag widgets, has a list of all the controls that can be dragged to the box areas on the left side. Sitefinity comes with a set of basic widgets for Content, Navigation, RadControls, Data , Scripts and Styles, Login, Search , Classification and Newsletters. We'll start out working with the widgets under the Content title. 3) From the Drag Widgets area on the right side of the page, drag the Content block to the upper right box area.

Figure 44 --Adding a Content Block

4) Click the Enter Content link. to edit the content block. Note that you can also click the Edit link at the top right of the widget. Both actions display a RadEditor control.

Figure 45 --Clicking the Enter Content Link


Pages

53

5) The RadEditor is an advanced editor for the web that will allow you work with text or directly with HTML, insert links, add images, media or Flash. Click the HTML button located just below the editor window. Paste the following into the editor window:CarConduit is headquartered in Capitola, California. For more information, please contact us at: Toll Free:
888 CAR-CONDUIT
Phone:
555-462-0457
Fax:
555-480-4902
email:
[email protected]

6) Click the Design button, also located at the bottom of the editor window. 7) Click the More formatting options button, located in the upper right hand side of the editor. Additional insertion and formatting options will show up on the editor toolbar, and the button will now read Basic options only .

Figure 46 --Enter Text to the RadEditor


54

Sitefinity 5

8) The screenshot below shows some of the options you may not recognize. In particular, notice the Image Manager used to insert *.gif, *.jpg and *.png directly from your computer or out of the Sitefinity database. The Paste Word button is used to get material from Word documents without the usual large amount of formatting. The Format Stripper is a related button that has a drop down selection of options where you can strip out all the css formatting, Word, Span or Font elements from the content.


Pages

55

9) Select the word "CarConduit" with the mouse and click the Hyperlink Manager button. Enter a web address, complete with the "http://" prefix, click the More options link and enter a Tooltip. Click the Insert this Link button.

Figure 47 --Inserting a Link

Notes

You can use the LinkTo options to link to an external website,


56

Sitefinity 5

10)Rest the mouse over the CarConduit link to see the tool tip for the link.

11)The editor can automatically detect web and email addresses. Click the "[email protected]", then click the Hyperlink Manager. Notice that the LinkTo: Email option is already selected and the email address is already filled in. 12)Select the text "Toll Free:" and select a blue foreground color. Repeat this for the text "Phone:", "Fax:" and "email:".

Figure 48 --Selecting Foreground Color


Pages

57

13)Click the HTML tab. Notice the "" tag for the CarConduit hyperlink, the "mailto" link for the contact email and the span with color styles.

Figure 49 --The HTML View

14)Click the Save button to close the editor. The content block should now look something like the screenshot below.

Figure 50 --The Com plete Content Block


58

Sitefinity 5

15)Drag the Image widget to the top left box area. Click the Select an image link. In the Insert an image dialog that displays, notice that you can upload images From your computer and From already uploaded (images already stored in the Sitefinity database). From your computer, click the Select... button and locate an image. "BlackTruck.jpg" is being used in the example here. Enter "Black Truck" for the Alternative text. Leave the other values at their defaults. Click the Save button to close the dialog.

Figure 51 --Inserting an Im age


Pages

59

16)The truck image is too large and has bled into the space for the content block. Click the Image widget Edit button to begin fixing this.

Figure 52 --Im age Widget With Oversize Im age


60

Sitefinity 5

17)Click the From already uploaded link. Select the black truck image. Then click the Resizing options to open that area. Select the Resize the image width to... option and select "Small: 240 px width" from the drop down list. Click the Save button to close the dialog.

Figure 53 --Fixing the Im age Size

18)Now the image shows at a reasonable size and is proportionate to the content block.

Figure 54 --Im age Widget With Appropriate Size Im age


Pages

61

19)Click the Publish button. 20)From the page list, click the View link next to the "Contact Us" page. The page should look something like the screenshot below.

Q & A...

Q: Is content within the content block indexed? A: Yes, once indexing is turned on, the content block is included in the search indexing automatically. News, blogs, etc. are all included in the search.


62

Sitefinity 5

Editing LayoutArrange where content will go on the page by editing the layout. You can drag layout items around quickly in the page without writing any code. 1) Click the Layout button 2) The left side of the page shows the layout designer and predefined areas that will hold content. Each box in the designer has a hint to "Drag layout elements" to divide the area into columns.

The Layout Designer

3) From the right side, titled Drag layout elements, drag the 25% + 75% layout element into the top box.

Figure 55 -- Dragging a Layout Elem ent


Pages

63

4) Now the top box is sub-divided into two areas, one with 25% width and the other with 75%. Click the Edit button.

Figure 56 -- New Layout

5) Move the mouse between the two columns and drag the resize handles to reportion the column widths. Set the left column to around 20% and the right column to around 80%.

Figure 57 --Changing Colum n Proportions


64

Sitefinity 5

6) On the right side of the designer, the Edit Layout Element area allows you to fine tune the box sizes in either percentages (the default) or pixels. Enter the value "30" in the space for Column 1 . Column 2 is marked as auto-sized and will automatically change to "70%".

Figure 58 --Changing Sizes


Pages

65

7) Click the Spaces link. The amounts below increase the space between the outside edge of the content and the area surrounding the content. Change the first column spacing to have "5" pixels on each side. Change the second column to have "5" pixels on the top, right and bottom, and "20" pixels to the left. As you edit the amounts, notice the changes to the columns displayed to the left.

Figure 59 --Editing a Layout Elem ent Spaces


66

Sitefinity 5

8) Click the Classes link. Each column in the screenshot below is using a predefined CSS (Cascading Style Sheet) class that's built into the system. You can also use Wrapper to add styles to the entire box area. If your designer supplies styles for the project, you can apply those styles here.

Figure 60 --Editing a Layout Elem ent Classes

9) Click the Done button. 10)Click the Save as Draft button.


Pages

67

Tour of the HTML EditorInitially, the buttons for the HTML Editor show only a minimal set of options. You can toggle this using the More Formatting Options button located on the right hand side of the button bar. The screenshot below shows key editor features:


68

Sitefinity 5

Hyperlink/Remove Link: The Insert a link dialog that displays in response to this button allows you to create links for web addresses, pages from your Sitefinity site or email. Use the dialog to set the Web address and Text to display. Options in the dialog allow you to set the Tooltip, the CSS class and if the link should be opened in a new window.

Figure 61 --Inserting a Hyperlink


Pages

69

Image Manager: The Insert an image dialog that displays in response to this button allows you to load images from your local computer to your website or use images that have already been loaded to the Sitefinity database. You can load the image to an Album, assign Alternative text (to satisfy accessibility requirements) and resize the image automatically to predefined dimensions (e.g. "thumbnail", "large", etc.) or set custom dimensions.

Figure 62 --Inserting an Im age


70

Sitefinity 5

Spell Check is performed directly in the HTML editor. A message at the top of the editor notifies that the editor is in Spell checking mode. Buttons to the right allow you to Finish spellchecking and Cancel . The list that drops down under each misspelled word contains alternative correct spellings and options to Ignore, Change Manually or Add the highlighted word to the dictionary.

Figure 63 --Spell Checking


Pages

71

Paste From Word inserts content without losing the Word formatting. For example, if you have a heading, subheading and some paragraph text, a standard paste will pick up on the fact that there's a heading and display it as such, but will lose the detailed font style formatting. The Paste From Word option retains the detailed font formatting. The next few screenshots show content in Word, then the same content pasted to the editor window, then finally the same content Pasted as Word to the editor window.

Figure 64 --The Content in Word

Figure 65 --Using Control-V to Paste Word Content


72

Sitefinity 5

Figure 66 --Using Paste from Word

The Tables button drops down a list where you can define a table by dragging the mouse graphically, or use the buttons below to invoke the Table Wizard , add/merge/delete rows and columns and to set table properties.

Figure 67 --Creating Tables


Pages

73

The Symbols button drops down a list of characters that would otherwise be unavailable from the keyboard. For example, when you need to paste the Copyright symbol in a document, you can select it from this list. Select a symbol with the mouse to insert it into the HTML Editor.

Figure 68 --Inserting Sym bols

The Format Stripper button allows you to remove all excess formatting, or just certain aspects, such as Css formatting. Word formatting is famous for being verbose, so Strip Word Formatting will remove all that extra HTML.

Figure 69 --Rem oving Form atting


74

Sitefinity 5

The Find & Replace button displays a dialog that can search for a given word or replace a found word with another. The search is performed from the current cursor position with the search Direction traveling either Up or Down. The dialog includes industry standard Search Options, Match case and Match whole words.

Figure 70 --Find & Replace Dialog


Pages

75

The Media Manager button displays a dialog that works exactly like Insert an Image except that the Insert a Video dialog accepts *.wmv files.

Figure 71 --Inserting a Video


76

Sitefinity 5

The Document Manager dialog allows you to insert any document file. Clicking the Insert the document or other file button inserts a link to the file in the HTML Editor using the text in What title to display .

Figure 72 --Inserting a File


Pages

77

Tour of Page AdministrationAs your own website builds in size and complexity, you will need to work on all your pages in one place. For example, you may want to search for a certain set of pages, then publish them all. Page Administration allows you to work on all your pages. The top left of Page Administration contains the Function Bar, below that the list of pages and to the right, the Manage Pages area.

Figure 73 -- Page Adm inistration

Page ListPages are listed in a tree structure. The screenshot below shows our home "Welcome" page, with the "Contact Us" underneath it. Notice the "House" icon that lets us know that Welcome page is the default home page. Also notice the green check marks that indicate these pages are published. Click the name of the page to edit the page or click the View link to preview the page at any time in a separate browser. The Actions menu provides the full set of options possible for the page, such as deleting, editing, etc. The Date/Owner column shows the creation date of the page and the person that created it.

Figure 74 --Page List


78

Sitefinity 5

ActionsThe Actions drop down menu is available for every page. With the Actions menu you can Delete the entire page, or Unpublish to make the page invisible to the outside world. If you want to create a page that's almost the same as an existing page, you can use the Duplicate option to make a copy. The duplicated page will have all the same SEO settings, along with Title, Keyword, Description and content. Before you duplicate a page, consider using a template for aspects of the page that don't change. Also be aware that duplicated pages must have a unique Url. Click the Set as Homepage option if the page should be the default when navigating to the site. Only one page can be the Homepage.

Create a child page adds a new page underneath the current page in the tree hierarchy. The Edit... section of the Actions menu allows you to go back and edit the Content or Title and Properties. Permissions determines who can see and perform other actions on the page. See the upcoming section on Permissions for a thorough discussion on controlling access to your pages. Revision History allows you to see each of the changes made to the page, who made these changes and when. If a later version has serious mistakes, you can also revert to any earlier version. The Change section of the Actions menu allows you to change the Template for the page. For example, if I want the page that has a single column and header and footer to use the Apple style "Promo" layout with three columns, then I can change the template for the entire page. Be aware that, as of this writing, the content will be removed. You can also change the Owner for the page so that you can pass off certain pages to other members of your team so that they can search for pages that they have responsibility for. Use the Move... section Up and Down options to move the page in the tree hierarchy. More options may show up on this menu depending on the state of the page. For example, if the page is locked, the Unlock option will display here.


Pages

79

Notes

All items in the menu will only show up if you have the appropriate permissions. For example, you might not see the Change Owner option if you don't have the correct permissions.

Saving Drafts and PublishingWhen you click the Save button, the content is recorded in the revision history (shown on the right of the screenshot below). The revision history allows you to compare versions, roll back to earlier versions and add notes to particular versions.


80

Sitefinity 5

Manage PagesThe example site only has a couple of pages right now, but as you build your own production website, it will become harder to locate certain pages when you want to maintain them. The Manage Pages area to the right of the page list allows you to Filter pages quickly. The filters shown here are not random, but reflect Telerik's experience working with Sitefinity customers in real-world situations. For example, lack of Descriptions or Keywords are not best practice for Search Engine Optimization.

Clicking a filter performs an AJAX based search, that is, the page does not refresh and the search returns more quickly. You can use the "With No Keywords" filter for example to get the pages where keywords were left out. You can, of course, just filter to show only your own pages. Using the by Date modified... filter you can look at the most recent changes, or use a custom date and time range. The Manage also > Templates option is a shortcut for Design > Page Templates. The Permissions for all pages option allows you to change the access to all pages at one time, controlling what roles can view, edit, modify, change permissions and so forth.


Pages

81

Function BarThe Function Bar works against all selected pages at one time. The checkboxes to the left of each page indicate which pages are affected. You can Create a child of the selected page to extend the hierarchy of pages. The More actions drop down menu includes the ability to change the page Template (i.e. the predefined overall layout of the page). You can also restructure your page by dragging and dropping pages.

Figure 75 --Using the Function Bar

To narrow down a long list of items, click the Search... button, enter the text to search for and click the Search button. The search is not case sensitive and looks for Titles that contain the search text. Click the Close Search button to return to the unfiltered list of items.

Figure 76 --Searching for Item s


82

Sitefinity 5

SummaryThis chapter explained the options for creating and configuring a page. You learned how to edit page content and layout, paying particular attention to working with the HTML Editor. A tour of the page administration explored the list of pages, the possible actions, filtering and managing pages.


5Content

84

Sitefinity 5

5

ContentWhile you can add page content on-the-fly in Sitefinity, the content is kept separately and can be managed from the Content menu items. Why is content managed separately in Sitefinity? Imagine you have a company logo, or a document (say, a legal disclaimer) and you need to change the content. Then, your organization changes logo images or the legal department has new wording that must be implemented. If the logo or document is used in hundreds of places on your site, you would need to update each. Not only would that be time consuming, forgetting to change the wording on a legal document on a single page could cause problems for your organization. If the image or document is kept in a single place, you can make changes once and know that the change will show up everywhere it is used. Not only that, as you build up libraries of content, you can mix-and-match existing material to build new pages more easily.


Content

85

ObjectivesThis chapter tours the Content Menu and demonstrates how to work with each type of content. You'll learn how to create content, how to use widgets to display content in a page and how to configure the widget to fine-tune the layout and behavior of the content.


86

Sitefinity 5

Tour of the Content MenuThe Content menu item lets you add standard subject matter like Blogs, Images and Events. The initial page for each type of Content will display a message that "no items have been created yet" and a link to create the first item. The screenshot below shows a representative example from the News page.

Figure 77 --Link to Create a New Item

When at least one item has been created, the page displays the items in a list. The screenshot below shows an example of News items. Above the list is a Function Bar containing Create and Delete buttons, a drop down list of More actions and a Search... button. To the right of the list is a Manage column with additional actions. The presentation of buttons and list will vary according to the type of content shown.

Figure 78 --Content List


Content

87

Content BlockNews, Events and Content Block are similar to one another with only minor variations. The simplest item, Content Block, has a title and some HTML. To create a Content Block: 1. Drop down the Content menu and select Content Blocks. 2. This is the first time to visit the Create a Content Block page, so you will see the "No Content Blocks have been created yet" message. Click the Create a Content Block link. This will display the Create a Content Block page.

Figure 79 --Creating a Content Item


88

Sitefinity 5

3. Enter a Title. Below the title area, enter any text or HTML content in the HTML Editor.

Figure 80 --Content Block Title and Content


Content

89

4. Categories and Tags help you organize content and allow search engines to locate and rank your content. Categories are used when searching the website while Tags are used by external search engines. In the Categories and Tags area of the page, select the Categories Change button to add categories. You may also enter a comma-separated list of Tags.

Figure 81 --Entering Categories and Tags

Q & A...

Question : Do categories have to do with Search Engine Optimization (SEO)? Answ er : Categories are used for searching the site within Sitefinity. SEO is driven by title, description and keywords.

5. Click the Create this content block button. 6. In place of the "No Content Blocks have been created yet", the items will display in a list that shows the item Title, a drop down list of Actions, the Owner and the Date.

Figure 82 --The Content Block Page


90

Sitefinity 5

7. Click the Pages menu item, then click the "Welcome" page link to edit the content. Alternatively, you can also click the Actions > Edit... > Content. 8. Drag the Content Block widget to the second row, right side column of the "Welcome" page.

Figure 83 --Adding the Generic Content List Widget

9. Click the Edit link of the Content Block widget.

Figure 84 --Editing Content


Content

91

10.In the Edit dialog that displays, click the Select from existing shared content button.

Figure 85 --Selecting from Existing Shared Content

11.You will see a list of shared content items. Select the "Classic Car Appraisal" item you created earlier, then click the Done selecting button to return to the Edit dialog.

Figure 86 --Selecting Existing Content


92

Sitefinity 5

12.Back in the Edit dialog, click the Save Changes button.

Figure 87 --Saving the Shared Content

Notes

The Edit dialog notifies you that the content is shared among any pages that reuse this particular Content Block. You can edit the content and the changes will ripple out to all pages where its used.


Content

93

13.Click the Publish button to make the content available to a page on the website.

Notes

If you decide to Save a Draft, the content item is saved in the database, but is not available to use in a page. Only after the content item is published can you use it and have it visible in a page.

14.View the "Welcome" page and view the new Content Block.

Figure 88 --View ing the Content Block


94

Sitefinity 5

NewsNews is almost identical to Content Block except that News includes a Summary section below the HTML Editor and a Additional info section that records the Author of the news article, the Source name that supplied the news and a Source URL.

Figure 89 --Additional Info


Content

95

1) From the administration menu, click Content > News. 2) Click the Create a news item button. 3) Enter a Title and add content text for your news article.

Tip!

If you're at a loss for words and simply want sample text so you can see how Sitefinity handles it, you can use "Lorem Ipsum". "Lorem Ipsum" is dummy text used by designers to simulate content when they're more interested in how the content will be arranged on the page. For example: "Duis rutrum nunc mauris, a molestie sem. Morbi semper dictum nulla, ut volutpat diam luctus in. Aliquam commodo varius lacus non interdum." Try the Lorem Ipsum generator at http://www.lipsum.com/ to create paragraphs, words or lists of text. Cut and paste the text into your news article content area or use one of the browser plug-ins.

4) Click the Click to add summary link. The Summary is important because we can display this in a list of news without reproducing the entire news item. 5) Click the Publish button. 6) Create and publish a second News item 7) Navigate to the "Welcome" page. 8) Drag the News widget to the left side of the second row. 9) Notice that all news items you have created show up in the list along with the one line Summary and a link to the full news story.


96

Sitefinity 5

10)Click the Edit link at the top of the News widget. Notice the three different sections you can use to tailor the presentation of the news: Content, List Settings and Single Item Settings. Content lets you show all of the published news, a single news item or filter new by a combination of Categories, Tags and Dates. Use the One particular news item only... option if you want the entire news article displayed directly on the page. Leave the default settings with the All published news option selected.

Figure 90 --Editing New s


Content

97

11)Click the List Settings option to configure how multiple news items will be displayed by the News widget on a page. Use paging limits the news items that show at one time and provide links for overflow news items. This option lets you control the amount of real estate that gets used on the page, particularly if you have other material to fit in. Use limit shows only X number of items. You can use this option along with the Sort news drop down to show a few of the newest items. No limit and paging just dumps all your news items out on the page in a list. The Sort news drop down list allows you to order news items by Last published on top , Last Modified on top , By Title (A-Z), by Title (Z-A) or As set in Advanced Mode. List template determines how the news content will be arranged on the page. Typically you will choose one of the predefined templates on the left, e.g. Titles and Dates. Telerik has presented you with the usual industry standard layouts, but if you need a specific layout, you will not hit the wall. Clicking the Edit selected template button allows you to change the layout and content of the template. Note: Tweaking the template does involve working in HTML, but you're supplied with all the fields that Sitefinity has access to, and Sitefinity creates the HTML you need so you can cut and paste to your template.

Figure 91 --List Settings


98

Sitefinity 5

12)Click the Single Item Settings of the News dialog. 13)The Single Item Settings let you choose to use the Auto-generated page or select an existing page. Typically, you will use the Auto-generated page option. If you have a custom page built to display the news, use the Select existing page... option to include this custom page instead. Leave the default settings here and click the Save button to close the dialog.

Figure 92 --SIngle Item Settings


Content

99

Q & A...

Question : What does the Advanced button do? Answ er : Advanced shows a list of all possible properties for the widget. For example, if your organization's designer adds a CSS (Cascading Style Sheet) file to the Sitefinity project, you could enter the name of a style in the CssClass property. Clicking the Simple button returns you to the original settings view.


100

Sitefinity 5

14)Click the Publish button for the "Welcome" page. 15)Click the View button for the "Welcome" page.

Figure 93 --New s List

16)Click the Full story link under one of the news items. This automatically generated page displays the full news article along with a comment section.

Figure 94 --New s Detail


Content

101

EventsEvents are similar to Content Blocks but with additional sections to record the event summary, event start/end dates, location and contact information. 1) From the administration menu, click Content > Events. 2) Click the Create an event button. 3) Enter a Title and add content text into the HTML Editor. 4) Below the HTML Editor, enter a Summary , Event start and Event end . Click the Event start and event end text boxes to pop up date and time picker widgets automatically.

Figure 95 --The Event Sum m ary


102

Sitefinity 5

5) In the Location section, enter the event Street, City , Country and State.

Figure 96 --Event Location

6) In the Contact information section, enter details for the person acting as the main contact for the event.

Figure 97 --Event Contact Inform ation.

7) Click the Publish button.


Content

103

Tip!

In this example we want to see the event right away. But in a production website you may want the event to expire after the event has started or expire when the event is over. You can use the Schedule action from the menu to set start and stop dates and times for the event. Once the event becomes automatically unpublished, the event will not be visible on the page.

8) Navigate to the "Welcome" page. 9) Drag the Events widget to the left side of the second row.

Figure 98 --The Events List


104

Sitefinity 5

10)Click the Edit link at the top right of the Events widget. Notice that the arrangement of the Events dialog is very similar to the News dialog. The Content tab allows you to filter which events to display. The List Settings and Single Item Settings are almost identical to News except that Events displays Titles, Cities, Dates and Summaries.

Figure 99 --Editing Events

11)Click the Publish button for the "Welcome" page. 12)Click the View button for the "Welcome" page.


Content

105

13)Click the event title link to see the detail. Like news articles, the event detail has a predefined format that includes all the date, location and contact information. The format also includes a comments area.

Figure 100 --Event Detail


106

Sitefinity 5

Images and AlbumsImages are stored in Albums. You can use the default album or create your own. Here are the steps to create an album and upload images to the new album. 1. From the Administration page, click the Content > Images menu item. 2. In the Images page, click the Create an image library link. 3. Enter an Album name, click the Click to add a description link and describe the album contents.

Figure 101 --Defining the Album Nam e and Description

4. In the Default image size section, click the Resize images... option and select "Small: 240 px width" from the drop down list.

Figure 102 --Defining Default Im age Size


Content

107

Notes

If you choose to "Resize images...", you can select from the predefined dimensions Thumbnail , Small , Medium, Large, or Extra Large.

Figure 103 --Selecting a Maxim um Size


108

Sitefinity 5

5. In the Advanced section, enter Max album size in megabytes, Max image size in kilobytes and customize the URL. You don't want to allow people to upload files that are huge and take over the hard disk on the server. The default is "anything goes", but you should make a decision on the maximum image size allowed. You can also change the URL of the image library, the Storage provider can be Database or File System, and you can also set caching options for both the Server caching and Browser caching .

Figure 104 --Setting Advanced Properties


Content

109

Notes

Caching is set to As set for the whole site as the default. Click the Details link to see what the current settings consist of. The Details popup shows the caching options, the HTTP Header equivalent, and the path to reconfigure these settings.

6. Click the Create and go to upload images button. 7. In the Images Page, click the Upload Images link. 8. In the Upload images page, click the Select images link.

Figure 105 --Selecting Im ages


110

Sitefinity 5

9. In the Windows Open file dialog that displays, navigate to image file location. Select and open one or more image files.

Figure 106 --Selecting Im ages

10.In the Upload images Page, open the select an album drop down, select the new "Cars" album.

Figure 107 --Selecting an Album

11.Click the Upload and publish button to store the images. Wait a moment as all the images are uploaded. When the "images have been successfully uploaded " message displays, click the View all images button to return to the Images Page.

Figure 108 --Successfully Uploaded Message


Content

111

12. Review the uploaded images.

Figure 109 --Im ages Page


112

Sitefinity 5

Displaying Image ContentYou can display a single image using the Image widget, as demonstrated in the "Editing Content" section. The Image Gallery widget can display a series of images in a number of formats. To demonstrate, let's create a new page called "Marketplace". 1) From the Pages administration, locate the "Welcome" page, click the Actions menu and select the Create as child page option. 2) Name the new page "Marketplace", In the Template section, select the "1 Column, Header, Footer" template. Click the Create and go to add content button. 3) Drag the Image gallery widget to the top box area. All of your uploaded images should display. Remember that the "Black truck" image was loaded into the default gallery. The other images have been loaded to the new "Cars" gallery. Both sets of images should be displayed. 4) Click the Image gallery widget Edit link. 5) The Image Gallery dialog has two links, Images and Settings. The Images link lets you fine tune which images w

Sitefinity 5 Nuts & Bolts - PDF

Documents

protected

protected

protected

summarythis

objectivesthis

im age gallery

layout elem

device sizes

Transcript of Sitefinity 5 Nuts & Bolts - PDF

Bolts, Nuts, Washers, Allthread - Anzor Fasteners. AU Catalogue - Bolts... · Bolts, Nuts, Washers, Allthread 13 Bolts, Nuts, Washers, Allthread browse / view your prices / enquire

College Nuts & Bolts

LearningElite Nuts & Bolts

NUTS, BOLTS & WASHERS -

Asmcue nuts and bolts

NUTS AND BOLTS - Ledwell

The Nuts and Bolts of PAP The Nuts and Bolts of PAP - Including … · 2014. 2. 26. · The Nuts and Bolts of PAP - Including CPAP Tracking The Nuts and Bolts of PAP - Including CPAP

NUTS & BOLTS

Chesterton-Nuts and Bolts of Industrial Fasteners A193, Grade B7 ... The Nuts and Bolts of Industrial Fasteners. ... Chesterton-Nuts and Bolts of Industrial Fasteners

Screws Nuts Bolts

Bolts Nuts Washers

Nuts and Bolts: Resources

Nuts and Bolts: Evaluations

Sepsis nuts&bolts

HR Nuts & Bolts

NUTS AND BOLTS

Bpm nuts & bolts

Nuts, bolts, screws and washersDrawing nuts and bolts It is often necessary to draw nuts and bolts and a quick easy method is required to produce a satisfactory result. Nuts and bolts

Nuts and Bolts Sizes

Bolts Nuts