Power Pages: Content Snippets with a HACK part 2

Let's first dig a bit in the functionality of power apps.

Power Pages Management app

Run this app and see what functionality is available for content snippets.

Go to make.powerapps.com -> Your Env -> Apps (tab All) -> Power Pages Management -> Click Play -> in the running app select Content Snippets in the Content section -> click on content snippet Footer to open.

There are two edit modes (Types) available for selection:

1. HTML -> renders prettified editor for the HTML content with tag colors, line numbers and minimap on a side.
2. Text -> renders a simple text editor.

Functionality behind

Find a script responsible for rendering the snippets.

Go to make.powerapps.com -> Your Environment -> Solutions -> Default Solution -> search for Web resources -> Select Web resources table -> in the table search field (top right) type mspp_contentsnippet.js.

Here is a source code of this script:

(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) {
        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) {
        setSectionVisible("mspp_contentsnippet_html_section", isVisible);
    }

    function setTextSectionVisible(isVisible) {
        setSectionVisible("mspp_contentsnippet_text_section", isVisible);
    }

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

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

    function onTypeChange() {
        var typeAttribute = Xrm.Page.getAttribute('mspp_type'),
      type = typeAttribute ? typeAttribute.getValue() : null;

        switch (type) {
            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));

How did I find it?

Go to make.powerapps.com -> Your Env -> Apps (tab All) -> Power Pages Management -> Click Edit` -> in the running app find Content Snippets view -> select Content Snippets form -> find on top bar and click Edit form.

Now we see a form behind content snippets looking like this with a script responsible for the logic here:

We can also arrive here in another way. Go to make.powerapps.com -> Your Env -> Solutions -> Default Solution -> search for Content Snippet -> select Content Snippet table -> go to Forms -> select Information (Main) form.

To be continued in Part 3

How to create custom snippets table and a new model-driven app to manage the snippets will be shown in the next chapter...