Page Life Cycle: Appending Additional Markup - akumina/AkuminaTraining GitHub Wiki

Applies to

Akumina Foundation 3.4.0.0

Appending Additional Markup

We will create a custom step that adds markup to the footer of a Digital Workplace Page.

How to Deploy

  1. In the Management Apps tab of Interchange, 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 (CustomTemplate.html). Click “Save”.
  2. Download digitalworkplace.custom.js from the “/Style Library/DigitalWorkplace/JS” folder within SharePoint
  3. Paste the Code within digitalworkplace.custom.js
  4. Upload the updated digitalworkplace.custom.js to the “/Style Library/DigitalWorkplace/JS” folder within SharePoint
  5. Navigate to a page on your Digital Workplace site
  6. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking “Refresh All Cache”
  7. Refresh the page. The custom markup will be added to the footer.

Template

Create a file called CustomTemplate.html and paste the following code within

<div>
   <h1>HTML added from a Custom Step</h1>
</div>

Custom Step

var AdditionalSteps = AdditionalSteps || {
}
if ((typeof AdditionalSteps.MoreSteps) === 'undefined') {
	AdditionalSteps.MoreSteps = {

        Init: function () {

            console.log('AdditionalSteps.MoreSteps.Init');
			var steps = [];
            steps.push({ stepName: "Getting Additional Markup template", additionalSteps: [{ name: "Add Custom Template", callback: AddCustomTemplate}] });
            return steps;

        }
        
    }

}
function AddCustomTemplate() {
	var popupTemplateUrl = __getTemplatePrefix() + "/Style%20Library/" + Akumina.Digispace.ConfigurationContext.TemplateCoreFolderName + "/Content/Templates/CustomTemplate.html";

	new Akumina.Digispace.AppPart.Data().Templates.ParseTemplate(popupTemplateUrl, {}).done(function (html) {
		$("#digiFooter").append(html);
		Akumina.Digispace.AppPart.Eventing.Publish('/loader/onexecuted/');
	});
}

Result

image 6

References

To learn how to customize the Page Life Cycle using the Akumina Framework see the following articles:

⚠️ **GitHub.com Fallback** ⚠️