Dashboards
Os Dashboards da plataforma Elevation fornecem uma estrutura que permite facilmente criar widgets que interagem com os seus serviços e, em simultâneo, abrem a plataforma ao imenso mundo de widgets e serviços externos que proliferam na rede.
Desenhar os dashboards Elevation por forma a facilmente integrem componentes externos (desenvolvidos pela comunidade web, parceiros, etc) permitirá que a plataforma cresça para além daquilo que podemos hoje imaginar.
Este documento descreve de forma sumária as principais linhas do desenho dos dashboards na plataforma Elevation, assim como cada um dos componentes base disponibilizados pela framework.
Componentes v1.0
São disponibilizados de base pela Framework componentes que oferecerem funcionalidades básicas e previsivelmente reutilizáveis em vários widgets, nos diversos produtos.
São componentes que têm como fonte de dados listas, operações e outros recursos da framework e que representam a informação nos formatos tradicionais: grelha, gráfico, etc…
Componente "Grelha"
Diretiva angular “pri-grid-widget”.
Configuração
- operation: permite definir a service operation usada para o fetch de dados
ex: sales/indicatorService/getIndicatorsByCode?codes=margin,sales
- header-hidden: permite seconder/mostrar o cabeçalho da grelha
true or false
- configuration: permite configurar opções de layout em diferenciadas para cada uma das colunas da grelha
ex:
{
"columns": [
{
"caption": {
"en": "Indicator",
"pt": "Indicador"
},
"type": 0,
"isLink": false,
"colWidth": 4,
"propertyValue": "caption"
},
{
"caption": {
"en": "Variation",
"pt": "Variação"
},
"type": 1,
"isLink": false,
"mask": "{0}%",
"colWidth": 2,
"propertyValue": "variation",
"conditions": [
{
"operator": 0,
"value": 0,
"cssClass": "widget-grid-cell-conditions-one"
},
{
"operator": 2,
"value": 0,
"cssClass": "widget-grid-cell-conditions-three"
},
{
"operator": 4,
"value": 0,
"cssClass": "widget-grid-cell-conditions-two"
}
]
}
]
}
Componente "kpi"
Diretiva angular “pri-kpi-widget”.
Configuração
- operation: permite definir a service operation usada para o fetch de dados
ex: sales/indicatorService/getIndicatorByCode?code=acp
- title: permite definir que campo será usado como título do indicador
- value: permite definir que campo será usado como valor do indicador
- trend: permite definir que campo será usado como tendência do indicador
- conditions: permite configurar diversas opções de layout
ex:
[
{
"operator": 1,
"value": 0,
"cssClass": "widget-grid-cell-conditions-two"
},
{
"operator": 0,
"value": 0,
"cssClass": "widget-grid-cell-conditions-one"
}
]
Componente "gráfico de barras"
Diretiva angular “pri-bar-chart-widget”.
Configuração
- operation: permite definir a service operation usada para o fetch de dados
ex: expensesManager/widgets/getVehiculesCount
- caption: permite definir o campo usado para apresentar valores no eixo do x
- series: permite definir um ou mais campos usados para apresentar valores no eixo do y
- series-captions: permite definir a label usada para identificar cada uma das séries
- titles: permite definir o titulo a apresentar quando o utilizador passa com o rato sobre o widget
- forceZeroOnScale: permite mostrar a linha com o valor zero no eixo do y
ex:
@{
Layout = null;
}
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<pri-bar-chart-widget operation="expensesManager/widgets/getVehiculesCount"
series='["count","dieselCount"]'
title="Vehicules"
series-captions='["Number of Vehicules","Number of Diesel Vehicules"]'
caption="caption"
no-data-message="No items">
</pri-bar-chart-widget>
</div>
</div>
Componente "key-value"
Diretiva angular “pri-key-value-widget”.
Configuração
- operation: permite definir a service operation usada para o fetch de dados
ex: simplesales/summaryValues/getPendingSalesOrdersCount
- title: permite definir que campo será usado como título do indicador
- sub-title: permite definir que campo será usado como sub-título do indicador
- value: permite definir que campo será usado como valor do indicador
- is-link: permite definir que campo será usado como ligação
Componentes v2.0
Os widgets que possam ser configurados com operações de 'fetch' de dados, podem usar os seguintes wildcards, que serão substituídos em runtime:
- {account} Permite configurar a conta num pedido a um endereço externo (ex: micro-serviço).
- {subscription} Permite configurar a subscrição num pedido a um endereço externo (ex: micro-serviço).
- {company} Permite fazer do widget um widget company dependente. Em runtime é substituído pela empresa selecionada, e quando a empresa muda é feito novamente o get dos dados.
- {audience} Permite incluir no pedido informação relativa a quem se deve dirigir a resposta. Atualmente, em runtime é substituído pela role associada ao utilizador.
- {currentDate} Permite incluir a data atual (tipo: Date).
- {currentDateTime} Permite incluir a data e hora atual.
- {todayStartDateTime} Permite incluir o inicio do dia atual.
- {todayEndDateTime} Permite incluir o final do dia atual.
- {previousWeekStartDate} Permite incluir a data correspondente ao primeiro dia da semana anterior (domingo).
- {previousWeekEndDate} Permite incluir a data correspondente ao último dia da semana anterior (sábado).
- {previousWeekStartDateTime} Permite incluir a data e hora correspondente ao primeiro dia da semana anterior (domingo).
- {previousWeekEndDateTime} Permite incluir a data e hora correspondente ao último dia da semana anterior (sábado).
- {currentWeekStartDate} Permite incluir a data correspondente ao primeiro dia da semana atual (domingo).
- {currentWeekEndDate} Permite incluir a data correspondente ao último dia da semana atual (sábado).
- {currentWeekStartDateTime} Permite incluir a data e hora correspondente ao primeiro dia da semana atual (domingo).
- {currentWeekEndDateTime} Permite incluir a data e hora correspondente ao último dia da semana atual (sábado).
- {nextWeekStartDate} Permite incluir a data correspondente ao primeiro dia da próxima semana (domingo).
- {nextWeekEndDate} Permite incluir a data correspondente ao último dia da próxima semana (sábado).
- {nextWeekStartDateTime} Permite incluir a data e hora correspondente ao primeiro dia da próxima semana (domingo).
- {nextWeekEndDateTime} Permite incluir a data e hora correspondente ao último dia da próxima semana (sábado).
- {previousMonthStartDate} Permite incluir a data correspondente ao primeiro dia do mês anterior.
- {previousMonthEndDate} Permite incluir a data correspondente ao último dia do mês anterior.
- {currentMonthStartDate} Permite incluir a data correspondente ao primeiro dia do mês atual.
- {currentMonthEndDate} Permite incluir a data correspondente ao último dia do mês atual.
- {nextMonthStartDate} Permite incluir a data correspondente ao primeiro dia do próximo mês.
- {nextMonthEndDate} Permite incluir a data correspondente ao último dia do próximo mês.
- {previousYearStartDate} Permite incluir a data correspondente ao primeiro dia do ano anterior.
- {previousYearEndDate} Permite incluir a data correspondente ao último dia do ano anterior.
- {currentYearStartDate} Permite incluir a data correspondente ao primeiro dia do ano atual.
- {currentYearEndDate} Permite incluir a data correspondente ao último dia do ano atual.
- {nextYearStartDate} Permite incluir a data correspondente ao primeiro dia do próximo ano.
- {nextYearEndDate} Permite incluir a data correspondente ao último dia do próximo ano.
NOTA
Podemos adicionar ou subtrair horas (apenas para os tipo DateTime), dias, semanas, meses e anos aos wildcard do tipo Date ou DateTime.
Por exemplo:
- {currentDate+d+X} Permite incluir a data atual (adicionando X dias).
- {currentDateTime+d+X} Permite incluir a data e hora atual (adicionando X dias).
- {currentDateTime+h+X} Permite incluir a data e hora atual (adicionando X horas).
- {currentMonthStartDate+m-X} Permite recuar X meses ao inicio do mes atual.
- {currentYearEndDate+y-X} Permite recuar X anos para o ultimo dia do respectivo ano.
Componente "Shell"
Componente angular6 “pri-shell-widget-group”.
Este widget é um container para outros widgets. Tem uma área em cima com TABs, que pode conter N widgets do tipo value-widget, uma área central, que pode conter um widget do tipo chart-widget ou grid-widget, e, opcionalmente, uma área lateral que pode conter um widget do tipo insights-widget. É possível sincronizar as diferentes partes deste widget através de eventos que dizem que TAB está selecionado. Essa configuração pode encontrar-se na secção Configuração de cada um dos widgets.
Configuração
{
"viewDefinition": {
"topWidgetSelectionEvent":"changedWidgetEvent",
"topWidgets": [{
"widgetID": "topWidget1"
},
{
"widgetID": "topWidget2"
},
{
"widgetID": "topWidget3"
}
],
"sideWidgets": {
"widgetID": "insigthWidgetConfig"
},
"mainWidgets": {
"widgetID": "chartWidget",
"widgetType": "chart"
}
}
}
- A propriedade topWidgetSelectionEvent corresponde ao nome do evento lançado aquando da seleção de um TAB;
- Na secção topWidgets definem-se os identificadores dos widgets usados na área dos TABs. Estes identificadores são também usados para encontrar a configuração de cada um dos widgets;
- Na secção sideWidgets define-se o identificador do widget usado na área lateral. Este identificador é também usado para encontrar a configuração do widget;
- Na secção mainWidgets define-se o identificador e o tipo do widget usado na área principal. Este identificador é também usado para encontrar a configuração do widget. Os tipos suportados são ‘chart’ e ‘grid’;
Componente "Indicator"
Componente angular6 “pri-indicator-widget”.
Este widget mostra informação relativa a um KPI de negócio. Permite mostrar título, o valor absoluto, a tendência e a variação, em relação a um conjunto de comparadores (ex: homólogo, orçamento, etc)
Configuração
{
"titleRes": "clientApp.components.RES_Value_Widget_Sales",
"noDataMessageRes": "clientApp.components.RES_Widget_No_Data",
"selectors": [{
"selectorId": "budget",
"selectorTitleRes": "clientApp.components.RES_Value_Widget_Budget",
"operation": "/financialCore/indicators/GetMockValueWidgetData/{company}",
"valueKey": "value",
"trendKey": "trend",
"resultKey": "result",
"symbolKey": "currency",
"digitsKey": "numberOfDigits",
"domainType": "money",
"variationValueKey": "variation"
},
{
"selectorId": "year",
"selectorTitleRes": "clientApp.components.RES_Value_Widget_Year",
"operation": "financialCore/indicators/GetMockValueWidgetData/{company}",
"valueKey": "value",
"trendKey": "trend",
"resultKey": "result",
"symbolKey": "currency",
"digitsKey": "numberOfDigits",
"domainType": "money",
"variationValueKey": "variation"
}
]
}
- A propriedade operation corresponde à operação, que no produto, devolve os dados do KPI;
- As propriedades com sufixo key devem ser configuradas com o nome da propriedade do resource que contém o respetivo valor;
- As propriedades com sufixo Res devem ser configuradas com resources;
- A propriedade resultKey deve ser mapeada para uma propriedade que tenha os valores -1 (negativo), 0 (neutro) ou 1 (positivo);
- A propriedade trendKey deve ser mapeada para uma propriedade que tenha os valores -1 (descendente), 0 (constante) ou 1 (ascendente);
- A propriedade domainType carateriza o valor do KPI, podendo ser ‘money’, ‘percentage’ ou ‘decimal’;
Neste exemplo, o resource entregue pela operação GetMockValueWidgetData é o seguinte:
Componente "Messages"
Componente angular6 “pri-messages-widget”.
Este widget mostra mensagens (título e corpo) e permite navegar entre elas. Pode ser configurado com um endereço interno ou externo, e é particularmente adequado para mostrar insights de negócio.
Configuração
{
"noDataMessageRes": "clientApp.components.RES_Insight_No_Data",
"noDataTitleMessageRes": "clientApp.components.RES_Insight_No_Data_Title",
"titleRes": "clientApp.components.RES_Insight_Title",
"refreshEventId": "operationChangedWidgetEvent",
"hideOnNoData": true,
"options": [{
"updateOn": {
"refreshWidgetId": "topWidget1"
},
"insightDefinition": {
"isExternalOperation": true,
"operation": "https://www.mocky.io/{account}/{subscription}/{company}"
}
},
{
"updateOn": {
"refreshWidgetId": "topWidget2"
},
"insightDefinition": {
"isExternalOperation": true,
"operation": "https://www.mocky.io/{account}/{subscription}/{audience}"
}
}
]
}
- Na secção options definem-se as diferentes configurações que serão aplicadas em função dos eventos que vão sendo emitidos;
- A propriedade refreshEventId corresponde ao nome do evento ao qual o widget vai reagir;
- Em cada configuração, na secção updateOn definem-se os parâmetros para verificar o match do evento.
- A propriedade isExternalOperation indica se a operação é interna (do produto) ou externa;
- A propriedade operation corresponde à operação que devolve a lista de mensagens;
- A propriedade hideOnNoData indica se o widget fica ou não vísivel quando não existem dados
- As mensagens podem conter HTML;
Componente "Gráfico"
Componente angular6 “pri-chart-widget”.
Este widget permite desenhar gráficos. Disponibiliza diferentes configurações para séries, assim como diferentes tipos de gráficos. Os dados têm que ser entregues segundo o mesmo contrato usado na versão anterior do chart-widget: [{‘xAxisName’, ‘valorSerieA’, ‘valorSerieB’, ‘…’}, {‘xAxisName’, ‘valorSerieA’, ‘valorSerieB’, ‘…’}, …] Ex: [{‘1º Trimestre’, ‘100’, ‘125’}, {‘2º Trimestre’, ‘80’, ‘17’}, {‘3º Trimestre’, ‘296’, ‘15’}, {‘4º Trimestre’, ‘112’, ‘110’}]
Configuração
{
"noDataMessage": "clientApp.components.RES_Widget_No_Data",
"refreshEventId": "changedWidgetEvent",
"options": [
{
"updateOn": {
"refreshWidgetId": "topWidget1",
"refreshSelectedValue": "budget"
},
"chartDefinition": {
"operation": "financialCore/indicators/getPandLSummary",
"titleRes": "clientApp.components.RES_Value_Widget_Sales",
"hideLegend": "false",
"captionKey": "columnName",
"seriesKeys": [ "net", "expense", "income" ],
"seriesCaptions": [ "clientApp.components.RES_Chart_Widget_Net", "clientApp.components.RES_Chart_Widget_Expenses", "clientApp.components.RES_Chart_Widget_Revenue" ],
"seriesTypes": [
{
"type": "regular",
"subType": "line",
"area": false
},
{
"type": "regular",
"subType": "line",
"area": false
},
{
"type": "regular",
"subType": "bar",
"area": false
}
]
}
},
…
]
}
- Na secção options definem-se as diferentes configurações que serão aplicadas em função dos eventos que vão sendo emitidos;
- A propriedade refreshEventId corresponde ao nome do evento ao qual o widget vai reagir;
- Em cada configuração, na secção updateOn definem-se os parâmetros para verificar o match do evento;
- A propriedade operation corresponde à operação que devolve a lista de mensagens;
- O resultado deve estar de acordo com o contrato estabelecido;
- As propriedades com sufixo key devem ser configuradas com o nome da propriedade do resource que contém o respetivo valor;
- As propriedades com sufixo Res devem ser configuradas com resources;
- Na secção serieTypes define-se o tipo e subtipo de cada serie, assim como se tem ou não a área preenchida;
- Tipos suportados:
- regular (para observações regulares)
- Cor principal do produto (e variações a partir dessa cor);
- Permite preenchimento da área;
- Linha sólida (caso subtipo seja linha);
- comparison (para observações de valores de comparação – homologo, orçamento, etc…)
- Cor laranja (e variações a partir dessa cor);
- Não permite preenchimento da área;
- Linha sólida (caso subtipo seja linha);
- forecast (para observações de valores relativos a previsões)
- Cor cinza (e variações a partir dessa cor);
- Não permite preenchimento da área;
- Linha tracejada (caso subtipo seja linha);
- regular (para observações regulares)
- Subtipos suportados:
- line;
- bar;
- events;
- Tipos suportados:
Componente "Lista"
Componente angular6 “pri-list-widget”.
Este widget permite mostrar diferentes resultados, em formato de lista, e navegar entre eles a partir de tabuladores na parte superior do widget. Permite ainda definir um endereço para navegar e ver mais detalhes relativos à informação apresentada. É possível ainda configurar cada uma das colunas apresentadas de diversas formas.
Configuração
{
"noDataMessage": "clientApp.components.RES_Widget_No_Data",
"refreshEventId": "operationChangedWidgetEvent",
"options": [
{
"updateOn": {
"refreshWidgetId": "topWidget1"
},
"tabs": [
{
"label": "dashboard.components.RES_Grid_Widget_Year",
"isExternalOperationCount": true,
"operationCount": "https://www.mocky.io/v2/5c796b57300000c74949b3c3/{company}",
"gridDefinition": {
"isExternalOperation": false,
"operation": "/sales/summaryValues/GetOperationalData?code=year",
"buttonLink": {
"buttonLabel": "clientApp.components.RES_Value_Widget_Sales",
"buttonOperation": "#/sales/orders/list?listname=Orders"
},
"columns": [
{
"valueKey": "document",
"titleRes": "Document",
"columnSize": 1
},
{
"valueKey": "documentStatus",
"titleRes": "Status",
"resultKey": "documentStatusResult",
"columnSize": 1,
"isBold": true,
"isUppercase": true
},
{
"valueKey": "documentDate",
"titleRes": "Date",
"columnSize": 1,
"domainType": "date"
},
{
"valueKey": "buyerCustomerParty",
"titleRes": "Party",
"linkKey": "buyerCustomerPartyLink",
"columnSize": 3
},
{
"valueKey": "payableAmount",
"titleRes": "Total",
"domainType": "money",
"symbolKey": "payableAmountSymbol",
"digitsKey": "payableAmountFractionDigits",
"columnSize": 2,
"isBold": true
}
]
}
},
{
"label": "semester",
"isOperationCountInternalService": false,
"operationCount": "https://www.mocky.io/v2/5c796b623000007d3149b3c4/{company}",
"gridDefinition": {
"operation": "/sales/summaryValues/GetOperationalData?code=semester",
"columns": [
{
"valueKey": "document",
"titleRes": "Document",
"columnSize": 1
},
{
"valueKey": "documentStatus",
"titleRes": "Status",
"resultKey": "documentStatusResult",
"columnSize": 1,
"isBold": true,
"isUppercase": true
},
{
"valueKey": "documentDate",
"titleRes": "Date",
"columnSize": 1,
"domainType": "date"
},
{
"valueKey": "buyerCustomerParty",
"titleRes": "Party",
"linkKey": "buyerCustomerPartyLink",
"columnSize": 3
},
{
"valueKey": "payableAmount",
"titleRes": "Total",
"domainType": "money",
"symbolKey": "payableAmountSymbol",
"digitsKey": "payableAmountFractionDigits",
"columnSize": 2,
"isBold": true
}
]
}
},
…
]
},
…
]
}
- Na secção options definem-se as diferentes configurações que serão aplicadas em função dos eventos que vão sendo emitidos;
- A propriedade refreshEventId corresponde ao nome do evento ao qual o widget vai reagir;
- Em cada configuração, na secção updateOn definem-se os parâmetros para verificar o match do evento.
- A propriedade isExternalOperation indica se a operação de devolve os dados é ou não externa;
- A propriedade isExternalOperationCount indica se a operação de devolve o contador é ou não externa;
- A propriedade operation corresponde à operação que devolve os dados;
- A propriedade operationCount corresponde à operação que devolve o contador mostrado nos TABs;
- Na secção columns configuram-se, individualmente, cada uma das colunas;
- Os domainType suportados são:
- date;
- dateTime;
- money;
- decimal;
- Os domainType suportados são:
- A propriedade columnSize define o tamanho relativo de cada coluna, sendo que as dimensões mínimas são preservadas, sendo mostrado um scroll horizontal, quando a soma das dimensões mínimas é superior à área disponível;
- É possível configurar cada coluna para funcionar como link (linkKey), ser mostrada em maiúsculas (isUpperCase) e ser mostrada a negrito (isBold);
- As propriedades com sufixo key devem ser configuradas com o nome da propriedade do resource que contém o respetivo valor;
- As propriedades com sufixo Res devem ser configuradas com resources;
Componente "Grouped Data"
O widget GroupedDataWidget permite mostrar informação agrupada por colunas. Cada coluna carrega informação devolvida a partir de um endpoint configurado, para cada bloco de informação (item) recebido, é apresentado o componente configurado (neste caso, o widget TaskCard) com os dados recebidos.
Configuração
{
"idKey": "id",
"stateKey": "assignmentState",
"userKey": "assignedToKey",
"listOperation": "/corepatterns/assignments/list?listname=Assignments",
"noDataTitle": "dashboard.components.RES_TaskWidget_NoData_Title",
"noDataSubtitle": "dashboard.components.RES_TaskWidget_NoData_SubTitle",
"maxColumnItems": 3,
"createOperation": {
"sideBar": true,
"operation": "createTaskFromRightBar"
},
"columns": [
{
"operation": "/corePatterns/assignments/getAssignmentsDueToday",
"isExternalOperation": false,
"titleRes": "dashboard.components.RES_Today"
},
{
"operation": "/corePatterns/assignments/getAssignmentsBetweenDates?startDate={nextDayDate}&endDate={currentWeekEndDate}",
"isExternalOperation": false,
"titleRes": "dashboard.components.RES_This_Week"
},
{
"operation": "/corePatterns/assignments/getAssignmentsBetweenDates?startDate={nextWeekStartDate}&endDate={nextWeekEndDate}",
"isExternalOperation": false,
"titleRes": "dashboard.components.RES_Next_Week"
},
{
"operation": "/corePatterns/assignments/getAssignmentsBetweenDates?startDate={nextWeekEndDate}",
"isExternalOperation": false,
"titleRes": "dashboard.components.RES_Future"
}
],
"innerComponentType": {
"widgetType": "taskCardComponent"
},
"filters": {
"state": {
"visible": true,
"states": [
{
"key": 1,
"captionRes": "dashboard.components.RES_Task_State_Not_Started",
"style": "new",
"isSelected": false
},
{
"key": 2,
"captionRes": "dashboard.components.RES_Task_State_In_Progress",
"style": "in-progress",
"isSelected": true
},
{
"key": 3,
"captionRes": "dashboard.components.RES_Task_State_Stalled",
"style": "stalled",
"isSelected": true
},
{
"key": 4,
"captionRes": "dashboard.components.RES_Task_State_Completed",
"style": "completed",
"isSelected": true
}
],
"placeHolder": "dashboard.components.RES_FilterTasksByState_Placeholder",
"captionRes": "dashboard.components.RES_Task_Status"
},
"user": {
"visible": true,
"userKey": "userKey",
"nameKey": "name",
"pictureKey": "picture",
"loadUsersOperation": "identity/users/getUsersSummaryInfo",
"placeHolder": "dashboard.components.RES_FilterTasksByUser_Placeholder"
}
}
}
- As propriedades com sufixo key devem ser configuradas com o nome da propriedade do resource (devolvido no endpoint configurado para cada coluna) que contém o respetivo valor;
- A propriedade listOperation corresponde à rota para a qual a aplicação navega ao clicar no ícone de listagem.
- A propriedade noDataTitle e noDataSubtitle correspondem, respetivamente, às resources que devem ser carregadas quando não existem dados para apresentar.
- A propriedade maxColumnItems define o máximo n.º de items vísivel por coluna (aparece um botão "Show More" quando o n.º de items excede este valor configurado), caso seja 0, as colunas não vão ter limite de items a apresentar.
- O objecto createOperation define a operação chamada ao clicar no "+" (definir sideBar como true para a operação ser carregada na sidebar)
- No array de columns são definidas as colunas, o endpoint que cada coluna usa para devolver informação e a resource utilizada no título da mesma.
- No objecto innerComponentType,a propriedade widgetType define o componente Angular carregado para cada item devolvido em cada coluna.
- Na configuração dos filtros, podemos definir dois filtros para serem apresentados visualmente, o filtro de estado (state) e o filtro de utilizador (user), para o filtro de estado, definimos no ficheiro de configuração os valores que devem ser apresentados, já para o filtro de utilizadores, definimos o endpoint que deve ser chamadao para carregar os utilizadores e o mapeamento dos campos.
Nota: Ao um dashboard com este widget, é necessário definir o InnerComponent (neste caso foi utilizado o TaskCard), que deve corresponder ao componente Angular que vai ser injetado nas colunas. Este componente deve ter um atributo Input() com o nome data, neste atributo serão injetados os dados recebidos para cada item de cada coluna.
Implementação padrão de um Widget (v1.0)
Um widget Elevation300 é composto por 2 peças principais:
Controlador MVC
Este controlador é gerado a partir do modelo de apresentação, e permite que se faça override ao método OnShowSampleWidgetView:
/// <summary>
/// Shows the sample widget view.
/// </summary>
/// <returns>
/// The sample widget view.
/// </returns>
[Route("SampleWidgetWidgetView")]
public ActionResult ShowSampleWidgetView()
{
return this.OnShowSampleWidgetView();
}
A implementação padrão do widget passa por fazer override a este método retornando a respetiva view razor:
/// <summary>
/// Called when [navigate to respective ui-router state].
/// </summary>
/// <returns>The respective view.</returns>
protected override ActionResult OnShowSampleiWidgetView()
{
return this.View("~/Views/SampleModule/Custom/SampleWidgetView.cshtml");
}
View Razor
Esta view é totalmente custom, e tem que ser criada pelo developer de acordo com o override ao método OnShowSampleiWidgetView do controller.
@inherits System.Web.Mvc.WebViewPage
@{
Layout = null;
}
<pri-sample-widget param1="sales/sampleService/getSampleData"
param2="…"
param3="…">
</pri-sample-widget>