Blazor Bug Tracker With Scafolding
In Visual Studio, there is a feature under Add –
New – Item called "Add Scaffolding Item". After viewing a couple of YouTube videos on
how to use it, it got me thinking, is this a realistic
feature, or is it just a nice demoable feature?
I decided to try it and see for myself how much value this feature can add for me when creating new applications that need CRUD actions.
The Test Application
To validate the scaffolding, I will be building a basic defect-tracking application using the scaffolding feature. We will have only three issue types and will be using Entity Framework with an SQLite database. I will be focusing on the scaffolding, not the features of the application. Granted it will be a scaled-down system, but there is CRUD used.
These are the issue types I will be creating:
2. Defect – Like a bug but it was reported from a customer.
3. User Story – As defined in a scrum process.
Since I am focused on the CRUD aspect of the application,
there will not be any reporting or dashboards for this post.
Base Issue
I will be creating a base class that all the other Issue
Types will inherit from. We will call it Base Issue:
Also, you should not inherit a Defect from a Bug. That will cause you extra work when you need to identify if the entity you are working with is a Bug or Defect.
Bug
For the bug, we just need to add two properties:
2. StepsToProduce
Defect
For the defect, we need to add three properties:
2. Environment
3. FoundInVersion
User Story
For the user story, we need to add five new properties:
2. AsA
3. IWant
4. SoThat
5. AcceptanceCriteria
These are the four models we will be using in the
application. Now that we have our models, we are ready to do the scaffolding.
Scaffold The Bug Model
These are the steps to follow to do the actual scaffolding:
1.
Under Components, right-click on Pages and
select “New Scaffolded Item.”
2.
On the left side of the dialog that is shown,
select “Razor Component” under “MVC.”
You now have the pages created and the system configured to
use those pages. But we still need to create the database.
Create the Database
You only need to do this step if you are using entity framework, and you do not have a database already. I am including it because I learned this is a cool shortcut to do your migrations and update your database.
Create your migration.
1.
Double-click on Connection Services in the
Solution Explorer
2.
Find your Service and click on the “…”
3. Select “Add Migration”
4.
A dialog will pop up. Let it find the DbContext
Class name for you.
5. Click Finish
Update the Database
We have our migration that contains the models we added. Now
we need to apply the migration to the database.
1.
Click on the “…” for the Service you are using, in my case it was SQLite.
2.
Select “Update Database”
3.
Once the Dialog is displayed, let it find the DbContext
Class name for you, and click “Finish.”
Now you have an updated database that is ready to be used.
Add the new List Page to the Navigation
If we want to see your data in the application, we need to
be able to navigate to it. I like to just add the list view to the left-hand
side navigation sidebar. Just cut and paste one of the existing nav items and
add your list page:
<Nalin class="nav-link" href="defects">
<span class="bi bi-list-nested-nav-menu" span> Defects
</div>
Now we can run and check out our new pages!
How do the Pages Look
List Page
2. I am not a fan of having the Edit | Details | Delete buttons there, but again that is something that we can easily style or move.
3. We will need to change the order of the fields.
4. We will need to Change the Names of the columns, again not a big deal.
5. We are displaying columns, like Modified Date and Created Date that we should not.
6. Using QuickGrid is a nice touch.
7. Overall, not bad.
Add Page
2. One important thing on this page is that all the controls are just test boxes. We could use a drop-down for several of the properties like status and assigned to. Description and Steps to Reproduce could be Text Areas as well.
3. I did try to use Enums for priority and status, but it caused the build to fail after the scaffolding was created because the properties did not match the Enum types. You would have to manually address this.
4. It should be noted that the scaffolding does use the right control for numbers and dates.
5. I do like the “Back to list” as well.
Edit / Details
These are on the same page, but the details are ready only. Both
pages suffer from the same styling issue as the rest of the pages. The details
page does have a button that will allow you to go into Edit mode.
Delete Page
I usually use a modal for the delete confirmation, but it is
nice to see all the information on a page, it is a nice touch. Just like the
other pages, this page needs styling too.
UI Validation
Required
Allow Values Validation
Thoughts
I started out thinking that scaffolding was a nice demoable feature but as I used it and started looking at what it generated, I started liking it. If I had an application with a lot of CRUD like an Admin app for a system, I would definitely use the scaffolding feature. If I had a UI design guide for form input, I would use scaffolding as well. Using the data annotations to help the user input better data on the forms, is a big plus as well.
If you make schema changes to your entities, you will have to manually update the affected pages. If you have not updated the generated pages, you can simply delete the old pages and regenerate them.
Summary
I now view the auto scaffolding feature like I do AI code
assist. It is a nice tool, use it where appropriate but do not just use it and
put it in production.
My original plan was to take my Defect application and document
how long it would take to style it and include that in this post. But this post
is longer than I expected, so I will save the “make it pretty” post for another
time.
It was re-enforced to me doing this project that you need to plan out your entities including names, types, and values before you generate the UI. this holds true for a manual UI of the scaffolded UI.
Comments
Post a Comment