Configure default dashboards for Ucommerce

In the following article, you will learn how to easily configure default dashboards for your users when they log into Ucommerce for the first time. A default dashboard is defined as the widgets the user will see when no widgets have been configured for that area for the user already.

Each dashboard in the individual default sections is rendered with a unique key that defines that dashboard. It looks similar to this where the section, in this case, is called "startPage".:

    
    
    <ucommerce-widgets section="StartPage" columns="6" rows="6">
           
    </ucommerce-widgets>
    
    

Ucommerce will when the page loads, find all widgets configured for the user under the section called "startPage". If no widgets are found, we'll look for default widgets for that section. Default widgets are defined by the IoC where Dashboards may be configured. A dashboard can be configured with the following component:

    
    	<component
    			id="startPageDashboard"
    			service="UCommerce.Presentation.UI.Dashboard, UCommerce.Presentation"
    			type="UCommerce.Presentation.UI.Dashboard, UCommerce.Presentation">
    		<parameters>
    			<section>StartPage</section>
    			<defaultWidgets>
    				<array>
    					<value>${TurnOverByCurrency}</value>
    				</array>
    			</defaultWidgets>
    		</parameters>
    	</component>
    

In the example above We've configured a dashboard for the section called "startPage" defined by the "section" element under the "parameters" element. The dashboard component is not required to add a new dashboard anywhere in the backend but is only needed if you want to define default widgets for a dashboard. Default widgets are configured by the "defaultWidgets" element under the "parameters" element. The "defaultWidgets" parameter holds a list of configured widgets by id. In the example above we are adding the TurnOverByCurrency widget as default widget for the startPage dashboard. The widget is configured like below:

    
    	<component 
    		id="TurnOverByCurrency"
    		service="UCommerce.Presentation.UI.Widget, UCommerce.Presentation"
    		type="UCommerce.Presentation.UI.Widget, UCommerce.Presentation">
    		<parameters>
    			<DefaultWidth>2</DefaultWidth>
    			<DefaultHeight>2</DefaultHeight>
    			<Name>Turnover by currency</Name>
    			<View>/Apps/Widgets/turnoverByCurrency/view.html</View>
    			<ShowLoadingCover>True</ShowLoadingCover>
    			<EnableReload>True</EnableReload>
    			<Css>
    				<array>
    					<value>/Apps/Widgets/turnoverByCurrency/turnoverByCurrency.css</value>
    				</array>
    			</Css>
    			<Javascript>
    				<array>
    					<value>/Apps/Widgets/turnoverByCurrency/turnoverByCurrency.controller.js</value>
    					<value>/Apps/Widgets/turnoverByCurrency/turnoverByCurrency.js</value>
    				</array>
    			</Javascript>
    		</parameters>
    	</component>
    

Default dashboards has been configured for all sections enabled out of the box including:

• StartPage
• StoresStartPage
• OrdersStartPage
• MarketingStartPage
• AnalyticsStartPage
• SettingsStartPage

The list of default widgets for the dashboards can easily be extended using "Partial-Components". e.g If I want to hook in the analytics widget for the startPageDashboards I can do that with the following partial-component registration:

    
    	<partial-component id="StartPageDashboard">
    		<parameters>
    			<defaultWidgets>
    				<array>
    					<value insert="last">${GoogleAnalyticsWidget}</value>
    				</array>
    			</defaultWidgets>
    		</parameters>
    	</partial-component>