[magnolia-user] Re: Creating subpages that get loaded in dynamically without creating an app

[Simon (via Magnolia Forums)]

I created this yesterday (hope it helps you):

YAML file (subpagemenu)
[code]form:
  tabs:
    - name: tabMain
      label: Subpages
      fields:
        - name: selectSubPages
          class: 
info.magnolia.ui.form.field.definition.MultiValueFieldDefinition
          label: Add child pages
          required: true
          field:
            name: linkField
            class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
            appName: pages
            identifierToPathConverter:
              class: 
info.magnolia.ui.form.field.converter.BaseIdentifierToPathConverter
            targetWorkspace: website
            type: String
            label: Reuse content-area
            required: true
actions:
  commit:
    class: 
info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
  cancel:
    class: 
info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition[/code]

FTL FILE:
[code]<div class="row area--white subpage-menu-container">
    <div class="col-md-12 text-center">
    <ul class="subpage-menu">
    [#list content.selectSubPages as subPage]
    [#assign child = cmsfn.contentById(subPage)]
        [#if child.navigationTitle?has_content]
            [#assign navigationTitle = child.navigationTitle]
        [#elseif child.title?has_content]
            [#assign navigationTitle = child.windowTitle]
        [/#if]
        [#assign linkHref = cmsfn.link("website", subPage)!]
        [#assign linkHref = linkHref?remove_ending(".html")]
        <li class="subpage-menu__item"><a href="${linkHref}" 
title="${navigationTitle!}" class="subpage-link" 
data-link="${linkHref}~mgnlArea=content~.html">${navigationTitle!}</a></li>
    [/#list]
    </ul>
    </div>
</div>
<div class="subpage-content">
  <div class="col-xs-12 text-center"><p>Click one of the above links</p></div>
</div>
[/code]

Javascript:
[code]
$('document').ready(function(){
function replaceSubpageContent(linkData) {
                var jqhxr = $.get(linkData, function( data ) {
                        $( ".subpage-content" ).html( data );
                })

                .fail(function(){
                        $( ".subpage-content").html('<p>Data could not be 
loaded</p>');
                });
        }

        if ($('.subpage-menu').length){

                var linkData = $('.subpage-link').first().attr("data-link");
                replaceSubpageContent(linkData);
                $('.subpage-link').first().addClass('current');

                $('.subpage-link').click(function(){
                        event.preventDefault();
                        var linkData = $(this).attr("data-link");
                        replaceSubpageContent(linkData);
                        $('.subpage-link').removeClass('current');
                        $(this).addClass('current');
                });
        }
});
[/code]

Hope it helps,

Simon

-- 
Context is everything: 
http://forum.magnolia-cms.com/forum/thread.html?threadId=7b75fd75-0757-4014-8076-686eae5c265c


----------------------------------------------------------------
For list details, see http://www.magnolia-cms.com/community/mailing-lists.html
Alternatively, use our forums: http://forum.magnolia-cms.com/
To unsubscribe, E-mail to: <user-list-unsubscr...@magnolia-cms.com>
----------------------------------------------------------------