Sharing Top Content from the Angular-sphere.

Fire & Ice: David Pallmann’s Web & Cloud Blog: An AngularJS Dashboard, Part 6: Admin Tile Actions and Confirmation Dialogs

  • —————— self.saveDashboard = function (newTiles, isDefault) { var Dashboard = { DashboardName: null, IsAdmin: false, Username: null, Tiles: [], Queries: null, IsDefault: isDefault }; var tile = null; var Tile = null; // create tile object with properties for (var t = 0; t < newTiles.length; t++) { tile =...
  • int dashboardId = -1; using (SqlConnection conn = new { conn.Open(); // Add dashboard layout root record String query = “INSERT INTO DashboardLayout (DashboardName, Username, Priority) VALUES (@DashboardName, @Username, @priority); SELECT SCOPE_IDENTITY();”; using (SqlCommand cmd = new SqlCommand(query, conn)) { “Home”); username); priority); using (SqlDataReader reader = cmd.ExecuteReader()) { if…
  • int sequence = 1; foreach (Tile tile in dashboard.Tiles) { query = “INSERT INTO DashboardLayoutTile (DashboardId, Sequence) VALUES (@DashboardId, @Sequence)”; using (SqlCommand cmd = new SqlCommand(query, conn)) { dashboardId); sequence); cmd.ExecuteNonQuery(); } sequence++; } // next tile // Add DashboardLayoutTileProperty records.
  • sequence = 1; foreach (Tile tile in dashboard.Tiles) { query = “INSERT INTO DashboardLayoutTileProperty (DashboardId, Sequence, PropertyName, PropertyValue) VALUES (@DashboardId, @Sequence, @Name, @Value)”; using (SqlCommand cmd = new SqlCommand(query, conn)) { dashboardId); sequence); “color”); if (tile[“color”] == null) { DBNull.Value); } else { tile[“color”]); } cmd.ExecuteNonQuery(); cmd.Parameters.Clear(); dashboardId); sequence); “height”);…
  • = -1) // If found a dashboard… { // Delete dashboard layout tile property records query = “DELETE DashboardLayoutTileProperty WHERE DashboardId=@DashboardId”; using (SqlCommand cmd = new SqlCommand(query, conn)) { cmd.CommandType = System.Data.CommandType.Text; dashboardId); cmd.ExecuteNonQuery(); } // Delete dashboard layout tile records query = “DELETE DashboardLayoutTile WHERE DashboardId=@DashboardId”; using (SqlCommand cmd…

Last time, we added a number of tile menu actions. Some of these, like Remove Tile or Reset Dashboard, delete parts of your saved dashboard layout. We shouldn’t be taking potentially destructive actions without being sure it’s what the user wants, so we’re now going to add confirmation dialogs for these actions.

The confirmation function for Remove Tile is shown below. Line 4 sets the confirmation message; lines 6-15 set handlers for the Yes and No buttons; and line 17 displays the confirmation dialog. If Yes, is selected, the original removeTile function is executed to remove the tile and the modal dialog is hidden. If No is selected, no action ensues and the modal dialog is hidden.

When the user selectes Remove Tile from the tile menu, they now see this confirmation dialog:

Clicking Yes proceeds to remove the tile, by calling the original removeTile function.

Following the exact same pattern, here is the code for Reset Dashboard.

// resetDashboard : Restore default dashboard by deleting user’s saved custom dashboard. function resetDashboardConfirm() { $(‘#confirm-label’).html(‘Are you sure you want to reset your dashboard to the default layout?’); function () { $(“#modal-btn-yes”).off(); $(“#modal-btn-no”).off(); resetDashboard(); }); $(“#modal-btn-no”).on(“click”, function…

Fire & Ice: David Pallmann’s Web & Cloud Blog: An AngularJS Dashboard, Part 6: Admin Tile Actions and Confirmation Dialogs

Comments are closed, but trackbacks and pingbacks are open.