Mobile

It is increasingly important that websites offer specific “views” for mobile devices, where these “views” typically are separate sites that share some content with the “normal” website. CQ assists you in creating mobile websites: when authoring a mobile page, the page is displayed in a way that emulates the mobile device, called an emulator. When authoring the page, you can switch between several emulators to get a real view of what the end-user will see when accessing the page.

In the out-of-the-box version, devices have been grouped into three categories - feature, smart and touch - according to the capabilities of the devices to render a page . CQ allows you to create new device groups. When the end-user accesses a mobile page, CQ detects the device and sends the representation that corresponds to its device group.

CQ enables you to create a mobile site based on an existing standard site. It can be simply achieved by creating a livecopy of the standard site.

When authoring a mobile page, the page is displayed in a way that emulates the mobile device, called an emulator. When authoring the page, you can switch between several emulators to get a real view of what the end-user will see when accessing the page.

To author a mobile page:

1. In your browser, go to the Siteadmin console.
2. Open the Products page below Websites >> Geometrixx Mobile Demo Site >> English.
   
3. Switch to a different emulator. To do so, you can either:
   
   • Click the device icon at the top of the page.
   • Click the Edit button in the Sidekick and select the device in the drop-down menu.
4. Drag and drop the Text & Image component from the Mobile tab of the Sidekick to the page.
5. Edit the component and add some text. Click OK to save the changes.
   

The page looks the same as the following:

With CQ it is possible to author webpages with an iPad. You can open a page on your iPad with the embedded Safari browser, view the page in preview mode, annotate-copy-cut-paste-annotate paragraphs, add pictures, activate the page, edit the page properties, start and complete a workflow.

To open a page:

1. On your iPad, open Safari, the embedded browser.
2. Enter the url of the page, eg:
   http://<hostname>:4502/content/geometrixx-outdoors/en.html
   and tap Go on the keyboard.
   
3. The login page opens: enter your login credentials and tap OK.
4. The page is displayed.

To view the page in preview mode, tap Preview in the top toolbar: the page is displayed as it will appear on the publish instance and cannot be edited. Tap Preview to go back in edit mode.

The page is displayed as follows:

 To move a paragraph:

To add a picture:

To activate a page:

To edit the page properties:

1. Open the page.
2. Tap Page actions in the toolbar at the top of the page. A dialog showing the page actions opens.
3. Tap Properties in the Page actions dialog.
4. Edit the page properties.
5. Either:
   • Tap Back to go back to the page without saving the changes.
   • Tap Save in the dialog or tap Go on the keyboard to save the changes and to go back to the page.

The page properties dialog looks as follows:

To start a workflow on a page:

1. Open the page.
2. Tap Page actions in the toolbar at the top of the page. A dialog showing the page actions opens.
3. Tap Workflow in the Page actions dialog.
4. In the workflow dialog:
   1. Select the workflow in the drop-down menu.
   2. Set the title (optional).
   3. Set a comment (optional).
   4. Tap Start Workflow to start the workflow and to go back to the page.

The workflow dialog looks as follows:

To complete a workflow step on a page:

1. Open the page that is in a running workflow.
2. Tap Page actions in the toolbar at the top of the page. A dialog showing the page actions opens.
3. Tap Workflow in the Page actions dialog.
4. In the workflow dialog:
   1. Select the current step in the drop-down menu.
   2. Either:
      • Tap Complete to complete the step and to go back to the page.
      • Tap Step Back to set the workflow back to the previous step.

The workflow dialog looks as follows:

The CQ5 GO app lets you manage your CQ workflow inbox on the iPhone or on the iPad. With CQ5 GO you can configure several inboxes accessing several CQ instances. Once the inbox is configured, you can manage the items that are in your inbox: you can navigate between items, add a comment and complete a step, step back, delegate the item to a co-worker or view the payload.

For a complete overview on how to manage workflows with CQ, please refer to the Working with Workflows page.

To open the CQ5 GO app:

The following functionalities are available on the Home screen:

To set up a new workflow inbox:

1. On the iPhone, open the CQ5 GO app.
2. Tap the + button.
3. Enter the following information:
   • Title: e.g. My WF Inbox
     
   • Description: e.g. testing
     
   • URL: the url of the CQ instance, e.g. http://10.0.0.50:4502
     
   • Username: your CQ username, e.g. admin
     
   • Password: your CQ password, e.g. admin
     
4. (optional) To disable the inbox, switch Active to OFF.
   
5. (optional) To test the connection, tap the Test the connection field.
6. Tap Save to save the settings.
   

The Home screen looks then as follows:

This section explains how to manage on the iPhone the items that are in your workflow inbox. It is possible to complete a step, to step back, to delegate the item to a different user or to view the payload.

Note: if you need to generate workflow items in your inbox for testing purposes, please refer to the Working with Workflows page.

Managing an Item in the Workflow Inbox

1. On the iPhone, open the CQ5 GO app.
2. Tap the inbox icon in the bottom toolbar that you wish to manage.
3. Tap the refresh button (bottom left corner) to request the updated list of items from the CQ server: the list of the items is displayed.
   
4. Tap the item that needs to be processed. All the informations related to the item are displayed.
   The following functionalities are available:
   • Back button: to go back to the former screen.
     
   • Up and Down arrows: to navigate between the items.
     
   • Right arrow: to complete the item.
     
   • Left arrow: to step back the item.
     
   • People icon: to delegate the item.
     
   • Clipboard icon: to view the payload associated with the item.

The screen with all the details about an item looks as follows:

Completing a Step

The following procedure shows how to complete a step on the iPhone. The procedure is very similar for stepping back an item, delegating an item or viewing the payload.

1. Select the item in the inbox (see the procedure above).
2. Tap the right arrow in the bottom toolbar.
3. To change the next step:
   • Tap the Next Step field.
   • Choose the step.
   • Tap Back.
4. To add a comment:
   • Tap the Comment field.
   • Tap the input field and enter a comment.
   • Tap Done.
   • Tap Back.
5. When you are done with selecting the step and writing a comment, tap Submit (top right corner).

The CQ5 GO iPhone app can be modified without having to submit the changes to the App Store. The app basically consists of two parts: an Apple native part that is registered with Apple and available on the App Store and a web application part. The web application part is located on the CQ server and is downloaded and stored in the device's filesystem. Once the app is installed on the iPhone, it behaves like a browser making requests to the CQ server and processing the CQ server responses.

The process of modifying the web application part of the iPhone app is as follows:

1. Modifying the web application part of the CQ5 GO app on the CQ instance: it mainly consists of adapting the JSP and JavaScript files.
2. Updating the cache of the CQ5 GO app on the CQ instance. This update generates a timestamp that will be used to generate a zip file with the updated web application content.

The next time the iPhone user starts the CQ5 GO app or changes the settings of the app:

1. The CQ server checks if the web application content has been updated since the last update.
2. It generates a zip file with the updated web application content and stores it under /var/contentsync/libs/cq/workflow/content.
3. It sends the zip file to the iPhone.
4. The iPhone saves the zip file on its filesystem, unpacks it and displays the changes.

In the following sections two examples show how to modify some elements of the CQ5 GO app. The first example shows how to modify the title displayed on the inbox screen of the iPhone. The second example shows how to add a field with the payload type to the workflow item screen.

Modifying the Title of the Inbox Screen

This example shows how to modify the title displayed on the inbox screen of the iPhone:

1. In your browser, open CRXDE Lite.
2. Open the file:
   /libs/cq/workflow/components/mobileinbox/iphone.html.jsp
   which is the base for rendering the workflow inbox pages on the iPhone.
   
3. In the JSP change the title Inbox to My Inbox by replacing the line of code:
   <h1>Inbox</h1>
   with:
   <h1>My Inbox</h1>
   
4. Save the changes.
5. Update the content cache of the app on the CQ instance:
   • In your browser, go to:
     http://localhost:4502/libs/cq/contentsync/content/console.html
   • Click the Update link beside the path:
     /libs/cq/workflow/content/mobileinboxcontent
6. On the iPhone, close the CQ5 GO app and re-open it.
7. Open the workflow inbox. The screen looks as follows:
   

Adding the Payload Type to the Item Screen

This example shows how to add a field with the payload type to the workflow item screen:

1. In your browser, open CRXDE Lite.
2. Open the JavaScript file:
   /libs/cq/workflow/mobile/source/mobile/mobile.js
   
3. In mobile.js, below the following lines of code:
   
       var title = data[i].payloadTitle || data[i].payloadPath;
       contentHtml += "<div class='cq-payload-title'>" + title + "</div>";
       if(data[i].payloadSummary.description) {
           contentHtml += "<div class='cq-payload-description'>" + data[i].payloadSummary.description + "</div>";
       }
   
   add the line:
   
       contentHtml += this.createListItem("Payload Type", data[i].payloadType);
                
   
4. Save the changes.
5. Update the content cache of the app on the CQ instance:
   • In your browser, go to:
     http://localhost:4502/libs/cq/contentsync/content/console.html
   • Click the Update link beside the path:
     /libs/cq/workflow/content/mobileinboxcontent.
6. On the iPhone, close the CQ5 GO app and re-open it.
   
7. Open a workflow item to view the change. The screen looks as follows: