A unique app to create and manage family trees – Part 2

Introduction

I encountered a very interesting use case for a pre-sales demo for a tribal organization. The requirement - to provide users with the ability to view, create, and maintain a family's history for up to 5 generations in an easy visual manner.

Data Model

The data model was super simple. I created the data model with the following steps:

1. Created a table called Family Member in Dataverse
2. Added a lookup column to the same table and called it Father
3. Added another lookup column to the same table and called it Mother
4. Added another column to upload a picture (optional)

Solution approach 3 - Generative Pages

Not too long ago, Microsoft announced Generative Pages and they seemed super interesting to me. I thought I will give them a shot with this use case. I used a bunch of prompts to make the page work exactly the way I wanted.

Prompts

First set

1. I want to display data from the Family Members table as a family tree for the selected person (which I want to select from a dropdown) and the tree should load once a person is selected <<hbh_familymember>>
2. I want to fit all levels within the screen. The user's image is cropped off
3. Can you stretch it to fit in the available space on the screen?
4. I want to fit all levels within the screen. The user's image is cropped off
5. Can you make the connecting lines longer so that the family tree is wide enough to fit the
6. Can you move the names below the photos?
7. Can you add some space between the photos and name?
8. Can you reduce this gap?

Second set

1. Can you replace the dropdown of family members with a gallery of family members? I want to show the full name and the photo of members. Users should be able to search by full name. Once a user selects a person, the gallery should get hidden and the family tree should become visible.
2. I want to show a default person icon when a family member doesn't have a picture
3. On the family tree, I want to be able to click on a person, to open a pop-up, showing the selected member's name and image. I also want the ability to edit the name and change the picture
4. When viewing a family tree, irrespective of the levels available, I want the sizing of the family tree to be the same as when there are 4 levels
5. When I select a user that has 4 or 5 levels of family tree data, the page crops off the family tree. Can we please make sure it doesn't get cropped off?

Third set

1. For any selected member, I want to show 3 levels of family tree. If members don't exist for any level, clicking on that member should let me create a member in the pop-up that opens when clicking on an existing member
2. When I select a user that has 4 or 5 levels of family tree data, the page crops off the family tree. Can we please make sure it doesn't get cropped off?
3. For any selected member, I want to show 4 levels of family tree. If members don't exist for any level, clicking on that member should let me create a member in the pop-up that opens when clicking on an existing member
4. The page stretches the individual cards in the list of family members when the screen gets bigger. Can the size of the cards remain fixed?

Final set

1. The page is making the cards elongated when I go full screen. Can they not do that?
2. The height of the individual family member card in the gallery changes when the screen size changes. Can the height of the cards remain the same?
3. See how the cards are taller than what they need to be?
4. Can you align the gallery to the left, in line with the search text box?
5. Can you sort the gallery alphabetically?

Demo

Here is a quick demo:

As you can see, it created a really looking nice page within minutes. I will talk about whether I would use this in a production app or not in another post, but for a proof of concept for a presales demo, this was amazingly quick!

To learn how to create a generative page, click here.

Recent articles

1. A unique app to create and manage family trees – Part 1
2. Changing the attachment on a note in canvas apps
3. Adding a title and description when uploading an attachment in canvas apps