Differences

This shows you the differences between two versions of the page.

--- mistudiobootstraplayoutguide [2021/12/15 10:39]
wikiadmin
+++ mistudiobootstraplayoutguide [2021/12/15 16:04] (current)
wikiadmin [Dashboard Layout]
@@ Line 7: / Line 7: @@
 The BootstrapConfig uses any number (one or more) of the applications you have designed in MIStudio as "panels" in the bootstrap layout. As an example, here is the application node with six applications in it:
+{{:pasted:20211215-140241.png?maxwidth=300}}
+Each application can be organized into a single "Dashboard" using the BootstrapConifg configuration, for example, as a visual concept this layout:
+{{:pasted:20211215-141533.png?maxwidth=300}}
 ====Design Considerations====
@@ Line 21: / Line 23: @@
   * Design the width of a row to fit an even 1200 units with one or more application panels in the row
-====Dashboard Example====
+====Setting the Application Size====
+In MIStudio the application defaults to 800x600 (width x height). To change the application dimensions, click on the application name in the Applications node and use the Expert tab to change the width and/or height. In the image below the Footer application is set up to be 50 height x 1200 width.
+{{:pasted:20211215-104523.png?maxwidth=300}}
+For the layout concept above, the header, footer and Main panels are each 1200 wide, and the four summary panels are 300 wide (for a total of 1200). The height of all the summary panels is the same (300).
+====Dashboard Layout====
+Using the visual concept above, with the header on top, followed by the four summary panels, the main panel, and then the footer, the BootstrapConfig can be used to lay out this design.
+To start the bootstrap dashboard configuration, click on the property field "BootstrapConfig" on the project properties panel.
+{{:pasted:20211215-144317.png?maxwidth=487}}
+The new Bootstrap Layout panel looks like:
+{{:pasted:20211215-144951.png?size=609}}
+The layout is designed from the top down (top of screen first). When you start, there is one row in the layout. Select the Application "Header" to occupy this row.
+{{:pasted:20211215-151618.png?size=612}}
+The Header is set up to use the default "12" column units.
+Next, add a row to the layout using the + button as shown below:
+{{:pasted:20211215-152648.png?size=640}}
+The next row is composed of the four "Summary" panels. You can select the first one, SummaryOne, for this column, and change it to use 3 of the 12 column units.
+{{:pasted:20211215-155128.png?size=320}}
+When you change the column units from "12" to "3" a "+" appears on the left side of the selected panel. This means you can add more panels to this row. Press the "+" to add another panel, SummaryTwo, set its column units to 3, and repeat for SummaryThree and Summary Four. Once SummaryFour is added and set to use the remaining three column units, this row is complete. There will be a "-" in this section to remove panels if desired.
+{{:pasted:20211215-155837.png?size=617}}
+To finish the layout add another row and select the Main panel for this, and finally add another row for the Footer panel.
+Using the Preview button, you can view the general layout in the preview panel (the row heights are not to scale).
+{{:pasted:20211215-160322.png?size=803}}