Using the Web Element Designer
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.
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)
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.
- 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.
- 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 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.