I’m trying to develop a particular Dashboard. I want to create an initial empty dashboard, and dynamically fill it with elements.
First of all, I create an empty dashboard: XHTML —>
<p:dashboard id="dash" model ="#{homeReceptionDashboardBck.model}">
<c:forEach
items="#{homeReceptionDashboardBck.widgets}"
var="widgetsElement">
<p:panel id = "widgetsElement.idWidget" header="widgetsElement.name">
<c:forEach
items="#{homeReceptionDashboardBck.uploadBooking(widgetsElement)"
var="bookings">
<h:outputText value="#{booking.owner.ragioneSociale}">
</h:outputText>
</c:forEach>
</p:panel>
</c:forEach>
</p:dashboard>
This is the code that i used to popolate and create dynamically every panel by using .
- Fist foreach to verify how many widget the user insert into the MODEL
- Second foreach to popolate every panel with different element called “booking”.
I create an empty model that is loaded ad the application startup :
for(i = 0;i<officesList.size();i++) {
DashboardColumn columnTmp = new DefaultDashboardColumn();
model.addColumn(columnTmp);
columnDashboard.add(columnTmp);
List<MeetingRoom> tempMeetingRoom = new ArrayList<>();
tempMeetingRoom = meetingmr.getAllByOffice(
officesList.get(i).getId(),
true,
JSFUtil.getActiveUser());
for(x = 0;x<tempMeetingRoom.size();x++)
{
//popolo la lista che mi serve all'inizio per la lista dei Panel da inserire
meetingRoomByOffice.add(tempMeetingRoom.get(x));
}
officePositionAndColumn[i][0] = (int) (long) officesList.get(i).getId();
officePositionAndColumn[i][1] = i;
}
In this part of the code, I’m doing a lot of things but the important one is “create” and add a new empty column. I create a List of DashboardColumn to use inside the java code, called columnDashboard.
I create a particular menu to add a widget inside the model : XHTML —>
<smifn:actionsMenu id="tableAddMeetingRoom" styleClass="col-xs-8 col-md-12 text-right"
title="#{msg['booking.add_meeting_room']}">
<c:forEach items="#{homeReceptionDashboardBck.meetingRoomByOffice}"
var="meetingRoomElement">
<p:menuitem id="#{homeReceptionDashboardBck.getMenuItemId(meetingRoomElement)}"
actionListener="#{homeReceptionDashboardBck.onAddPanel(meetingRoomElement)}"
process="@this" partialSubmit="true"
value="#{meetingRoomElement.name}"
icon="icon-add-3"
iconPos="left"
>
<p:ajax process="widgetBookingReception" update="widgetBookingReception"/>
</p:menuitem> <!-- oncomplete="PF('bookingSelect').show()"-->
</c:forEach>
</smifn:actionsMenu>
When someone decide to add a Widget, I modify the model with the method onAddPanel
JAVA —->
public void onAddPanel(MeetingRoom panelSelected) {
int i;
//splitto il nome per creare l'id
String [] nameMeetingRoom = panelSelected.getName().split(" ");
String idWidget = nameMeetingRoom[0]+"_"+nameMeetingRoom[1];
//oggetto di tipo DashboardWidget
DashboardWidget tmp = new DashboardWidget();
//imposto l'id, nome della stanza e l'ufficio relativo
tmp.setIdWidget(idWidget);
tmp.setName(panelSelected.getName());
tmp.setOffice(panelSelected.getOffice());
//aggiungo alla lista dei widget l'oggetto relativo
widgets.add(tmp);
//stringa per la posizione della colonna
int columnPosition = -1;
//faccio un for per passare tutte le colonne relative
for(i = 0;i<officePositionAndColumn.length;i++)
{
//se l'id che era stato impostato è uguale a quello passato
if(officePositionAndColumn[i] [0] == panelSelected.getOffice().getId())
//posizione della colonna che va da 0 a n.
columnPosition = officePositionAndColumn[i][1];
}
//se è stato trovata la posizione della colonna
if(columnPosition>=0) {
//mi ricavo la colonna
DashboardColumn columnSelected = new DefaultDashboardColumn();
columnSelected = columnDashboard.get(columnPosition);
//imposto l'id al widget
columnSelected.addWidget(idWidget);
//sovrascrivo la colonna con quella modificata
columnDashboard.set(columnPosition, columnSelected);
//reimposto il modello e ricarico le colonne
setModel(new DefaultDashboardModel());
for(i = 0;i<columnDashboard.size();i++)
{
this.model.addColumn(columnDashboard.get(i));
}
for(i = 0;i<meetingRoomByOffice.size();i++)
{
if(meetingRoomByOffice.get(i).equals(panelSelected))
{
meetingRoomByOffice.remove(i);
}
}}
I already verify this method, but I can’t visualize the result. How can i UPDATE the model of the Dashboard? I already try this, but I think that this shouldn’t work ;(
public void createDashboardDinamically() {
int i;
FacesContext fc = FacesContext.getCurrentInstance();
Application app = fc.getApplication();
dashboard = (Dashboard) app.createComponent(
fc,
"org.primefaces.component.Dashboard",
"org.primefaces.component.DashboardRenderer");
dashboard.setId("dash");
dashboard.setModel(model);
Panel panel1 = (Panel) app.createComponent(
fc,
"org.primefaces.component.Panel",
"org.primefaces.component.PanelRenderer");
panel1.setId("Sala_Demo");
panel1.setToggleable(true);
panel1.setClosable(true);
panel1.setHeader("Sala Demo");
for(i = 0;i<widgets.size();i++)
{
Panel panel = (Panel) app.createComponent(
fc,
"org.primefaces.component.Panel",
"org.primefaces.component.PanelRenderer");
panel.setId(widgets.get(i).getIdWidget());
panel.setToggleable(true);
panel.setClosable(true);
panel.setHeader(widgets.get(i).getName());
getDashboard().getChildren().add(panel);
}
Can somebody help me? If it works, I’ll share the entire code to dinamically popolate a PrimeFaces Dashboard. Thanks a lot guys, i’m stuck 🙁