The Web Element Designer is a simple design tool that will generate the code you need to embed the element you've designed into your website. It allows you to configure all of the different parts of the portal as embeddable web elements that can appear in your website.
Note that if you are simply using a Cobalt portal "as is", then you don't need to use this functionality. This is only intended for organizations who want to include elements of the Cobalt portal in their own CMS sites rather than directing customers to the portal.
Cobalt staff will provide you with the link to the Web Elements Designer and it should follow this structure: https://[Widget Site URL]/WebElementDesigner.aspx
The URL is case sensitive so make sure that yours matches WebElementDesigner.aspx exactly.
As soon as you're provided with the Designer URL, navigate to it to confirm that you see the Web Element Generator and Preview Window:
If you do not see the Web Element Generator then it is likely that the full generator has not been set up for you yet. Contact Cobalt support to set up the widget site/Web Element Designer for you.
Once you've confirmed that you can access the Web Element Designer, you can begin generating Web Elements for your site. To find more information on how to use the designer and on different Web Elements you can create, refer to these articles:
Common Web Elements
List, Grid, and Form Web Elements
eCommerce Web Elements
Using the Web Element Designer
Embedding part of the Cobalt portal into your website requires code to make sure you get everything to load the way you want. With the Web Element Generator, you can experiment with color themes 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.
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 Link.
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 even if you do not have a CMS in which you're embedding web elements.
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: LINK
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.
Note that if you set the web element in your standalone portal using the Portal Menu Location tool, you don't need to use this code.
Also, note that 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.
Each of the toolbar buttons includes a dropdown that displays several of the most commonly used Web Elements, which we discuss here.