Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-6566

Advanced linkField

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Neutral Neutral
    • None
    • 6.2
    • None

      Problem
      Here you see 3 types of common use cases to specify links. A single link field is often not enough. Users and developer have a lot of ideas for links, which are often not easy to manage via the standard fields. It ends up in a complete mess of Switchable Fields combined with composite fields. I also saw a combination of a multi value, switchable, combosite field (weird).
      The JCR structure is also complex and ends up in a lot of useless code. If you think of new ways to maintain content like stories apps this could be even more complex because beside Internal, External and Download links you probably have links to News Article or Events...

      For the Author this is as well a disaster. It's not easy to understand this mess of fields.



      Ā 
      Goals
      Make it a joy to use links in a couple of ways, flexible and extensible.

      Use Cases
      Link fields if a user needs to decide what to link. This could be a teaser, link component or even a redirect page template.
      Common features for links are:

      • Author defines a link text, or it's picked up from the linked page or asset
      • Author references to a internal page, download or uses a external page
      • User want's to define if the link is opened in a new window or not
      • Users want's to define an anchor tag inside a page. "Link Suffix"

      Proposal
      This is a working example of an advanced link field. It's a standard richtextfield which has a custom CSS and JS. The field is a one liner and you can just define links. Enter or Shift Enter are blocked. It's only generating an a-Tag without <br> or <p> wrappers.

      The nice thing behind it is that you can easily define anything you like. You can add formatting if needed and you can easily add it into a multi value context.
      This type of field is nice if you want exactly the criteria of the screenshots above.

      But it has downsides, which are not solved yet, but i guess this should not be a show stopper:

      At the moment everything is added into one jcr property which is basically a RichTextField-HTML. But sometimes you would like to have all the specified items in splitted variables. (Link Text, Link Target, Link Href)
      The asset and the internal Link Picker don't have the ability to add a _blank target. (You can pick it and after that open the link dialog)
      If you only want to define a link without all the stuff around it you need to manipulate the JS for CK Editor, and add some kind of transformer, as we all know from standard link fields.
      You don't have an image preview if you choose an image.

      Pros:

      • It's all saved into one field which makes it easierĀ 

      Cons:

      • This solution relies on CK Editor which is hard to configure if you are not familiar with it.

      Thoughts

      • There are two kinds of link fields possible
        1. You can define a link text on your own. But you want to split the link and the linktext into seperate variables.
        2. You can define no specific link text.

        Acceptance criteria

          1. image.png
            image.png
            23 kB
          2. image2018-8-8_20-12-30.png
            image2018-8-8_20-12-30.png
            10 kB
          3. image2018-8-8_20-12-57.png
            image2018-8-8_20-12-57.png
            6 kB
          4. image2018-8-8_20-13-20.png
            image2018-8-8_20-13-20.png
            6 kB
          5. image2018-8-8_20-36-22.png
            image2018-8-8_20-36-22.png
            3 kB
          6. Screenshot 2021-02-11 at 16.47.09.png
            Screenshot 2021-02-11 at 16.47.09.png
            221 kB
          7. Screenshot 2021-02-11 at 16.47.36.png
            Screenshot 2021-02-11 at 16.47.36.png
            143 kB
          8. Screenshot 2021-02-12 at 09.24.33.png
            Screenshot 2021-02-12 at 09.24.33.png
            47 kB

              avongunten Anja von Gunten
              avongunten Anja von Gunten
              Votes:
              1 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:

                  Task DoD