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));
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:
Add Events
Select Tree view on the left, then:
- Select
Information
(main form) -> clickEvents
tab on the right -> -> clickAdd library
-> find and selectwb_contentsnippet.js
-> clickAdd
-> expandOn Load
-> click addEvent Handler
-> click on the Function field and selectmspp_contentsnippet_OnLoad
-> clickDone
.
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:
Top comments (0)