Follow

Client Instructions for Accessing and Using the Web Element Designer

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.

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 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.

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.

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: 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.
  • 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.

Each of the toolbar buttons includes a dropdown that displays several of the most commonly used Web Elements, which we discuss here.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk