ShellSearchForm
===============

.. granite:servercomponent:: /libs/granite/ui/components/shell/search/form

   A form component for the purpose of search rail panel of the :granite:servercomponent:`CollectionPage </libs/granite/ui/components/shell/collectionpage>`.

   It has the following content structure:

   .. gnd:gnd::

      [granite:ShellSearchForm] > granite:commonAttrs, granite:container

      /**
       * The value of :doc:`[data-foundation-mode-group] </jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/vocabulary/mode>`
       * that the search result collection is part of.
       */
      - modeGroup (String)

      /**
       * The selector to the search result collection.
       */
      - targetCollection (String)

      /**
       * The config of the search result.
       */
      + result (granite:ShellSearchFormResult) mandatory

      [granite:ShellSearchFormResult]

      /**
       * The folder for the available views (i.e. the rendering) of the collection,
       * where each can any component implementing :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/vocabulary/collection`.
       *
       * At least one view needs to be provided.
       * If there are at least two views, the following properties are needed to be able to switch the view:
       *
       * icon (String)
       *    The icon of the view.
       * jcr:title (String)
       *    The title of the view.
       * src (StringEL)
       *    The URI Template that is returning the HTML response of the new view.
       *    It supports the following variables:
       *
       *    offset
       *       The item offset of the current request.
       *    limit
       *       The item limit of the pagination.
       */
      + views mandatory

      /**
       * The folder for the actions applicable in the context of the collection.
       */
      + actions (granite:ShellSearchFormResultActions)

      [granite:ShellSearchFormResultActions]

      /**
       * The folder for actions applicable during selection mode. (e.g. when one of the collection item is selected)
       *
       * The action can be any action component such as :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/button/index`,
       * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/anchorbutton/index`,
       * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/pulldown/index`,
       * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/collection/index`.
       *
       * The ``actionBar`` variant of the components above SHOULD be used, unless ``primary`` variant is used.
       *
       * Usually the action is implementing :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/collection/action/index`,
       * with ``relScope`` = ``item``.
       */
      + selection


   Example::

      + /mypage
        - sling:resourceType = "granite/ui/components/shell/collectionpage"
        + rails
          + search
            - sling:resourceType = "granite/ui/components/coral/foundation/panel/railpanel"
            - jcr:title = "Search"
            + items
              + form
                - sling:resourceType = "granite/ui/components/shell/search/form"
                - modeGroup = "cq-sites-search-result"
                - targetCollection = "#cq-sites-search-result"
                + items
                  + type
                    - sling:resourceType = "granite/ui/components/coral/foundation/form/hidden"
                    - name = "type"
                    - value = "cq:Page"
                  + fulltext
                    - sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
                    - fieldLabel = "Keyword"
                    - name = "2_fulltext"
                  + path
                    - sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
                    - fieldLabel = "Directory"
                    - name = "3_path"
                    - value = "/content"
                  + orderby
                    - sling:resourceType = "granite/ui/components/coral/foundation/form/hidden"
                    - name = "orderby"
                    - value = "path"
                + result
                  + views
                    + card
                      - granite:id = "cq-sites-search-result"
                      - jcr:title = "Card View"
                      - sling:resourceType = "granite/ui/components/coral/foundation/masonry"
                      - icon = "viewCard"
                      - limit = 20
                      - modeGroup = "cq-sites-search-result"
                      - size = '${empty requestPathInfo.selectors[2] ? "20" : requestPathInfo.selectors[2]}'
                      - src = "/mypage/rails/search/items/form/result/views/card{.offset,limit}.html?${querystring}"
                      + datasource
                        - sling:resourceType = "granite/ui/components/coral/foundation/querybuilder/datasource"
                        - itemResourceType = "my/card"
                        - limit = '${empty requestPathInfo.selectors[2] ? "21" : requestPathInfo.selectors[2] + 1}'
                        - offset = "${requestPathInfo.selectors[1]}"
                    + list
                      - granite:id = "cq-sites-search-result"
                      - jcr:title = "List View"
                      - sling:resourceType = "granite/ui/components/coral/foundation/table"
                      - icon = "viewList"
                      - limit = 40
                      - modeGroup = "cq-sites-search-result"
                      - selectionMode = "row"
                      - size = '${empty requestPathInfo.selectors[1] ? "40" : requestPathInfo.selectors[1]}'
                      - src = "/mypage/rails/search/items/form/result/views/list{.offset,limit}.html?${querystring}"
                      + columns
                        + select
                          - select = true
                        + col1
                          - jcr:title = "Column 1"
                        + col2
                          - jcr:title = "Column 2"
                      + datasource
                        - sling:resourceType = "granite/ui/components/coral/foundation/querybuilder/datasource"
                        - itemResourceType = "my/row"
                        - limit = '${empty requestPathInfo.selectors[2] ? "41" : requestPathInfo.selectors[2] + 1}'
                        - offset = "${requestPathInfo.selectors[1]}"
                  + actions
                    + selection
                      + open
                        - granite:rel = "cq-siteadmin-admin-actions-edit-activator"
                        - sling:resourceType = "granite/ui/components/coral/foundation/collection/action"
                        - action = "cq.wcm.open"
                        - activeSelectionCount = "multiple"
                        - icon = "edit"
                        - target = "#cq-sites-search-result"
                        - text = "Open"
                        - variant = "actionBar"
                        + data
                          - cookiePath.url = "/"
                          - href.uritemplate = "/bin/wcmcommand?cmd=open&_charset_=utf-8&path={item}"