Continuing the story from my previous post of Digital Transform of Student Assessment, I'm now working on Version 2 of the Assessment App. Through feedback from users and a seeing what's being done by others within the #PowerApps Community, I'm now utilizing the Creator Kit Fluent UI Components.
You can get the Creator Kit Components at Microsoft Learn. Additional, you can can additional support, latest releases and guidance by visiting the Power CAT code components GitHub repository.
Adding and Updating the Current Solution
As well as updating the current Applications within the solution, I'm adding an additional App, Continuums. Although this app is specifically designed to map a hierarchy of Learning Outcomes and Skills and Procedures mapped to a level of student development, the same technique I'm using could also be applied to other areas such s Competence Management, Risk Assessment and Permit to Work Controls.
Continuums will enable Subject Specialists and Administrators to create Subject / Grade Continuums for use across the Division. Additional, it will enable Teachers to mark progress against those for each student as well the ability to create Individualized Program Plans (IPPs) which are required for all students with special needs, including those with learning disabilities.
Dataverse
I've added an additional 4 Dimension Tables and 1 Fact Table to the existing solution for Continuums. The 4 Dimension Tables hold information related to the Curricula, Organizing Ideas, Learning Outcomes and Skills and Procedures.
The Fact table has a columns called Continuum Detail. This is a Plain Text multiple lines column set to a maximum character count of 20000. Additional, three of my Dimension Tables have a column called GUID to Match. These are Power Fx Formula columns.
The formula for these columns are set to Lower(Table Identifier)
The reasons for these specific columns will become more obvious once you see the App Controls within the next section.
PowerApps
As in the previous version of the App, I have continued to design this within one screen utilizing a number of Horizontal and Vertical Containers as well as Containers and Galleries. These are made visible based on the menu item selected by the user.
Additional, the App has some of the Upcoming Features enabled:
Enhanced component properties
Named Formulas
ParseJSON functions and untyped objects
PDF function
Enable access to Microsoft Dataverse actions.
Named Formulas
I'm using Named formulas to improve time to first screen displayed. The once consideration you must take into account when using Named Formulas, are that any declared variables or collections are not updated once the app has loaded. For more information on Named Formulas, you can read the article on Microsoft Learn. I am using named formulas for setting my Teams Deep Link ID's, Application Font and sizes, Application Theme and, Menu Collection.
Students Overview
The Students Overview gives a teacher the ability to view any Students Continuum for a particular Curriculum. Currently we only have English Language Arts and Mathematics done to date but, as we add additional Curricula, additional icons will appear.
This gallery has the first Power Cat Code component DetailsList control. This control enables the mapping of fields from Dataverse or local Collections to named Columns. The control is only mapped to the Dataverse Student Section Table, it is not mapped to the Continuum Fact Table at all and, the icons make no representation if the Student Continuum has been updated or not.
The Icons within the list are defined within the items formula and, are named Fluent UI Icons which you can access from the Microsoft Fluent UI Developer Site. Within the column_items property these columns are designated as a clickableimage.
For the clickableimage column, an OnChange event can then handle when a user selects (mouse or keyboard) the icon. The DetailsList control has the Selection type property set to None ensuring that only the selection of an icon will trigger an event.
When the OnChange event is triggered, it calls the Continuum Fact Table matching the defined Name variable. If it finds a matching record, it creates a local Collection, colContinuum. It builds this collection using the ParseJSON function we enable earlier from, the JSON stored within the Continuum Details column defined within the Fact Table. I've taken this approach rather than a standard Fact Table where each item would have its own record as, each Continuum may have upwards of 80 items listed and, I wanted to reduce the number of records I take back to the app.
Once the Collection has been built, the defaults for the Layouts and containers are defined, the Breadcrumb Table is updated and the Continuum Details Screen is displayed. The Breadcrumb control is also one of the Power Cat Code component controls.
The items with the Green icon are identified from the colContiumm Collection parsed from the Continuum Fact Table.
Continuum Details
The layout of the Continuum Details comprises of a Horizontal Layout Gallery, Containers and two Galleries. The Menu Container is not visible on this screen enabling more details to be visible related to the Continuum.
All the controls are contained within a Horizontal Layout Gallery. There are two main Containers within the layout, the Details and, Add Details. The Details container has two widths, Expanded and Minimized which, are controlled from either the icon located in the first galley or when the Add Details container is visible. This gives three variations of how data is presented to the teacher.
The Organizing Ideas Gallery is a simple Blank Horizontal Gallery. The Template Size is set to the number of items in the Organizing Ideas Dimension Table divided by the Gallery Width, The OnSelect Property of the Gallery sets the Container width between Minimized or Expanded. Within each Template is two labels which comes from the collected Dimension Table.
The Learning Outcomes Gallery is a Blank flexible height gallery. The Template size is set to 100 and its width is set to the Organizing Ideas Gallery. Within the Template there are two labels and 4 Power Cat Code component DetailsList controls.
The first three controls are mapped to fields in the Skills and Procedures Dimensions Table as well as the colContinuums Collection using the GUID to Match column I created within the Dimension tables. The last control has a slightly different mapping as, it only displays Skills and Procedures added to the individual Student identified within the colContinuums Collection.
The Icons within the column_items property are designated as a clickableimage. When the OnChange event is triggered for the first three DetailList Controls, if the selected row is not within the colContinuums Collection, it is added changing the icon from a check box to the ticked icon. If the selected row exists within the collection, it is removed from the collection changing the icon back to a checkbox. This essentially allows the teacher to switch between completed / not completed. Additionally, it patches the Student Record within the Continuum Fact Table updating the Continuum Details column.
The last DetailList Control OnChange event works slightly differently as, the item needs to still remain within the Student Collection as, this has been identified as an additional Skill and Procedure this student has accomplished. In this instance, rather than adding and removing from the collection, the record is patched to update the ST column which is used for the status. It also patches the Student Record within the Continuum Fact Table updating the Continuum Details column.
When the teacher clicks the Add Extending Item(s) button, the Add Details container is displayed Here they can select additional Skills and Procedures to add to the Student Continuum.
On clicking Save, the OnChange event adds the selected item to the colContinuum Collection then patches the the Student Record within the Continuum Fact Table updating the Continuum Details column.
The item is now available to switch between completed / not completed.
Once the teacher has marked the relevant Skills and Procedures, they can close the Continuum and return to the Student Details View.
The OnChange event patches the Student Record within the Continuum Fact Table then resets the defaults for the Gallery Containers, the Breadcrumb Table is updated and the Student Details Screen is displayed.
In additional to the DetailsList and Breadcrumb components I'm also utilizing the Power Cat Code component Icon and Power Cat Code component Elevation components.
Wrapping Up
I hope this post has given you some ideas abouts what possible with the Power Cat Code component and PowerApps and, how this idea could be translated to other business areas. In my next post, I'm going to show the Continuums App for Administrators which utilizes the Power Drag and Drop Component from Scott Durrow