Embedding a Widget within a Widget View - akumina/AkuminaTraining GitHub Wiki

Overview

Sometimes it may be required to nest a widget inside of another widget's view. A common request for this is to place a widget inside of a popup window fired off by another widget. As of 4.0.0.0, this can be done by pasting a widget instance's snippet within a widget view.

Embedded Hello World Widget

For this example, the Hello World Widget will be embedded within a Widget View.

Deployment Steps

Complete the Hello World tutorial if you have not done so already.
In the Management Apps tab of AppManager, click on the View Manager. Click “Add New”. In the left pane navigate to “/DigitalWorkplace/Content/Templates/” for the folder path. Click “Choose File”, navigate to your custom template (helloWidgetInWidget.html). Click Save.
In the Management Apps tab of AppManager, click on the Widget Manager app. Find the HelloWorld Widget. Click its Edit button.
In the Edit Widget window, add the view you just created (helloWidgetInWidget.html) to the WidgetViews row of the Widget Definition. Click Save.
Return to the Manage Widgets window. Find the HelloWorld Widget. Click its View Instances button. Then click on Add New. Create your widget instance with the values in the Widget Manager – Widget Instance section. Click Save & Exit
Copy the Widget Snippet of your newly created Widget Instance.
Return to the Manage Widgets window. Click Cache Widget Instances.
Paste the snippet into a Content Editor Web Part on a page within the site. Publish the page.
Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking “Refresh All Cache”
Refresh the page. You will see your Embedded Hello World Widget.

helloWidgetInWidget.html

<div class="interAction">
  <h1 style="color:purple;">Hello Outside Widget!!! - This is the coolest view: {{Test}}</h1>
  <hr>
  <h2 style="color:purple;"> Hello Embedded Widget!!!</h2>
  <!--Embedded Widget Snippet-->
  <div  rel="My First HelloWorld" class="ak-widget" id="ad2f1943-f425-4ebd-bc2b-6d13e3da1dc1"></div>
</div>

ImportantDatesNestedWidget.html

<div class="interAction">
	{{#if Loading}}
	<div class="ak-event-list ak-module">
		<h4 class="ak-module-header">{{translate "importantdates.title"}}</h4>
		<ul>
			<li>
				<span class="ak-events-date">
				<span class="ak-events-month"></span>
				<span class="ak-events-day"></span>
				</span>
				<h5 class="ak-events-title"></h5>
				<p class="ak-events-description"></p>
			</li>
			<li>{{translate "importantdates.noevents"}}</li>
		</ul>
		<a class="ak-events-more ak-module-more-link" href="#">{{translate "importantdates.allevents"}} &rsaquo;</a>
	</div>
	{{else}}
	<div class="ak-event-list ak-module">
		<h4 class="ak-module-header">{{WebPartTitle}}</h4>
		<ul>
			{{#HasItems}} {{#Items}}
			<li>
				<span class="ak-events-date">
			<span class="ak-events-month">{{DateMonth}}</span>
				<span class="ak-events-day">{{DateDay}}</span>
				</span>
				{{#HasLink}}
				<h5 class="ak-events-title"><a href="{{LinkSrc}}" target="{{Target}}" target="{{Target}}">{{LinkText}}</a></h5>
				{{/HasLink}} {{^HasLink}}
				<h5 class="ak-events-title">{{LinkText}}</h5>
				{{/HasLink}}
				<p class="ak-events-description">{{SubText}}</p>
			</li>
			{{/Items}} {{/HasItems}} {{^HasItems}}
			<li>{{translate "importantdates.noevents"}}</li>
			{{/HasItems}}
		</ul>
		{{#if showAllLink}}
		<a class="ak-events-more ak-module-more-link" href="{{ViewAllLink}}">{{translate "importantdates.allevents"}} &rsaquo;</a>		{{/if}}
		<div>
			<h4 class="ak-module-header">Hello Nested Widget!</h4>
			<div  rel="My First HelloWorld" class="ak-widget" id="ad2f1943-f425-4ebd-bc2b-6d13e3da1dc1"></div>
		</div>
	</div>
	{{/if}}
</div>

PhotosNestedWidget.html

<div class="interAction">
    {{#if Loading}}
    <div class="ak-instagram-feed" style="margin:0px !important">
        <div class="ak-instagram-top">
            <a href="#photo-popup" class="ia-modal-inline-trigger-photo">
                <div class="ak-shade-overlay"></div>
            </a>
            <span class="ak-instagram-tab">{{translate "genericlist.latestphotos"}}</span>
        </div>
        <div class="ak-instagram-item-wrap">
            <div class="ak-instagram-item">
                <a href="#photo-popup" class="ia-modal-inline-trigger-photo">
                    <div class="ak-instagram-image">
                    </div>
                </a>
            </div>
            <div class="row">
                <div class="small-12 columns">
                    <a href="#" class="ak-featured-video-more ak-module-more-link">{{ViewMoreText}} &rsaquo;</a>
                </div>
            </div>
        </div>
    </div>
    {{else}}
    <div class="ak-instagram-feed" style="margin:0px !important">
        {{#if HasItems}}
        <div class="ak-instagram-top">
            <a href="#photo-popup" class="ia-modal-inline-trigger-photo">
                <img src="{{HeaderImage}}" />
                <div class="ak-shade-overlay"></div>
            </a>
            <span class="ak-instagram-tab">{{translate "genericlist.latestphotos"}}</span>
        </div>
        <div class="ak-instagram-item-wrap">
            {{#Items}}
            <div class="ak-instagram-item">
                <a href="#photo-popup" class="ia-modal-inline-trigger-photo">
                    <div class="ak-instagram-image">
                        <img src="{{Image}}" />
                    </div>
                </a>
            </div>
            {{/Items}}
            <div class="row">
                <div class="small-12 columns">
                    <a href="{{ViewMoreLink}}" class="ak-featured-video-more ak-module-more-link">{{ViewMoreText}} &rsaquo;</a>
                </div>
				<div>
					<!-- Embedded Widget -->
					<h4 class="ak-module-header">Hello Nested Widget!</h4>
					<div  rel="My First HelloWorld" class="ak-widget" id="ad2f1943-f425-4ebd-bc2b-6d13e3da1dc1"></div>
				</div>
            </div>
        </div>
        {{else}}
        <h2>{{translate "genericlist.nofeaturedphotos"}}</h2>
        {{/if}}
    </div>
    <!-- end instagram-feed -->

    {{/if}}

</div>
<script type="text/javascript">
    $('.ia-modal-inline-trigger-photo').magnificPopup({
        type: 'inline',
        preloader: false,
        closeBtnInside: true,
        showCloseBtn: true,
        fixedBgPos: true,
        mainClass: 'ak-photo-modal'
    });
    $('.ia-modal-inline-trigger-photo').on('click', function () {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
    });
</script>

Widget Manager - Widget Instance

Sample code for using this functionality in other widgets

Make sure _cur.request.SenderId is your widgetinstanceid (the current one) Its just a selector that says all children under it will get re-rendered.

    var widgetManager = new Akumina.Digispace.Data.WidgetManager();
            widgetManager.RenderChildWidgets("#" + _cur.request.SenderId + " .ak-widget", null, "view");

Full sample:

new Akumina.Digispace.AppPart.Data().Templates.ParseTemplate(templateUri, data).then(function (html) {
   $("#" + targetDiv).html(html);
   var widgetManager = new Akumina.Digispace.Data.WidgetManager();
   widgetManager.RenderChildWidgets("#" + targetDiv + " .ak-widget", null, "view");
}

For use in GENERICLIST VIEW, try adding this call to your view

<div class="GLC-SubWidget">
PUTWIDGET INSTANCE HERE
</div>

<script>
$(document).ready(function(){ 

var widgetManager = new Akumina.Digispace.Data.WidgetManager();
widgetManager.RenderChildWidgets(".GLC-SubWidget .ak-widget", null, "view");

});
</script>