Mashy Teaches Low Code Vue Web Development with BANanoVuetifyAD3 Incwadi yamaBali (StoryBook)

[Mashiane]

Hi there

Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

Terms of Engagement

• Get the executable stuff for BVAD3 Incwadi yamaBali here. You need to copy the folder to your PHP enabled web server www folder. This project is still in alpha stage however it wont hurt to play along.
• All posts here will be about Incwadi yamaBali and how to use it, thus the separation of concerns.
• You will be helping yourself in studying and understanding the generated source code.
• In generating the UIs, the custom view schemas are being used underneath.
• The BVAD3 API has all the documentation you need to grasp the elements and what the properties do for the custom views.
• Everything related to the UI can be reproduced by using the property bags for the custom views.

1. Please DO NOT post questions on this thread, please let us not dillute the purpose of this thread.
2. Please DO NOT post comments on this thread.
3. To ask a question about the BVAD3 StoryBook, start a new question thread with a prefix [BANanoVuetifyAD3][StoryBook]

Introductory YT Video


Medium Article

Low Code Vue WebApps with BANanoVuetifyAD3

Whether you like it or not, one of the things you will find yourself doing as a Software Engineer, is having to write almost the same code…

mbanga-anele.medium.com

CEVEATS

• If your component type = Image - you need to set the Height / Width.
• If your component type = Avatar - dont set Height / Width - this creates unexpected behaviour.
• If your DataType = Integer / Double, do not set "Req(uired)" except for AutoComplete/Select/Combo, for such a key CANNOT be <= 0.

 

[Mashiane]

List of Lessons

Developing a Project Management WebApplication - Download Source

1. Your first LOW CODE BANanoVuetifyAD3 CRUD Project.
2. Color Selects - Project Types Creation
3. Colored Chips - Project Types Creation
4. Copying Models to Other Ones (Creating Project Status & Task Types)
5. Creating a Weekly Schedule
6. Adding Holidays
7. Adding Resources
8. Adding Images with VFileInput
9. Creating Projects
10. Adding Filters (Column Visibility)
11. Making Project Types & Project Status Color Coded Chips
12: Combobox with Chip Avatars for Resource Selection

 

[Mashiane]

1. Your first LOW CODE BANanoVuetifyAD3 CRUD Project.

By the end of this exercise you will have a working CRUD page, a MySQL backend with a single table.

YT Video



YT Video Transcript

Hi there, the first thing we will do is to create a MySQL database. Lets call it projectmanager. Then we open up the BVAD3 Story Book, and create a new project. We set the database name to be projectmanager, based on the MySQL database we created. We click save. Next, we create a model, which is a table to store our records. Lets call this project types. It will have 3 fields, ID, name and color. We set this as the starting page of our webapp. For now, lets leave the rest as is, and click save.

Lets open the model in grid view, so that we can update it quickly. We will add a color field, lets click the add button and type in the field name. We do not want to show the primary key, so lets uncheck these. We set the name and color as required fields. We also change the data-table elements for them. We then set the element locations on the form. These don't have any foreign table links, so we leave this section blank.

There are also no custom key values to use, so we also ignore this. For now, we are not computing any totals or colors, so we also leave this. We have refreshed our tree view, the model has all the fields we have defined. We can click on edit, just to have a preview of how the form will look like. Clicking the php button will generate the php class for the model, for now we wont use this. Lets click the convert to page button. This creates our view based on the model. Our view has been created, we are ready to build our app and run it.

We click the build app button. This generates all the low code that will enable us to run our first CRUD Web App. The process is complete, and in a few seconds, the B4J project will be opened, we just need to bring it to the fore front. All we have to do now is just run the project, this will compile it and open our browser. We click F5 to start the compilation. We will just fast forward the compilation for this video. The browser then shows our app. Lets perform some CRUD functions. We click Add to create new records. We type the project type, and color, and click Save and continue adding more records.

This time, we want to update an existing record, lets open the menu and click edit. To delete, lets open up delete for the record we need to delete and then delete it.

This then concludes our first low code crud web app.

 

[Mashiane]

Lesson 02 - Color Selects

By the end of this lesson, you will be able to have a v-data-table that looks like this. In our previous lesson we used a TextField to enter our colors. We change this in our app to be a ColorSelect for both the VForm and VueTable so that we can just select our colors with ease.

YT Video




YT Video Transcript

Hi there, in our previous lesson, we used a TextField for our color field. Here we demonstrate how we can use a Color Select for color selection. We edit our color field, and then we change the component type to color select, and then save the updated field properties. Let us preview the updated form again. The color has now been changed to a dropdown. This will work properly after the project is compiled. Lets also open the gridview and also make the table color to be a color select.

We select the column field, this activates a dropdown of options, and then we choose the color select. So for both the form and table, the color will be a color select element. The changes we made were on the data-model, we need to delete the view and recreate it. We convert the model to a page and after that recompile our project. The project has been compiled, we wait for it to be opened, then run it, so that we can see the new changes. The story book has opened our project directly, lets run it.

As you can see, the color elements are now using a color select and no longer a textfield. All we have to do is to select the color we want to change it to. We will address the issue of inline editing a little later, because when we refresh, the old colors are shown. However when we do edits via the form, the changed colors are persisted to the database. For now thats it, we have changed an element for both the form and table to a color select.

 

[Mashiane]

Lesson 03 - Making the Project Types show as Colored Chips

By the end of this lessson, you would have changed the project types to be coloured chips. This involves hiding the "color" from the table and changing the textfield "column" to chip.

YT Video

YT Video Transcript

Hi there, by the end of this lesson, you should be able to change the project type to show as a colored chip on the data-table. We open the data model grid, then on the column, we select the chip element for the name. To ensure that the color does not show on the table, lets uncheck the on-tbl column for the color. The next thing is to tell the new name chip, where to source the colors. This should be the color field. So on the colorfield for the name, lets type in color. This means anything on the name should source its color from the field named color.

So what we have done is, hide the color from the table, changed the name to be displayed as a chip and also indicated where the chips should source their color attribute. We then recreate the view from the data-model, open the b4j project and run it to see the new changes. At this moment in our code, we have not added any custom code but just using the Story Book to create our functionality. Lets run the b4j project and see the new changes.

We can now see from the table that the color field is not visible anymore, the project types are now color coded chips, depending on the color captured for each. Lets make some changes to see how this works. This concludes the project types section of our app. Please ensure you like the video and subscribe to our channel to get more content. Later.

 

[Mashiane]

Lesson 04: Copying Models To Other Ones

By the end of this lesson, your PM WebApp, should look like this... What we will do in this lesson is to copy the project_types to task_types and project_status models.
These two models will work the same way like project_types, so we duplicate them.

YT Video




YT Video Transcript

Hi there, for this lesson we demonstrate how to copy one model to another. This is useful where the data models will have the same functionality. On the project types model, we click copy. On the provided prompt, we enter the new name of the model to copy to. This is called project status, we then generate a view for it. We also create another model called task types. We will update the singularity of this model and then generate a view for it. We update Singular to task type and click Save.

We then generate the task types view. We are ready to compile the source code of our project manager webapp, lets do it. After the story book has opened the project, we run it. During this process, the b4x source code is transpiled to javascript by banano. We wait for this process to complete, and then we can use our webapp to add the project status and task types. You will note that the navigation drawer now includes the new views we have created. Clicking on them will navigate to the respective pages. One can then add the project status and task types records per needs.

For this we have just given a guide in terms of what those could be. This covers the 4th lesson of low code vue web development with the story book. Remember to like this video and subscribe to our channel. Thank you.

 

[Mashiane]

Tip: Just another color variant element

Instead of the 'Chip' option, you can also select a 'ColorTextField', this will render the name column like this.

 

[Mashiane]

Lesson 05 - Weekly Schedule

By the end of this lesson, you should be able to create this weekly schedule. This schedule is for indicating the working days per week, the number of working hours and also whether there is work to be carried on that day, i.e. active.

YT Video





YT Video Transcript

By this time, you should be familiar with the flow of things. Watch the video, follow along and reproduce for yourself or get the JSON file for this project from GITHUB, import it and generate the B4J source code.

 

[Mashiane]

Lesson 06 - Adding Holidays

We will need to work on resource costs and one of the important things about that is ensuring that holidays can be excluded from such calculations.

By the end of this lesson, you would have created a calendar entry to capture your holidays..

YT Video

 

[Mashiane]

Lesson 07: Adding Resources

By the end of this lesson, you should be able to add resources to your project. A resource has a few details that can help with costing the project, like hourly rate etc.

YT Video

 

[Mashiane]

Lesson 08: Adding Images with VFileInput

By the end of this lesson, you should be able to add images to both your form and v-data-table. A file input is used, when selected the file is uploaded to the ./assets folder and then its URL is used and saved as a v-model link to the v-img.

YT Video



YT Video Transcript

Hi there, in this lesson we add images to both the form and data-table. We already have a resource table on the data-base. We add a field name called image and another one calld image upload. For the image, we specify the default URL for the image, change the component and column types to Image. We have added a column named On DB for the models, which will indicate that a field is an actual field on the table.

The image upload field, whilst added to the model, will not be an actual field, thus On DB is unchecked. This will show a file input, which when a file is selected will display the file selected in the image field. In the next screen, we specify the dimensions of the image and also indicate that the image field for the image upload field is the image. This creates a link between the file input and the image. Also in our database, we add a new field named image. This will store the URL path for the image per resource.

Let us convert our model to be a view, and then build the application. We then run to compile the generated application. We then perform CRUD functionality on the resources, selecting a new image also, and because we specified the image field as image for the file input, it is automatically linked after uploads. As soon as the record is saved in the database, the data-table is also updated. It should be noted that we are not saving the actual data of the image to the database, but a URL link to the uploaded file. This ensures that our database is not bloated as it refers to files for images.

Thats all for now, please like this video and also subscribe to get awesome content about BVAD3. Thank you so much for your co-operation.

 

[Mashiane]

Lesson 09: Creating Projects

By the end of this lesson, you should be able to create a screen and a table to capture content for projects. We earlier created project types and project status, in this section we start with establishing a relationship between the projects table and the other two. We will update the SQL query a little later to show the "names" of the project types and project status.

We will also explore how to add computed content to our code, for example, calculating planned duration based on planned start and planned finish. We will also add "column visibility filters" as there is more content for this table.

Form Input

The input screen for this table has been made into Full Screen.

YT Video




Things To Note

To create relationships between models in the StoryBook, on the table view of the models, you select this button.

Then using inline-editing you choose the ForTbl (Foreign Table), ForKey (Foreign Field) and ForVal (Display Field)

Both the project_type and project_status are v-autocomplete fields.

So, to load content to these v-autocomplete, the list of records from the project_types and project_status table will be used. The fields id, name, and color will be used.
As per vuetify documentation.

When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.

So the ItemValue (Key) and ItemText (Value) (think of these as key-value pairs) will be used as id and name. Remember, we defined the id as an integer value, so it will expect an integer data type. For example, the Loading code is like this..

Sub LoadProjectType()    'IgnoreDeadCode
    'declare class for manipulating data from database
    Dim rsproject_types As BANanoMySQLE
    rsproject_types.Initialize("projectmanager", "project_types", "", "")
    'set the data model to be used
    vuetify.SetDataModelMySQL(rsproject_types)
    'set the master back-end
    vuetify.SetBackEndMySQLE(rsproject_types)
    'build query to select the records
    'Define query and then execute it
    Dim Qry As String = "SELECT id,name,color FROM project_types ORDER BY name"
    rsproject_types.Result = BANano.Await(rsproject_types.ExecuteWait(Qry))
    'assign result to the element
    acproject_type.SetItems(page, rsproject_types.Result)
End Sub

This returns an array of objects with 3 fields..

Because we have specified that the item-value = id and item-text = name, the autocomplete will use those to assign value of 1 to New Website and show the appropriate content on the dropdown, thus the 1 currently showing on the v-data-table.

 

[Mashiane]

Lesson 10: Adding Filters (Column Visibility)

A column filter enables one to show and hide the columns they need in the data-table at runtime. This is enabled with the Filter Columns. When one selects a column from the chips, its either shown / hidden in the data-table.

For the projects, there are some columns that have been flagged as "visible", these are all except, Planned Resource Costs, Planned Other Costs, Planned Total Costs, Actual Resource Costs, Actual Other Costs and Actual Total Costs.

By default, on the VueTable, the "All Columns Visible" is on, meaning that all columns should be visible, however to show / hide specific columns, one needs to uncheck the "All Columns Visible" property and then enter the field names to be visible in the Visible Column Fields.

So how can this be done with Incwadi yamaBali?

On the projects model, click "Edit" to activate the Model.

On the right drawer, ensure that, these options are set.

We do not want all the columns visible, column visibility will be controlled by checking on the chips. Has Filter ensures that the chip filters to control visibility is available. This can be visible/hidden and is also controlled by code, for example, when you want to control access for some users to be able to filter the columns / not.

The clear filter button will enable us to reset the filters to only show the master visible columns in the data-base.

Specifying fields that should be on the table and visible.

The next step is for this model to specify which fields should be on the table and which ones should be visible.

In the above image, we are indicating that the fields should be on the table and they should be visible. There are some fields that we want to be on the data-table, but we need them to be hidden.

So, whilst these columns, Planned Resource Costs, Planned Other Costs, Planned Total Costs, Actual Resource Costs, Actual Other Costs and Actual Total Costs, will be on the table, they will not show, creating the filters we have specified.

 

[Mashiane]

Lesson 11: Making Project Types & Project Status Color Coded Chips

We previously determined that the project type an project status are derived from a foreign table. These have the id, name and color. As these are AutoCompletes, we can make them color coded chips as AutoCompletes can have chips.

To do that, we select "Other Fields",

And then for those two fields, check the Chips and ColoredChips attributes.

The end result is that on the form, these two fields will now have colored chips.

The colors used being those ones specified in the project types and project status colors.

Enjoy!

 

[Mashiane]

The State of our Project Management WebApp




Understanding the basics

On the vprojects screen, we have defined some types to hold the project types and project statuses. These are generated by Incwadi yamaBali, you can also do this off course without it.

Type mdlproject_types (id As String,name As String,color As String)
Type mdlproject_status (id As String,name As String,color As String)

We have decided not to use table joins for this as the project typs and project status will be used for "computed fields"

When the page is mounted, a new project is added, a project is edited, a fetch of the project types & project statuses takes place. For example.

Sub mounted        'ignoreDeadCode
    'we want the records to load on mount
    vuetify.Loading(True)
    'load related data from other tables
    BANano.Await(LoadProjectType)
    BANano.Await(LoadProjectStatus)
    BANano.Await(LoadAssignedTo)
    dsprojects.SELECT_ALL
End Sub

This ensures that the combo boxes for the project type and project status have the latest records loaded.

Looking at the LoadProjectType code for example.. we are not using the BANanoDataSource for this...

Sub LoadProjectType()    'IgnoreDeadCode
    'declare class for manipulating data from database
    Dim rsproject_types As BANanoMySQLE
    rsproject_types.Initialize("projectmanager", "project_types", "", "")
    'set the data model to be used
    vuetify.SetDataModelMySQL(rsproject_types)
    'set the master back-end
    vuetify.SetBackEndMySQLE(rsproject_types)
    'build query to select the records
    'Define query and then execute it
    Dim Qry As String = "SELECT id,name,color FROM project_types ORDER BY name"
    rsproject_types.Result = BANano.Await(rsproject_types.ExecuteWait(Qry))
    'assign result to the element
    acproject_type.SetItems(page, rsproject_types.Result)
    'create reference table
    mproject_types.Initialize
    Do While rsproject_types.NextRow
        Dim sid As String = rsproject_types.GetString("id")
        Dim sname As String = rsproject_types.GetString("name")
        Dim scolor As String = rsproject_types.GetString("color")
        Dim foreignType As mdlproject_types
        foreignType.Initialize
        foreignType.id = sid
        foreignType.name = sname
        foreignType.color = scolor
        mproject_types.put(sid, foreignType)
    Loop
End Sub

We select the id, name and color for the project types, we then store these in a map for each project_type as a list of types. The contents of this map is then used by the data-table to color-code the chips on the data-table for project types.

This uses "computed values" and "computed colors"

'code to get the color for project_type
private Sub getproject_typecolor(item As Map) As String
    'get the field name
    Dim sproject_type As String = item.get("project_type")
    'get the model
    Dim foreignType As mdlproject_types = mproject_types.get(sproject_type)
    'get the color
    Dim scolor As String = foreignType.color
    Return scolor
End Sub
'*****
'code to get the value for project_type
private Sub getproject_typevalue(item As Map) As String
    'get the field name
    Dim sproject_type As String = item.get("project_type")
    'get the model
    Dim foreignType As mdlproject_types = mproject_types.get(sproject_type)
    'get the value
    Dim sname As String = foreignType.name
    Return sname
End Sub

This link is done when we create the vfield on the vform for the project_type.

macproject_type.put("ValueMethod", "getproject_typevalue()")
macproject_type.put("ColorMethod", "getproject_typecolor")

If we were using the abstract layer, we would specify these DT Compute Value (getproject_typevalue()) and DT Compute Color (getproject_typecolor)

 

[Mashiane]

Lesson 12: Combobox with Chip Avatars for Resource Selection

In this lesson, we see how we can configure that our form and data-table enable us to use a combobox with chip avatars to select our resources.

YT Video




VT Video Transcript.

Hi there, in this tutorial we look at how we can customize the Assigned To table column. In the model view, ensure that the data type for assigned to is integer. Both the component type and column type should be person list. We want the column span to be 4 from tablet devices and up. To populate the assigne to dropdown, we use content from the resources table. This will return the ID, name and the image url for a resource.

This also feeds into the item text and item value for the dropdown. For the image we will use a chip avatar. As the content of the chip avatar to display is sourced from a foreign table, we will compute both the image to display and the resource name. We then convert our model to a view. After this is complete, we then compile the project to generate the source code.

After source code generation, we then open the b4j project and run it, to view our project management web app. Our assigned to column is now displaying chip avatars, with the name of the resource. We can click on the resource and also be able to assign another owner to the project. Also in our edit dialog, we are able to choose resources from a dropdown using chip avatars.

Thank you, remember to like the video and subscribe to our channel for more content.