Archive
Dynamics Portals Styling – Design Forms with rich text and images
Its pretty common requirement in Portals to design the forms with rich text along with images.
One option to achieve this is by adding ‘Web Resources’ with HTML content to Dynamics forms. The downside of using ‘Web Resource’ is that it adds a white space towards the end.
In this article, lets see how we can achieve the styling by leveraging ‘Metadata’.
The Portal Metadata is flexible enough to hold the HTML content. All you need to do is, create a new Metadata for a Section and set the ‘Label’ field with HTML content.
Lets design a simple ‘Registration’ portal form with Logo and Content.
Steps to create a Portal Form:
For this scenario, I am using ‘Contact’ entity and created a new Form by name ‘Registration Form’.
- Open the CRM customization Form and open the ‘Section’, make sure below property is set.
- If this property is unchecked, HTML metadata content, which we are designing in next steps will not be shown on Portal form.
- Save and Publish the CRM form.
- Create a new ‘Entity Form’ and map the ‘Entity Name’ and ‘Form Name’.
- Create a new ‘Web Page’ and map the ‘Entity Form’
- Now, if you browse the ‘Entity Form’ in Portal, it comes as below.
Design the Form with Logo and Content:
Lets beautify this form by adding Logo and Rich text.
- To configure the Logo, first, create a new ‘WEB FILE’ record.
- Note down the ‘Partial Url’. You need to refer the exact value in your HTML.
- Under the ‘Notes’ section of the ‘WEB FILE’, create a new Note and upload the image as an attachment.
- Now lets design the HTML content.
- Open a HTML file using any of the text editor.
- Prepare HTML content as per your requirement
- Once the HTML design completed, open the Portal ‘Entity Form’ which we created in previous section and add a new ‘Entity Form Metadata’ record.
- Set Type as ‘Section’ and in the ‘Label’, paste the HTML content.
- Refresh you Portal screen and you should see the changes.
Note:
- HTML content added to ‘Metadata’ can be moved easily to other environments using Portal Record Movers
🙂
Dynamics 365 Portals – How to configure the logo of your Portal
Once you enable “Portal Add On” in your Dynamics instance, your OOB portal would look as below with “Contoso, Ltd.” text at top left corner.
Note: I enabled ‘Customer Service’ portal solution. If you install different solution, UI will be different.
Steps to configure your desired logo on the Portal:
Add PNG/JPG file as ‘Web File’
- Log in to your Dynamics 365 instance
- Navigate to Portals -> Web Files and click ‘New’
- Provide below details on your new ‘Web File’
- Name: Can be anything. This will be referred in ‘Content Snippet’ in following steps
- Parent Page: Home
- Partial Url: Can be anything.
- Save the record
- Go to ‘Notes’ tab and add your png/jpg file as attachment.
Update content snippet with web file reference
- Navigate to Portals -> Content Snippets
- Open “Navbar Left” snippet
- In Value(HTML) field value’s ‘Source’ tag, replace content with below
<p style=”margin-left: -1px;”><img style=”top:-25px; width: 100px; height: 53px; margin-right: 1px; margin-left: 1px; float: left; position: relative;” src=”/{Webfile Name}” /></p>
- Save the file
Open/refresh the Portal and you should see your logo. You might want to logout and login if you don’t see the logo.
🙂
