Using the Web Element Designer
Embedding the Cobalt portal into your website requires code to make sure everything loads the way you prefer. With the Web Element Generator, you can experiment with color themes, .css and javascript for the element and select the way it will display on your site. The generator will then provide you with the code that you can copy and paste to your web page.
Note that most of the menu items below are optional depending on what you are looking to accomplish.
Also note that you cannot embed the Portal Navigation Bar as a Web Element so will need to individually embed each element that you wish to use in your site.
The Designer includes two components, the Generator and the Preview Window. We'll discuss each of those components in this article.
The Web Element Generator
Below, you can see an image of the entire Web Element Generator. We'll discuss the first field on Saved Elements after we discuss the others.
Select the Element Theme
The second option in the Generator is the option to Select a color theme for the Web Element. You can preview how the colors display on buttons and some text in real time. The code will update with the color you select. When testing this, be sure to test on the Calendar page to see the results as the login and dashboard elements are not affected by basic color changes.
Specify a Custom Style sheet and/or Custom Javascript
The themes are nice and quick, but if you have some web design experience and you want to have increased control over the look of the web element of your site, you can add your own CMS-hosted CSS and/or javascript here. The values will be plugged in to the appropriate parts of the final code so that you can embed the edited element on your site.
Note: This field works on a Web Element by Web Element basis so different Web Elements can be linked to different custom style sheets and/or Javascript. If the same custom style sheet and/or Javascript should be used for all Web Elements, Service Configuration Properties can be created on the back end instead of adding the custom style sheet and/or Javascript to each Web Element that will be embedded. Reach out in a support ticket for assistance with setting up the Service Configuration Properties. If the custom styling and/or Javascript should have a more global impact, meaning not just on the embedded web elements portal but on all web applications including the ISV, use the field on the Settings record instead. Click here for instructions on how to update the custom style sheet and/or Javascript globally.
Below is an example of .css in use. The first image shows the dashboard web element without any custom .css styling and the second shows it with .css styling
Select your Element Type
Element Types refer to how the information will be displayed on your portal. There are two options: Embedded Control and Lightbox f.
Embedded Control- The web element is embedded into the site, like an iframe.
Show Loading Indicator: This is a conditional field to enable or disable a loading indicator for the web element. This is enabled by default.
Lightbox Link - The web element is a link on the site that opens the full web element in a Lightbox window.
Lightbox Link Text: This is a conditional field to set the text that the customer will click to access the element. This is enabled by default.
Set a Portal Menu Location
As a Cobalt customer, you can use this tool to place custom web elements within your stand alone portal rather than a CMS. The formula for values that are entered here are is [# Tab In The Navbar]|[Name of New Tab]?halflings [Tab Icon]|[# Sub-tab In The New Tab]|[Name of New Tab] (i.e 8|Test?halflings white star|2|Test)
Configure Element
This option is only available on Custom Elements and provides you with an easy to use editor to design your own elements. We discuss this more in our article on Custom Web Elements.
Copy Your Code and Paste it on your Web Page
The generated code will allow you to embed the portal element with the specified details on any of your Content Management System's (CMS) webpage. All you have to do is copy and paste into the web page. A quick look at the generated code shows that it is a simple HTML and JS snippet. In cases where your CMS doesn’t allow js to be embedded directly in the content area, you can split the html from js and include them separately.
NOTE:
- In some cases your CMS may not render the Web Element correctly in preview or design mode. Also, some content editors will automatically format or clean html it dubs as incorrect or invalid. To prevent this you’ll generally want to use the code editor feature of the WYSIWYG editor in your CMS to ensure that code is saved exactly as is and you may have to view the page live in order to see the rendered web element.
- If you want to set the web element in your standalone portal using the Portal Menu Location field, you don't need to use this code.
- This code uses jQuery to render the web elements. If your page cannot process jQuery, you'll need to reconfigure it so it can in order for the element to render. For example, when building a page in html, you can include a link to jQuery in your head tag as such:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>Save your Element
It is advisable to save your work by typing a unique identifying name in the last field and click Save. This will create a record in CRM called a Web Element Type that maintains your selections so that if you ever want to make changes you don't have to start from scratch. Your configuration will save as an entity in D365 called Web Element.
This entity allows users to save the configuration properties of a particular Web Element. When a user saves a Web Element in the Web Element Designer, this is the entity that is generated in D365. This will allow users to quickly access previously created web element configurations for editing and/or review. This entity will be stored under Settings - Web Elements
- Name - This name is populated from the name entered on the web element generator
- Owner - Admin user owns these records by default.
- Custom CSS URL - the link to the custom cascading style sheet
- Element Type - Embedded Control or Lightbox Link
- Web Element Width - Pixel Width
- Portal Menu Item - This will populate from web element generator if applicable.
- Lightbox Link Text - The text to click for the lightbox link if applicable.
- Custom JS URL - Link to a custom javascript URL if you have one.
- URL - Link to the web element for quick access
- Web Element Height - This is set to Auto by default but if there is something different you'll see this set here.
- Show Loading Indicator - Yes if the element shows a loading icon. No if the element does not.
Select a Saved Element
Now that you've saved your Web Element, we can discuss the first option in the Generator. This field allows you to start from the existing elements that you've saved instead of from scratch. If you are creating a new element then you can leave this as the default [New Element].
The Preview Window
The Preview Window takes up the space of a regular portal page's content and is denoted by a gray dotted line that surrounds it. Here you'll be able to preview all of the theme and design changes you make to a Web Element using the Generator. This will be what the element looks like when embedded in your web page. The Preview Window includes a dropdown that allows you to change the device view so you can see how the element will look on different devices.
The Designer actually includes a third component, the Elements Toolbar, which allows you to quickly navigate to the page of the most commonly used Web Elements, expediting your code generation.
