Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-70143

As a content creator I want to add links to documents stored in Documents and Media using the editor

    Details

      Description

      Motive

      In Liferay 6.2, Content Creators could include in their content links to documents stored in Documents and Media. The interaction involved the following steps:

      1. Select the text to create the link and click the Link button in the editor.
      2. Click the Browser Server button.
      3. Browse the sites and folders to select the right document.
      4. Select the desired document.
      5. The URL was populated in the url field.

      However, in Liferay 7 with the addition of AlloyEditor and the Item Selector this functionality was removed and the way to include links in the content is more complex now, because the user needs to switch to Documents and Media, browse the document, copy the URL, go back to the app where he was creating the content and paste the URL.

      The aim of this story is to create the mechanism to facilitate the addition of links to documents and media elements in the content.

      Acceptance Criteria

      • Content creators can create content with links to Documents stored in Documents and Media using the editor without switching apps and without the need to know the URL to the document in advance.
      • Content creators can modify the content updating existing links and point to another document stored in Documents and Media.

      Use cases

      Main Scenario: A user wants to add a link to a document in a blog post

      1. Select the text to create the link and click the Link button in the editor.
      2. Click Link button.
      3. Click Browser button.
      4. Browse folders and documents.
      5. Select the desired document.
      6. The URL was populated in the url field.

      Expected: the text selected has a link to an URL of a document within portal.

      Edit a link

      1. Select the link
      2. Click Browser button.
      3. Browse folders and documents.
      4. Select the desired document.
      5. The URL was updated in the url field.

      Expected: when Alloy flyout is shown, the URL field has the current link.
      Expected: Once the user has selected a new document, the link is updated with the new URL.

      Additional Scenarios

      1. A user wants to add a link but using CK Editor instead of Alloy Editor.

      User Experience

      Summary

      1. Add a new button labeled "Browse".
      2. Add a lightbox with an Item Selector component.

      Interaction

      Behavior

      Alloy Editor

      • When a user clicks on Browse button a lightbox is launched.
      • The alloy editor flyout is hidden when the lightbox appears.
      • When a user selects a document, a preview of the image is shown.

      • If the user clicks add button, the lightbox disappears and the text selected is now a link (the text is underlined in hover state).

      • Given an existent link when a user clicks the link in edit mode then the Alloy Editor shows directly the URL add / edit link state.
      • Given an existent link when a user clicks the link in edit mode if there is a valid URL, the tick button is on enabled state.

      Lightbox

      • It has an Item Selector.
      • Item Selector Tabs: "Documents and Media".
      • Icon view mode is selected by default.
      • The tab content of Documents and Media is grouped by "Folders" and "Documents".

      Interactive prototype

      URL
      http://34omx5.axshare.com/

      Design

      Alloy Editor with Browse Icon

        Attachments

        1. Alloyeditor link toolbar with browse icon.png
          Alloyeditor link toolbar with browse icon.png
          9 kB
        2. Link.png
          Link.png
          4 kB
        3. Main Scenario.gif
          Main Scenario.gif
          750 kB
        4. Preview.png
          Preview.png
          182 kB
        5. Tick Enabled.png
          Tick Enabled.png
          26 kB

          Issue Links

            Activity

              People

              • Votes:
                2 Vote for this issue
                Watchers:
                10 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Packages

                  Version Package
                  7.0.0 DXP SP2
                  7.0.0 DXP FP13
                  7.0.0 DXP SP3
                  7.0.3 CE GA4
                  7.1.X
                  Master