The user guide may be freely distributed in its entirety, either digitally or in printed format, to all EPiServer Composer users.

Transcription

1

2 Copyright This user guide is protected by the Copyright Act. Changes to the contents, or partial copying of the contents, may not be made without permission from the copyright holder. The user guide may be freely distributed in its entirety, either digitally or in printed format, to all EPiServer Composer users. User s Guide for EPiServer Composer Created October 2, 2009 Updated October 13, 2009

3 Table of Contents 1 Table of Contents INTRODUCTION 4 WHAT IS EPISERVER COMPOSER?... 4 TWO ELEMENTS... 4 Content Area... 4 Content and Layout Blocks... 4 CREATING A NEW PAGE 6 EPISERVER COMPOSER IN EDIT MODE 7 ACCESSING THE EDIT MODE... 7 THE TOOLBOX... 7 My Favorites... 8 Content Blocks... 8 Layout Blocks... 8 Global Blocks... 8 Clipboard... 8 Trash... 8 Administration Tab... 8 THE TOOLBAR... 8 ADDING BLOCKS... 9 Access Rights for Adding Blocks EDITING CONTENT BLOCKS MOVING BLOCKS DELETING BLOCKS VERSION AND LANGUAGE MANAGEMENT 14 VERSIONS Show all Languages Editing a Version LANGUAGES Switching Language Creating New Language Version Copying Language Version DELETING VERSIONS AND LANGUAGES TEMPLATES 16 CREATING TEMPLATES EDITING TEMPLATES USING TEMPLATES DELETING TEMPLATES GLOBAL BLOCKS 18 CREATING GLOBAL BLOCKS EDITING GLOBAL BLOCKS USING GLOBAL BLOCKS DELETING GLOBAL BLOCKS EPISERVER COMPOSER IN ADMIN MODE 20

4 2 User s Guide EPiServer Composer FUNCTION TYPES Adding a Content Function Editing Function Information Adding Properties Setting Access Rights Defining Rules Available Content Areas TEMPLATES PAGE TYPES Adding a Page Type CATEGORIES EXPORT SETTINGS COMPOSER - IMPORT/EXPORT COMPOSER RE-INDEX PAGES... 30

5 3 User s Guide EPiServer Composer 3.2.6

6 4 User s Guide EPiServer Composer Introduction EPiServer Composer is a module developed for EPiServer CMS 5. This manual is intended for editors and will only cover editing options specific for EPiServer Composer. For instructions on EPiServer CMS standard functionality we recommend you to read the EPiServer CMS Editor s Manual, which is available at What is EPiServer Composer? EPiServer Composer allows people without programming skills to create and change page types, introducing a new way of working with EPiServer CMS. Until now, editors had to turn to their system developer to add, remove and change the functions at the Web site. EPiServer Composer will instead list them in a function library, allowing you to drag and drop them directly at the Web site. An intelligent permission system controls where you are allowed to drop them to maintain the structure and layout of the page. Everything is done in the EPiServer CMS user interface already familiar to you. EPiServer Composer should be applied to dynamic pages where you really want to benefit from a flexible layout. Two Elements The EPiServer Composer concept is built around two essential elements, Content Areas and Content and Layout Blocks. Content Area Just like EPiServer CMS, EPiServer Composer uses page types. The difference is that the page types in EPiServer Composer only consist of an external framework that contains the basic graphic appearance such as navigation, page header/footer and other mutual elements. Apart from that, EPiServer Composers page types only consist of one or more empty content areas. Content and layout blocks representing the functions of the page are then placed in the content area. Most EPiServer Composer projects only require two page types one for the start page and a second one to be used when creating pages on the rest of the Web site. Content and Layout Blocks The functions of the page are created by placing content and layout blocks in the content area. Content blocks is what resembles the traditional page types in EPiServer CMS the most. The blocks are smaller isolated functions that can be anything from a simple editor to complex applications integrated with other systems. The layout blocks on the other hand are used to create the distribution of the page by dividing the content area into smaller areas. A blue C or yellow L in the top left corner of the block indicates what type of block you have placed in the content area.

7 Introduction 5

8 6 User s Guide EPiServer Composer Creating a New Page A new EPiServer Composer site is created from the EPiServer CMS Edit mode the same way as a standard EPiServer CMS page, with the difference that you will be selecting an EPiServer Composer page type instead of a standard EPiServer CMS page type, in the page type list. 1. In the EPiServer CMS Edit mode, create a new page and select an EPiServer Composer type in the page type list. 2. Give the page a name, set the publishing dates and properties just like you would when creating a standard page in EPiServer CMS. 3. Select Save and view. The page will then reload, but will still not have any content. 4. To add content, select the Edit tab for the new page, and then select the Composer tab to open the Edit mode of EPiServer Composer. Or, you can right-click in the new page and select the EPiServer Composer Edit On Page mode.

9 EPiServer Composer in Edit Mode 7 EPiServer Composer in Edit Mode Accessing the Edit Mode The EPiServer Composer Edit On Page mode can be accessed in three ways: From the EPiServer CMS Edit mode by selecting the Edit tab for the page that you want to edit, and then selecting the Composer tab. From the EPiServer CMS Edit mode by right-clicking in the page you want to edit and then selecting the EPiServer Composer Edit On Page mode (this will take you to the Composer Edit On Page in EPiServer CMS View mode). Directly from the EPiServer CMS View mode, by right-clicking the page and then selecting the EPiServer Composer Edit On Page mode. The first option is useful if you have pages that have both EPiServer CMS and Composer content areas. With the last two options you will work from the EPiServer CMS View mode and you will be able to see the page as you create it instead of having to switch between Edit and View mode. Once you are in the EPiServer Composer Edit On Page mode, you can drag and drop layout and content blocks into the page using the EPiServer Composer drag and drop technique. This is done using the Toolbox visible both on the EPiServer Composer tab in the traditional Edit mode, and in EPiServer Composers Edit On Page mode. The Toolbox The toolbox appearing in the top right corner of your screen holds all the functions available to your Web site in the form of different blocks. The buttons in the top right corner of the toolbox are used to expand and collapse the toolbox and to move it back to its original position if it has been moved.

10 8 User s Guide EPiServer Composer My Favorites Drop the blocks you use the most from the content area to My favorites to make them more easy accessible. Content Blocks Content blocks can be articles, images, news lists or movies for example. Your developer creates the blocks available to your Web site. The categorization of the blocks is controlled by settings available to the EPiServer Composer administrator only. Layout Blocks Layout blocks are used to define how the content should be distributed on the content area, for example dividing it into two equal sized areas. Global Blocks Global blocks are administered centrally and can be used any times with the same appearance everywhere at the Web site. Clipboard Drop blocks in the clipboard to save a copy to reuse later. Trash To delete blocks from the Clipboard or My favorites, drop them in the Trash. Administration Tab The Administration tab displays information about global blocks and templates, and is only visible to the EPiServer Composer administrator. The Toolbar The EPiServer Composer toolbar at the top of the screen offers the following options:

11 EPiServer Composer in Edit Mode 9 You can Save and view, Save and publish or Cancel any changes you that have made to a page. If you have the proper access rights, you can also use the Save as template option to create a template from a page. If you have the proper access rights, you can update common page settings from here by selecting Page settings. Clicking the blue question mark will take you to a Help section. Clicking the EPiServer Composer logotype will tell you which EPiServer Composer version you are running. Adding Blocks Start building your EPiServer Composer page by adding layout and content blocks into the content area. A layout block is often a divider that splits the available content area into two or three parts, for instance with proportions 50/50, 75/25 or 33/33/33. When you have added the layout blocks, you will add the content blocks, for instance text, images or page listings, into the different layout blocks. 1. Open the the page for editing in the EPiServer Composer Edit On Page mode. 2. Select the content area where you want to add a block by clicking in it. 3. Depending on which type of block you want to add, expand the Layout blocks or Content Blocks sections of the EPiServer Composer toolbox. 4. Select the block you want to insert, and drag and drop it into the area where you want it. 5. Continue by adding more blocks, or by editing a content block. 6. When you are finished editing the page, select Save and view or Save and publish in the toolbar.

12 10 User s Guide EPiServer Composer Access Rights for Adding Blocks In EPiServer Composer, you can set access rights for which blocks (layout or content) may be used where in a page. For instance, it might be that you are not allowed to enter a file list in a certain content area of a page. If there is such a limitation, you might get a message saying You do not have permission to create the content function here. These access rights limitations are set by your EPiServer Composer administrator in the EPiServer Composer administration interface. Editing Content Blocks When editing content blocks, you will add the information as you would normally do, and set start and stop publishing dates if you wish. In addition to this, you can also set access rights for the block and decide which user groups should have access to view the information. The block will be hidden to users that do not have view access. Note that the content block will look different depending on the type of content and functions. Here we have described a text content block, with an editor area. 1. To edit a content block, select edit or double-click the block frame. 2. The block editing dialog box will be displayed.

13 EPiServer Composer in Edit Mode 11 The Content tab is similar to the traditional EPiServer CMS page types and will look different depending on what type of function you are working with, for instance text, image, page list or RSS. The icons on top of the text editor are familiar to everyone with experience in traditional EPiServer CMS editing. Enter or update the information under the Content tab. When you are done, proceed to the next tab or select Save to save your changes. 3. The Advanced information tab allows you to set a start and stop publish date on each individual block. Enter or update the information under the Advanced information tab. When you are done, proceed to the next tab or select Save to save your changes. 4. Under the Access tab you can set the read access rights for a block by adding and removing users and user groups in the list. The block will be hidden to users that do not have read access rights.

14 12 User s Guide EPiServer Composer Enter or update the information under the Access tab. When you are done, select Save to save your changes.. NOTE When a block is unpublished, or when the page is displayed to someone without viewing access on a particular block on that page, the surrounding blocks will flow upwards if possible. Moving Blocks If you want to change the display order of blocks on a page, you can use drag and drop to move them around. 1. Open the page for editing in EPiServer Composer Edit On Page mode. 2. Select the block that you want to move by clicking the frame of the block, then drag and drop it into the area where you want it. 3. Select Save and view or Save and publish in the toolbar. Deleting Blocks To delete a block, do the following: 1. Open the page for editing in EPiServer Composer Edit On Page mode. 2. Select Delete in the block frame to delete it. 3. Select Save and view or Save and publish in the toolbar.

15 EPiServer Composer in Edit Mode 13

16 14 User s Guide EPiServer Composer Version and Language Management With EPiServer Composer version you can manage page and language versions directly from the EPiServer Composer Edit On Page mode instead of having to switch to the EPiServer Edit mode. Versions Versions are available in the Toolbox under the Versions tab. The version list will display all versions of the current page. Show all Languages Check the Show all languages option to display all versions of a page in all available languages. Editing a Version Select the Edit icon to edit the selected version of a page. Languages The language function will only be available if the globalization is activated in EPiServer CMS. Please refer to the EPiServer CMS documentation to find out more about the globalization feature and how this is activated. Switching Language Languages are available from the Toolbox under the Versions tab. The Languages drop-down list will display all languages that are available for the Web site. To switch between languages, do the following: 1. Open the page for editing in EPiServer Composer Edit On Page mode. 2. Select the Version tab in the Toolbox. 3. Under Languages, select the language you want to display. If the page exists in that language, EPiServer Composer will switch to display that version. If the page does not exist in that language, a message will be displayed prompting you to either create a new version or to copy the existing language version.

17 Version and Language Management 15 Creating New Language Version If a page does not exist in a requested language version, you have the option to create the new language version. To create a new empty language version of an existing page, do the following: 1. Open the page for editing in EPiServer Composer Edit On Page mode. 2. Select the Version tab in the Toolbox. 3. In the Languages drop-down list, select the requested language option. 4. Select New to create a new, empty version of the page. 5. Enter content into the page and save your changes. Copying Language Version If a page does not exist in a requested language version, you have the option to create a new language version by copying from an existing language version. A new language version will be created with the same layout and content as the existing one. From here you can change and translate content as desired. To create a new language version by copying an existing page, do the following: 1. Open the page for editing in EPiServer Composer Edit On Page mode. 2. Select the Version tab in the Toolbox. 3. In the Languages drop-down list, select the requested language option. 4. Select Copy to create a new language version of the page with existing content. 5. Change content in the page and save your changes. Deleting Versions and Languages Note that deleting versions and languages is done from the EPiServer CMS Edit mode, just as for ordinary EPiServer CMS pages.

18 16 User s Guide EPiServer Composer Templates EPiServer Composer templates are used when creating commonly used pages with similar appearance, for example news pages. When creating a new page you can then use an EPiServer Composer template. Unlike the EPiServer Composer page types, an EPiServer Composer template will already have content functions in place when you create it, allowing you to start editing the content right away. The templates can have been saved both with and without content in the content blocks. NOTE Only EPiServer Composer administrators can create and edit EPiServer Composer templates. Creating Templates To create an EPiServer Composer template, do the following: 1. Open the page which you want to create a template of, in the EPiServer Composer Edit On Page mode. 2. Select Save as template in the toolbar. 3. Enter a Name and Description for the template, enter an Icon URL to be displayed in the page type list (optional), then select the Enable check box to make the template available to editors for usage. 4. Select Save to save the template. The template will then be available in the page type list when creating new pages in the EPiServer CMS Edit mode. Editing Templates To edit a template, do the following: 1. Open a page in the EPiServer Composer Edit On Page mode. 2. In the Toolbox, go to the Administration tab under the Templates section, and select the template you want to edit. 3. Make your changes to the template and then select Save and publish when you are done. NOTE When you update a template, this will not affect existing content based on that particular template. Using Templates To use an EPiServer Composer Template, do the following: 1. Create a new page in the EPiServer CMS Edit mode.

19 Templates In the page type list, select an EPiServer Composer page template. Available EPiServer Composer page templates will be displayed in the page type list, together with standard EPiServer CMS page types. 3. Edit or add content to the page, then select Save and view or Save and publish in the toolbar. Deleting Templates To delete a template, do the following: 1. Open a page in the EPiServer Composer Edit On Page mode. 2. In the Toolbox, go to the Administration tab under the Templates section, and select the template you want to delete. 3. Select Template settings in the toolbar. 4. Select Delete in the dialog box and then select OK to delete. 5. Exit the page in EPiServer Composer. NOTE When you delete a template, this will not affect existing content based on that particular template.

20 18 User s Guide EPiServer Composer Global Blocks Global blocks are administered centrally and can be used with the same appearance everywhere at the Web site. As an example, this is useful when you want to insert a teaser or a news function into several pages. Instead of creating the same function again and again, you can create global blocks with content that can be reused. NOTE Only EPiServer Composer administrators can create global blocks and edit their content. Creating Global Blocks To create an EPiServer Composer template, do the following: 1. Open the page and the content block from which you want to create global block, in the EPiServer Composer Edit On Page mode. 2. Select the Save content function as Global Function check box. 3. Enter a Name and Description for the global function, then select the Visible in menu check box to make the block available to editors for usage. 4. Select Save to save the global block. The block will now be available to editors in the global blocks list in the toolbox. Editing Global Blocks To edit a global block, do the following: 1. Open a page in the EPiServer Composer Edit On Page mode. 2. In the Toolbox, go to the Administration tab under the Global blocks section, and select the global block you want to edit. 3. Make your changes to the global block and then select Save when you are done. NOTE When you update a global block, this will not affect existing content based on that particular global block.

21 Global Blocks 19 Using Global Blocks Global blocks can be dragged and dropped into content areas just like standard blocks. However, since the content of global blocks is predefined, you will not be able to edit them. To use a global block, do the following: 1. Create or edit a page in the EPiServer Composer Edit On Page mode. 2. Expand the Global blocks list in the EPiServer Composer toolbox. 3. Select the global block that you want to use and drag and drop it into the content area. 4. Select Save and view or Save and publish in the toolbar. Deleting Global Blocks For editors, a global block is deleted the same way as a standard block in a page. This will only remove the particular occurrence of the block. Other occurrences of the block on the Web site will still remain and the block will will still be available under the Global blocks section in the Toolbox. EPiServer Composer administrators can delete global blocks from the Global blocks section in the Toolbox. As an administrator, do the following to delete a global block from the Global blocks section: 1. Open a page in the EPiServer Composer Edit On Page mode. 2. In the Toolbox, go to the Administration tab under the Global blocks section, and select the global block you want to delete. 3. Select Delete in the dialog box and then select OK to delete. 4. Exit the page in EPiServer Composer. NOTE When you delete a global block as an administrator, this will not affect existing content based on that particular global block.

22 20 User s Guide EPiServer Composer EPiServer Composer in Admin Mode When installing EPiServer Composer, the following components will be added to the EPi- Server CMS Admin mode of your Web site: Composer for managing function types, templates, page types, categories and general settings for EPiServer Composer. This can be found under the Admin tab/tools. Composer Import/Export for import/export of EPiServer Composer page types. This can be found under the Admin tab/tools. Composer: Re-index Pages for indexing of pages. This can be found under the Admin tab/scheduled Jobs. The administration of these functions are described more in the following. NOTE You will need administration access rights (access to the EPiServer CMS Admin mode) on your Web site to work with the functions as described here. Function Types In Admin mode, select the Admin tab and then Tools and Composer, to manage EPiServer Composer page types and functions. The Function types tab holds a list of all content functions available to your Web site. The green arrows to the right indicate the position of the functions in the Toolbox visible in Edit mode. You will also see a description of the function and the category it belongs to (set under the Information tab). Select the hyperlinked name in the list of content functions to change the properties of the function.

23 EPiServer Composer in Admin Mode 21 Adding a Content Function New content functions are added by selecting Add new content function. Editing Function Information Under the Information tab you can set the name, description, path and category for the function. You can do the following: 1. Enter a display name in the Name field. 2. Enter a short description of the function in the Description field. 3. In the Url field, fill in the virtual path to the control used for rendering the presentation of the content function. 4. Assign the content function to one or more categories in the Category field. This controls where the function will be listed in Edit mode. 5. Select Save and continue.

24 22 User s Guide EPiServer Composer Adding Properties Under the Properties tab you can set the properties of the content function exactly like you do when defining an EPiServer CMS page type. Setting Access Rights Under the Access tab you can set the access rights for the function by adding users and user groups. This controls the availability of the function to editors, and what they can do with the function. You can do the following: 1. Select Add Users/Groups to select users/groups to set access rights for. You will be able to select from a list of users/groups available on your Web site. 2. Select the desired access rights Read, Create, Change, Delete, Administer, for the user/group. 3. To delete a user/group from the list, select the row for the user/group and select Delete. 4. Select Save and continue.

25 EPiServer Composer in Admin Mode 23 Defining Rules Under the Rules tab you can select the content areas that the function is allowed to be created in. If an editor tries to drop the function in a content area that you have not marked, a message will appear saying Your do not have permission to create the content function here. These rules will guide the editors in creating uniform Web pages. You can do the following: 1. Expand the desired page types and content functions and deselect the areas where you do not want the function to be available. Note that from the default setting is that all functions are available everywhere. 2. Choose Select All Area if you want to reset the function so that it is available in all areas. 3. Select Save and continue.

26 24 User s Guide EPiServer Composer Available Content Areas Displays the content area defined in the the user control (ascx file) for this function. Allows to re-register an updating by clicking on Re-register content areas. Templates Under the Templates tab, you will find the following: List of available EPiServer Composer templates. Templates are created and edited from the EPiServer Composer Edit On Page mode under the Administration tab in the Toolbox. EPiServer Composer global functions. These are created and edited from the EPiServer Composer Edit On Page mode under the Administration tab in the Toolbox. EPiServer Composer dynamic properties. Displays the dynamic properties defined for EPiServer Composer. Select Update to update the overview.

27 EPiServer Composer in Admin Mode 25 Page Types Available page types are listed under the Page types tab. The green arrows to the right are used to indicate the order they will be displayed in the menu appearing to editors when they create new pages. To edit the properties of existing page types, simply click the hyperlinked page type name in the list. Adding a Page Type You can add a new page type by converting existing EPiServer CMS page types into an EPiServer Composer page type. Do the following to add a new page type: 1. Under the Page types tab, select Add page type. 2. In the Name field, type a display name, and enter a short description of the page type in the Description field. 3. Choose the existing EPiServer CMS page type you would like to convert into an EPiServer Composer page type in the EPiServer page type drop down menu. 4. Select Save and continue. 5. The Available content areas tab will list the defined content areas of the page type. Select Save and continue to continue.

28 26 User s Guide EPiServer Composer Under the Access tab you can set access rights on the page type. The access rights you set here will control which editor groups will have access to use the page type, and what they can do with it. 7. Set the desired access rights and and select Save and continue. 8. Finally, go to the Rules tab to set the functions that will be available in the content areas of the page type. Select the content functions allowed to be dropped in the different content areas. Set the desired rules and and select Save and continue.

29 EPiServer Composer in Admin Mode 27 Categories Under the Categories tan you can add, delete, edit and change the display order of the content function categories. The settings here control the categories that will be available for categorization of layout and content blocks in Edit mode. Select Add to add a category, then give the category a name and a description, and select the Save button. Use the arrows to organize the display list for categories. Export Under the Export tab it is possible to export EPiServer Composer global functions and templates to other Web sites using EPiServer Composer, the same way you do with EPiServer CMS page types. Select Export to create a file to save and import into another Web site.

30 28 User s Guide EPiServer Composer Settings Under the Settings tab you will find a number of different EPiServer Composer settings. Most of these are set up when EPi- Server Composer is installed on the Web site and will rarely need to be changed. Composer Administrators here you decide which user group(s) should have administration rights for EPiServer Composer. The EPiServer Composer authorization is integrated with EPiServer CMS, meaning that you will find the same user groups available here as for EPiServer CMS. Category root for Composer defines the category page root for EPiServer Composer. Error handle level here you set the type of error messages to be displayed as default. Default access rights for page type groups that have access rights to create new page types. Default access rights for function groups that have access rights to create new functions. Editable page properties in Edit-on-page mode page properties that can be edited from the Edit mode. Must be combined with property names in the plug-in settings for EPiServer Composer. Selecting Save at the bottom of the page will save any changes made to the settings.

31 EPiServer Composer in Admin Mode 29 Composer - Import/Export The Composer Import/Export function allows you to import page or function type definitions from other Web sites with EPiServer Composer. The function is available under the Tools section of the Admin tab. The following san be done from here: Import select Browse to choose an import file, then select Begin import to import the page types and functions into the current Web site. Export here you can select the page or function type definitions that you want to export to another Web site. Select the desired page types or functions, then select Export to create an export file.

32 30 User s Guide EPiServer Composer Composer Re-index Pages The Composer: Re-index Pages scheduled job is available under the Scheduled Jobs section of the Admin tab. This job will clean up orphan functions i.e. function instances that was not saved or published after being created. It will also index all text from all EPiServer Composer pages. EPiServer Composers scheduled jobs needs to be run at least once a day, preferably when the site traffic is at its lowest. Select the scheduled jobs intervals and save. Select Active to activate the job, and set the desired time interval. Select Save to save your changes. The job can be started manually be selecting Start Manually. The History tab displays the time and status for executed jobs.