Getting Started 27-September-2012 Liferay Publishing Getting Started 27-September-2012

Topics Getting Started - Access Dropdown Menu Themes How to Add/Delete a Page Manage Pages Layouts Web Content Display Collaborative Tools Message Boards Wiki Calendar Blogs Document Library Look and Feel of portlet header Control Panel Questions The ease of moving individual's content from Microsoft Office documents into web pages for sharing: (Plug-in) Word text and graphics Powerpoint graphics Excel tables and charts What Liferay can do that the various 'integratable' google apps (sites, groups, gadgets, docs, ...) can't

Getting Started I You must have an IEEE Web Account. If not, go to www.computer.org. Click on Login. This will take you to the log in screen. On the Log in screen, click on the Web account text on the bottom right of the page. This will take you through the process of creating an IEEE Account at ieee.org.

Getting Started II Log back in to www.computer.org with your new IEEE Web account. The system will then recognize, capture, and store your account information. The default role is Power User. In order have edit or participate in collaboration, you would need to be added to that particular community by an IT&S admin. Email username, e-mail address associated to account, and which community you want access, and what type of access (i.e. editing or just participate in the collaborative tools) to kfrancia@computer.org. For the demonstration, we will use the Liferay-Demo community at http://www.computer.org/portal/web/Liferay-Demo

Dropdown Menu Next to the Welcome, your name, there’s a dropdown menu. Manage Pages: Page creation and management. Page Layout: Allows you to arrange your pages so that their content appears the way you want it to with predefined layouts. Control Panel: Access to specific functions by role. Toggle Edit Controls: Enable and disable the edit control icons. Add Application: Add Liferay portlets or applications to a page.

Themes Themes are used in Liferay to change the look and feel (mainly the container). The current available themes can be viewed by going to the dropdown: Manage Pages > Look and Feel > Themes. Common available themes: IEEECS Community V4 (and V4.1) Sub navigation bar IEEECS Community Theme V5 Sub navigation bar with header IEEECS Ieeecs Home V4 No sub navigation bar Click Return to Full Page to go back to the page.

How to Add a Page I Here are 2 ways to add a page. This is one way to add a page, if you are using the Ieeecs Community V4 theme, which contains the sub-nav feature. 1a. From the drop down on the upper right hand side of the page, select and click on Add Page. 1b. On the navigation bar, type the page name in the text field. 1c. Click on the green check to save.

Delete the page Specific to a page with a theme with a subnav bar. Hover your cursor over the page on the subnav bar. Click on the X to delete the page. A popup box will ask “Are you sure you want to delete this page?” Click “OK”.

How to Add a Page II (Using Manage Pages) 2a. Click on Manage Pages from the dropdown menu. (You will see the page information for the Liferay Demo Home page. The hierarchy on the left displays the structure of the pages. Liferay Demo Home and Documentation are children pages to the top level Liferay Demo.) 2b. Let’s add a page to the top level. Click on Liferay Demo. 2c. Type in Sample in the Name text box. 2d. Click on the Add Page button.

Page Management The newly added Sample page will display in the tree structure in Manage Pages. Click on Sample. Click on the Page tab to view the page information. HTML Title: The text entered here will display on the Web Browser title bar. The Hidden box allows you to check it to make the page hidden from the subnav bar. Friendly URL is the automatically generated URL. Click Save to save any changes. Click Return to Full Page to go back to the Web page.

Delete Page in Manage Pages 1. Make sure you are at the page that you want deleted (indicators: on top of the Page tab and/or the highlighted on the tree structure. In this case, Sample. 2. Click Delete. 3. A popup box will ask “Are you sure you want to delete the selected page?” Click OK. 4. Return to Full Page.

Layouts Page layouts allow you to arrange your pages so that your content appears the way you want it to. From the dropdown menu, scroll down to Page Layout to view and select the available layouts. Select one and click Save at the bottom.

Web Content: Add Content I You can add content and display it on the Web pages using Web Content. From the dropdown menu, scroll down to Add Application. In the Add Application box, type in Web Content or browse Content Management > Web Content Display. Add or click, hold, and drag to the page. Close out of the Add Application list box by clicking on the X. Click on the Add Web Content icon to add new content.

Web Content – Add Content II 1. In the built-in editor, enter the title in Name. This just names the article and will be stored in the community’s Web Content directory. 2. Enter text in Content. 3. If you want to hyperlink the text, highlight the text, click on “Link” on the toolbar and type in the URL. Be sure to use the relative URL if it’s from computer.org. For example, you would use “/portal/web/guest/home”. You can also set the target to open in a new window by clicking on the “Target” tab, select “New Window (_blank)”. Click OK. 4. Check Public. 5. Click Publish. Note that there is a Save as Draft option, as well. After clicking Publish, the Web Content is saved, published, and will bring you back to the Web page displaying the content.

Web Content – Save as Draft Steps 1-3 from from the previous slide (pre-publish). Click on Save as Draft. This will save the draft and not display on the page until published. You can make more changes in the draft in the CK editor, Return to Full Page, or Discard Draft altogether. After you leave the CK editor, the updates to the content or publish/approve it is done through the Control Panel. Control Panel > Web Content > Access the Web Content from the directory. Make edits and/or click on the Publish button.

Web Content – Add Image I On the Web Content Display portlet, click on the Edit Web Content icon. Click in the Content box of the location where you want to place the image. Click on the Image icon on the toolbar.

Web Content: Add Image II An Image Properties box will pop up. Click Browse Server. This will allow you to upload an image from your hard drive. A Ckeditor – Resources Browser will pop up. Scroll down on the Resource Type dropdown and select Image.

Web Content: Add Image III Still in the Ckeditor, browse and select the community that you are in. In this example, Liferay-Demo. Create a new folder if one doesn’t already exist. For the demo, click on the Images folder. Click Browse on the bottom of the page. Navigate through your hard drive for an image to upload. Select the image. Click Open. The name of the image will appear in the folder. Select it. The image will now appear in the Image Properties box and will automatically populate a URL. Click OK. Click Publish in the editor.

Add Alt Tag to Images ADA Compliant Enter Alternative Text into the field in every instance.

How to Add a Message Boards Portlet On the dropdown menu, click on Add Application. The Add Application list box will appear on the left hand side of the page. Type Message Boards in the search box OR go to Collaboration > Message Boards. Add OR click, hold, and drag the portlet to the page. After the Message Boards portlet is on the page, close out of the Add Application box, by clicking on the X. The Message Boards portlet is a collaborative tool used for general public communication among users. You can add categories and subcategories to the message boards. By default, categories stack in alphabetical and numeric order. Users can subscribe to threads or categories and receive emails when they are updated.

Message Boards: Add Category Click on the Add Category button. The New Category page will open (left screen shot). Enter a name in the Name text box. Enter a description in the Description box. For demo, let’s check the Public box. Click Save.

Message Boards: Post New Thread Click on the Post New Thread button. The New Message page will open (left screen shot). Enter a name in the Name text box. Enter a message in the Body box. For demo, let’s check the Public box. Options to Attach Files, Save as Draft, Preview, Publish, or Cancel. For demo, let’s click Publish.

Message Boards Home Click on Message Boards Home and the new category and thread will display on the page.

Wiki: Add a Wiki Portlet On the dropdown menu, click on Add Application. The Add Application list box will appear on the left hand side of the page. Type Wiki in the search box OR go to Collaboration > Wiki. Add OR click, hold, and drag the portlet to the page. After the Wiki portlet is on the page, close out of the Add Application box, by clicking on the X.

Creating Wiki Pages Click Edit on the Wiki portlet to begin editing your page. On the editing page, you can choose to use Creole, HTML, or MediaWiki formatting. For this example, we’ll use Creole, which is default. Enter text in the box. Click Publish.

Wiki: Attachments On the Wiki portlet, click on Edit next the content that you just created. Click Attachments. Click Add Attachments. Click Browse (you can select multiple files). Select files from your hard drive that you would like to upload. Click Open. Click Upload Files. Click Back. Go to the Wiki Front Page and you will see the attachments.

Calendar: Add Event From the dropdown menu, scroll down to Add Application. In the Add Application box, type in Calendar or browse Collaboration > Calendar. Add or click, hold, and drag to the page. Close out of the Add Application list box by clicking on the X. Click on the Add Event button. Set the Start Date, Duration, Title, Description, Repeat, as appropriate. For demo, we’ll check the Public box in Permissions. Click Save.

Blogs From the dropdown menu, scroll down to Add Application. In the Add Application box, type in Blogs or browse Collaboration > Blogs. Add or click, hold, and drag to the page. Close out of the Add Application list box by clicking on the X. Click on the Add Blog Entry button. Enter in a Title (and Display Date as appropriate). Enter text in Content. For demo, we’ll check the Public box in Permissions. Click Publish. (Note that there is an option to Save as Draft.)

Blogs – Add to a new page You can add more blog portlets within the same community, as long as it’s on a separate page. (Same applies to other collaborative tools, such as: Wiki and Document Library.) 1. On a new page, go to the dropdown menu, click on Add Application. In the Add Application box, search for Blogs. Select, hold, and drag to the Web page. On the Blogs editing icon (first tool on the left), select Configuration. Click on the Scope tab. Under the Scope dropdown, choose Select Layout. Unser the Select Layout dropdown, choose Current Page (name of page). Click on the Save button.

Document Library Go to the Liferay Demo homepage. From the dropdown menu, scroll down to Add Application. In the Add Application box, type in Document Library or browse Content Management > Document Library. Add or click, hold, and drag to the page. Close out of the Add Application list box by clicking on the X.

Document Library – Add a Folder On the Document Library portlet, you will be at Documents Home. On the left hand side, click on Add Folder. In the New Folder window, enter in a Name and Description in the boxes. Check the Public box. Click Save.

Document Library Folder Display

Document Library – Add Files For this example, we’ll add files to the new folder that we created named IEEE Computer Society Guidelines. Click on the folder to open it. Click on Add Document from the menu on the left. Click Browse (you can select multiple files). This will allow you to add more than one file at a time from your hard drive. Select the files from your hard drive and click Open. You should see the below screen shot. Click on Upload Files.

Document Library Files Display After the upload is complete. Click on <<Back to return to the IEEE Computer Society Guidelines folder and contents. You will see the files that you uploaded.

Document Library – Making a File Private I These are the steps to setting permissions on a file level that requires a login. Click on the IEEE Computer Society Guidelines folder to open it to configure a file that was uploaded previously. On the first file, go to Actions > Permissions.

Document Library - Making a File Private II 3. Click on the Guest tab. 4. Select View and click the right arrow to move it to What They Can’t Do. 5. Click Save.

Document Library - Making a File Private III Click on the Regular Roles tab. Click on the Available tab. Check Guest and Power User. Click Update Permissions. For Guest, select View and click the right arrow to move it over to What They Can’t Do. Click Next. For Power User, select View and click the left arrow to move it over to What They Can Do. Click Finished. Click Return to Full Page.

Look and Feel of Portlet Header Click on the wrench icon on the portlet toolbar. Click on “Look and Feel”. Uncheck “Show Borders” to remove the header from the portlet. If you want to customize the name of the portlet header, check the “Use Custom Title” box and type the name in the “Portlet Title”. Click “Save”. Click on the Red X to close out.

Control Panel I Administrators have access to all of the Control Panel functions. This demo will be for a community owner (a user who has editing and adding permissions to the Liferay-Demo community). From the dropdown menu, scroll down, and click on Control Panel. The screen shot on the left displays the various areas that is featured in the Control Panel. The items underneath Liferay Demo are particular to the community that you are in. This is another way to view and access these items behind the scenes versus actual portlets on the Web page.

Control Panel II Pages: Another way to access Manage Pages for page management. Web Content: Displays the list of all of the Web Contents. You can also Add Web Content here where the built-in editor will display and make your updates there. This method doesn’t display on the Web page until you add the Web Content Display portlet on the page. Document Library: Displays the folders and files lists. You can add and configure them here, as well. Image Gallery: Displays the images in the community. You can also upload images here rather than going through the Web Content Display portlet. Calendar, Message Boards, Blogs, Wiki, too. Just click on Back to Liferay Demo to return to the Web page.

Private Sandbox http://www.computer.org/portal/group/test * This is a private community where you can test around with adding pages and portlets after you obtain proper access.

Thank you. Any questions Thank you! Any questions? This Powerpoint Presentation is available at: www.computer.org/portal/group/test/documentation