How to?

Como modelar uma Dashboard View?

Para se criar um dashboard view é necessário:

1º No modelo de apresentação do módulo a que o dashboard diz respeito, a partir da toolbox, arrastar uma caixa “View (Dashboard)”:

Toolbox - Dashboard view

2º Preencher o nome do dashboard - este nome será usado para gerar o nome do controlador MVC, da view razor e também do estado ui-router associado. Devemos verificar se o cshtml foi criado em Host/Views/"Módulo"/Views.ttm

Dashboard View

Dashboard View

Após a transformação será gerado o controlador MVC (no projeto .Web) e a view razor (no projeto .Host)

3º Nos controladores MVC fazemos override do método generado para retornar o caminho da view:

public partial class AgendaOverviewController
    {
        /// <summary>
        /// Shows the AgendaOverview dasboard view.
        /// </summary>
        /// <returns>
        /// The AgendaOverview dashboard view.
        /// </returns>
        [Route("AgendaOverviewDashboardView")]
        public override ActionResult ShowAgendaOverviewDashboardView()
        {
            //return base.ShowAgendaDashboardDashboardView();
            return View("~/Views/BusinessCore/AgendaOverviewDashboardView.cshtml");
        }
    }

No Route deve ficar o nome do dashboard view que definimos no presentation model com o sufixo de "DashboarView". Tendo anteriormente criado um widget devemos ter no final o seguinte:

  • DashboardViews.cshtml em Host/Views/"Módulo"/Views.ttm
  • Widget.cshtml em Host/Views/"Módulo"/Custom
  • 1 classe controller para o dashboard em Web/Custom
  • 1 classe controller para o widget em Web/Custom

4º Associar os widgets criados ao Dashboard View.

Widget -> Dashboard View

5º Editar o layout da Dashboard View adicionando os Widgets.

Edit Layout

6º Guardar, tranformar e verifciar e abrir a view do dashboard em Host/Views/"Módulo"/Views.ttm e verificar se foram adicionados os widgets:

@using Primavera.BusinessCore.Domain

@{
    Layout = null;
}

<div class="dashboard">
    <pri-dashboard help-page-key="BusinessCore_AgendaOverview">
        <div class="row">
            <div class=" col-xs-offset-0 col-xs-12 col-sm-offset-0 col-sm-12 col-md-offset-0 col-md-12 dashboard-col">
                <pri-widget-container title="">
                    <div class=" col-xs-6 col-sm-6 col-md-6 dashboard-col" data-ui-view="widgetAproved"></div>
                    <div class=" col-xs-6 col-sm-6 col-md-6 dashboard-col" data-ui-view="widgetRequested"></div>
                </pri-widget-container>
            </div>
        </div>
    </pri-dashboard>
</div>