DEV Community

Andrew Elans
Andrew Elans

Posted on

Power Pages: Content Snippets with a HACK part 4

Let's make a new model-driven app to manage custom snippets.

Create a new model-driven app

Go to make.powerapps.com -> Your Env -> App -> click New app -> select Start with a page design -> in the provided templates select Blank page with navigation -> type name Power Pages Management Custom -> click Create.

Add standard content snippets

Let's first add standard Content Snippets on this new app as it will be convenient to navigate multiple content snippet tables in one app.

Click Add page -> Dataverse table -> find and select Content Snippet table -> click Add.

Click in Navigation section on New group -> set Title and ID to Website -> Save and publish.

Add custom content snippets

Click Add page -> Dataverse table -> find and select wb Common Content Snippet table -> click Add -> Save and publish

Edit view

Click in Navigation section on wb Common Content Snippets view -> on top bar click Edit view -> Add columns on the view form wb Type, wb Value and Modifed On -> Remove column Created On -> Save and publish -> go back to the app and open in the edit mode (click Back in the browser).

Create a new script wb_contentsnippet.js

First we need to create a new script that will work with the new Common Content Snippets table.

Here is a source code of the mspp_contentsnippet.js which was modified a bit to suit our custom table Common Content Snippets, and some comments added for clarity.

(function ($export) {
    var htmlEditorInitialSrc = null,
    htmlEditorDisabledSrc = '/_static/blank.htm',
    htmlEditorWebResourceSrcNotSet = '/_static/blank.htm';

    function getHtmlEditor() {
        return Xrm.Page.getControl('WebResource_mspp_value_monaco'); 
    }

    function disableHtmlEditor() {
        var editor = getHtmlEditor();

        if (editor) {
            editor.setSrc(htmlEditorDisabledSrc);
        }
    }

    function enableHtmlEditor() {
        var editor = getHtmlEditor();

        if (editor && htmlEditorInitialSrc && editor.getSrc() != htmlEditorInitialSrc) {
            editor.setSrc(htmlEditorInitialSrc);
        }
    }

    function setSectionVisible(sectionName, isVisible) {
        // ref. table 'mspp_contentsnippet' -> Forms -> Information (Main)
        // Tree view -> section General has name 'mspp_contentsnippet_general'
        var tab = Xrm.Page.ui.tabs.get("mspp_contentsnippet_general");

        if (!tab) {
            return;
        }

        var section = tab.sections.get(sectionName);

        if (!section) {
            return;
        }

        section.setVisible(isVisible);
    }

    function setHtmlSectionVisible(isVisible) {
        // ref. table 'mspp_contentsnippet' -> Forms -> Information (Main)
        // Tree view -> section HTML has name 'mspp_contentsnippet_html_section'
        setSectionVisible("mspp_contentsnippet_html_section", isVisible);
    }

    function setTextSectionVisible(isVisible) {
        // ref. table 'mspp_contentsnippet' -> Forms -> Information (Main)
        // Tree view -> section HTML has name 'mspp_contentsnippet_text_section'
        setSectionVisible("mspp_contentsnippet_text_section", isVisible);
    }

    function showHtmlEditor() {
        setHtmlSectionVisible(true);
        setTextSectionVisible(false);
        enableHtmlEditor();
    }

    function showTextEditor() {
        setTextSectionVisible(true);
        setHtmlSectionVisible(false);
        disableHtmlEditor();
    }

    function onTypeChange() {
        // ref. table 'mspp_contentsnippet' -> columns
        // column Type is called 'mspp_type'
        // in a custom table 'wb_commoncontentsnippet' column 'wb Type' is called 'wb_type'

        // var typeAttribute = Xrm.Page.getAttribute('mspp_type'), // original code, replaced with the following line
        var typeAttribute = Xrm.Page.getAttribute('wb_type'),
        type = typeAttribute ? typeAttribute.getValue() : null;

        switch (type) {
            // I created in my custom choice 'wb Content Snippet Choice'
            // the same Labels and Values

            case 756150000: // Text
                showTextEditor();
                break;

            case 756150001: // HTML
                showHtmlEditor();
                break;

            default: // Text
                showTextEditor();
                break;
        }
    }

    function onFormLoad() {
        var editor = getHtmlEditor();

        if (editor && htmlEditorInitialSrc === null) {
            var htmlEditorSrc = editor.getSrc();

            if (!htmlEditorSrc || htmlEditorSrc === htmlEditorWebResourceSrcNotSet) {
                setTimeout(onFormLoad, 10);
                return;
            }

            htmlEditorInitialSrc = htmlEditorSrc;
        }

        onTypeChange();
    }


    $export.mspp_contentsnippet_OnLoad = onFormLoad;
    $export.mspp_type_onChange = onTypeChange;

}(window));
Enter fullscreen mode Exit fullscreen mode

Open your code editor, copy/paste it and save with name wb_contentsnippet.js.

Upload the new script

Go to make.powerapps.com -> Your Env -> Solutions -> Default Solution -> find and select Web resources -> click New -> More -> Web resource -> Choose file wb_contentsnippet.js -> Name keep unchanged as new_wb_contentsnippet -> Display name modify to wb_contentsnippet.js -> click Save.

Edit form

Open the newly created model-driven app in the edit mode -> click in Navigation section on wb Common Content Snippets form -> on top bar click Edit form -> add column wb Type.

Select field Owner and hide it.

Text section

Select Components -> find and add 1-column section -> Label Text -> change Name to mspp_contentsnippet_text_section -> select Hide label.

Select this added Text section -> find in Table columns a column wb Value and select -> label as Value -> in Form field height type 16 (rows) -> click Done.

HTML section

Select Components -> find and add 1-column section -> Label HTML -> change Name to mspp_contentsnippet_html_section.

Select this added HTML section -> select in Components under section More components a component called This Monaco editor is used in Power Pages Management App. -> in the Table column dropdown select column wb Value (Multiline Text) -> click Done -> label as Value (HTML) -> in Form field height type 16 (rows) .

By this moment, the form should look like this:
Image description

Add Events

Select Tree view on the left, then:

  1. Select Information (main form) -> click Events tab on the right -> -> click Add library -> find and select wb_contentsnippet.js -> click Add -> expand On Load -> click add Event Handler -> click on the Function field and select mspp_contentsnippet_OnLoad -> click Done.

Select wb Type field -> select Events tab -> click add Event Handler -> click on the Function field and select mspp_type_onChange -> click Done.

Save, publish and check

Click Save and publish. Open our app in the edit mode -> click again Save and publish -> click Run.

Create new Common Snippet in the new app

In the running app select on the left wb Common Content Snippets -> click New on top -> type in Name Test Header ->

The snippet in the new custom app shall finally look like this:

Image description

👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay