B4J Tutorial [Web][SithasoDaisy] Mastering the Team Grid Component

Hi Fam

Let's look at the Team Grid component that's coming to SithasoDaisy 2.24+

A team grid can be used as an alternative to the table listing or a complement to the table listing.

Just like the table, the team grid has functionality to do the following"

0. Search - one can type in a search string to activate a search of profiles and then list profiles meeting that criteria. The search starts from 3 characters onwards.
1. New - add new team member (you need to design the modal/page for such functionality)
2. Pagination - you call SetItemsPaginate to paginate the grid listing of your team. This example shows 5 team members per page
3. Delete All - you can click delete all to delete all your team members as a click event has been added to this
4. Upload - an upload file functionality has been added, one can import data from excel, csv file etc.
5. Refresh - refresh the list of available profiles.
6. Back - navigate to another screen.
7. Alpha Chooser - the alpha chooser allows one to filter the profiles based on the "fullname" of a profile. For example, if we click D, only profiles starting with D will be listed.

For each profile we have the following:

1. Edit - click to edit the active profile, an event is linked to this (will have to design the modal to show)
2. Clone - click to clone the active profile
3. Delete - click to delete the active profile.

One can also refer to an image, fullname, title and bio and then various platforms one can add. One can also add additional platforms beyong the listed. If there is no platform, its icon will not show on the profile in question.

A fully functional example will be available on the Demo WebApp. Let's look at how this works in real life. We toggle our clients between a grid view & a table.

Enjoy!

 

[Mashiane]

The team component is a single component that you add to your page, either via the abstract designer / code

Then you update some settings to it. For example, here we have defined the "key" fields where to source each item in our array/list of profiles.

Then we can generate members i.e the events we want to trap.

Mounting profiles to our Team Grid.

We have a list of profiles, either from a database or faker app.

Sub Mounted
    app.PagePause
    myteam.Clear
    Dim profilesJSON As String = $"[{"fullname":"Roberta Conn","bio":"foodie, model","title":"Regional Creative Consultant","telephone":"(301) 622-2568","image":"https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/531.jpg","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"5025053743775744","whatsapp":"5025053743775744","telegram":"5025053743775744"},{"fullname":"Kerry Cruickshank","bio":"sailor supporter","title":"National Infrastructure Associate","telephone":"1-358-265-3139","image":"https://avatars.githubusercontent.com/u/59628706","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"6234673120280576"},{"fullname":"Donald McKenzie","bio":"insert devotee","title":"Investor Quality Associate","telephone":"433.844.2944 x01918","image":"https://avatars.githubusercontent.com/u/25983345","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"6124227929309184"},{"fullname":"Irvin Robel","bio":"spokeswoman advocate, engineer","title":"Forward Factors Planner","telephone":"1-433-438-6785 x2474","image":"https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/978.jpg","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"767304543502336"},{"fullname":"Henrietta Strosin","bio":"patriot, dreamer, grad","title":"Global Accounts Producer","telephone":"490-353-4428 x53212","image":"https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/334.jpg","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"3189885152264192"},{"fullname":"Dan Hilll IV","bio":"filmmaker, person, artist","title":"Senior Optimization Architect","telephone":"267-634-8639 x397","image":"https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/713.jpg","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"584719255207936"},{"fullname":"Jane Terry","bio":"developer, film lover","title":"Direct Mobility Agent","telephone":"592.429.8696","image":"https://avatars.githubusercontent.com/u/60035849","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"8223428471422976"},{"fullname":"Francisco Smitham","bio":"experimentation supporter","title":"Central Response Assistant","telephone":"572-880-6636 x499","image":"https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/99.jpg","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"339260215394304"},{"fullname":"Mamie Parker","bio":"musician, creator","title":"Global Solutions Assistant","telephone":"1-802-922-2316","image":"https://avatars.githubusercontent.com/u/36526729","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"4678595018489856"},{"fullname":"Mrs. Joanna Macejkovic","bio":"unique supporter","title":"Central Division Architect","telephone":"1-932-561-7730 x11801","image":"https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/13.jpg","email":"[email protected]","github":"[email protected]","linkedin":"[email protected]","facebook":"[email protected]","instagram":"[email protected]","twitter":"[email protected]","id":"6703357190209536"}]"$
   
    Dim profiles As List = banano.FromJson(profilesJSON)
    myteam.SetItemsPaginate(profiles)
    myteam.SetAlphaChooser(True, "8", "fullname")
    app.pageresume
End Sub

Each profile has some fields where we will read content from and then link it to each of the profile cards.

The links in each profile are clickable.

Private Sub myteam_Email (e As BANanoEvent, Profile As Map)
    e.PreventDefault
    Log($"email"$)
    Log(Profile)
    app.ShowToastSuccess("Click", "Email")
End Sub

Private Sub myteam_Facebook (e As BANanoEvent, Profile As Map)
    e.PreventDefault
    Log($"facebook"$)
    Log(Profile)
    app.ShowToastSuccess("Click", "Facebook")
End Sub

 

[Mashiane]

Adding other platforms

In the profile examples above, we do not have wechat or apple, for example, how can we add them?

1. First Add the platform you need.

'add other platforms
    myteam.AddPlatForm("wechat", "wechat", "fa-brands fa-weixin")
    myteam.AddPlatForm("apple", "apple", "fa-brands fa-apple")

This will add 2 events, _wechat and _apple, so we need to define them. The second parameter is the name of the field/key in our array of profiles.

Private Sub myteam_wechat (e As BANanoEvent, Profile As Map)
    e.PreventDefault
    Log($"wechat"$)
    Log(Profile)
    app.ShowToastSuccess("Click", "WeChat")
End Sub

Private Sub myteam_apple (e As BANanoEvent, Profile As Map)
    e.PreventDefault
    Log($"apple"$)
    Log(Profile)
    app.ShowToastSuccess("Click", "Apple")
End Sub

2. Now in each profile, lets ensure we have a wechat and an apple fields, if the profile does not have such fields, these will not be shown.

"id":"6234673120280576", "apple":"this is apple", "wechat":"wechatx"},

You will then see that for the profiles that have such fields, their links will be added.