I want to have a section of Team Members. I pulled this off the TailwindUI site. “Grid with round images” Team Sections - Official Tailwind CSS UI Components
I’m already sending from FM to BF a JSON Object in the form of…(I have yet to set my team members records)
JSONSetElement ( $$BF_MODEL
; ["event.bandName" ; Event_Band::bandName ; JSONString ]
; ["event.BookingStatus" ; Event::BookingStatus ; JSONString ]
; ["event.BandAttire" ; Event::BandAttire ; JSONString ]
...
)
What’s going to come from FM to BF is the/a list of records from my Event_EventAssignment table. My tables are related by Event::id = EventAssignment::idf_event
I wanna show the team (and their roles) for the Event.
My current html
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="bg-white">
<div class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24">
<div class="space-y-8 sm:space-y-12">
<div class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">The People</h2>
<p class="text-xl text-gray-500">Here is the current roster for this event.</p>
</div>
<ul role="list" class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:max-w-5xl lg:gap-x-8 lg:gap-y-12 xl:grid-cols-6">
<li>
<div class="space-y-4">
<img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24" v-bind:src="model.person.image + '&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'" alt="">
<div class="space-y-2">
<div class="text-xs font-medium lg:text-sm">
<h3>{{model.person.nameFirst}} {{model.person.nameLast}}</h3>
<p class="text-indigo-600">{{model.person.role}}</p>
<p class="text-indigo-600">{{model.person.status}}</p>
</div>
</div>
</div>
</li>
<!-- More people... <li> to </li> -->
</ul>
</div>
</div>
</div>
I’m guessing I need to bring the list of people in from FM in my $$BF_Model and then parse that out into the <li> above?
Here’s where I’m at with this
dev data model snippet
"hires": {
"employee.nameFirst": "John",
"employee.nameLast": "Doe",
"employee.headShotURL": "https://i.ibb.co/Lkd7QjR/chrisbleth.png"
HTML List:
<li v-for="employee in model.hires" :key="hires.employee.nameFirst">
<div class="space-y-4">
<img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24"
v-bind:src="model.hires.employee.headShotURL + '&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'"
alt="">
<div class="space-y-2">
<div class="text-xs font-medium lg:text-sm">
<h3>{{model.hires.employee.nameFirst}} {{model.hires.employee.nameLast}}</h3>
<p class="text-indigo-600">{{model.hires.employee.EmployeeRole}}</p>
<p class="text-indigo-600">{{model.hires.employee.statusDisplay_c}}</p>
</div>
</div>
</div>
</li>
in the HTML editor, it says “error: model not loaded”. I have Development Data turned on.
Andrew
March 28, 2022, 5:14pm
3
model.hires is an object, and I believe v-for is expecting an array.
delfs
March 28, 2022, 5:18pm
4
For reference v-for can accept Array, Object or string
The value of each key is returned for an Object and each letter for a string
delfs
March 28, 2022, 5:19pm
5
The issue above is that there are dots in the key names vs a nested object
Andrew
March 28, 2022, 5:21pm
6
Ah right, it should be structured closer to:
"hires": [
{
"nameFirst": "John",
"nameLast": "Doe"
},{
"nameFirst": "Bob",
"nameLast": "Smith"
}
]
Can refer back to a previous thread on v-for loops.
Like this?
<li v-for="employee in model.hires" :key="model.hires.email">
<div class="space-y-4">
<img class="mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24"
v-bind:src="model.hires.headShotURL + '&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80'" alt="">
<div class="space-y-2">
<div class="text-xs font-medium lg:text-sm">
<h3>{{model.hires.nameFirst}} {{model.hires.nameLast}}</h3>
<p class="text-indigo-600">{{model.hires.EmployeeRole}}</p>
<p class="text-indigo-600">{{model.hires.statusDisplay_c}}</p>
</div>
</div>
</div>
</li>
Dev Data Model:
{
"hires": [{
"nameFirst": "John",
"nameLast": "Doe",
"email": "john@doe.com",
"statusDisplay_c": "Confirmed",
"EmployeeRole": "Drums",
"headShotURL": "https://i.ibb.co/Lkd7QjR/chrisbleth.png"
}]
}
Default Data Model:
{
"band": {},
"client": {},
"event": {},
"person": {},
"tech": {},
"venue": {},
"hires": []
}
For some reason, in the HTML editor, it’s not picking up my development data.
Andrew
March 28, 2022, 7:10pm
8
In a v-for loop, you don’t have to reference the model for the object, you can use the variable you created in the v-for declaration employee. So something similar to:
`<h3>{{employee.nameFirst}} {{employee.nameLast}}</h3>`
I’m having trouble sending JSON to BF.
I’m trying to get all the related records from a table.
Events::id = EventAssigment::idf_event
EventAssignment::idf_roster = Roster::id
When I go to my Events table and find my single event, I can see, in the Data Viewer, all the related people using a field called namesAsJSONArray. That is a Summary field (list of namesAsJSON).
That returns the people associated with this event:namesAsJSONArray =
{"nameFirstLast_c":"Dallas Kruse"}
{"nameFirstLast_c":"Nic Rodriguez"}
I need my JSON Array formatted as:
"hires": [
{
"nameFirst": "John",
"nameLast": "Doe"
},{
"nameFirst": "Bob",
"nameLast": "Smith"
},{
.....more people here
}
]
I’m setting my $$$BF_Model via
Set Variable [ $$BF_Model ; Value: JSONSetElement ( $$BF_MODEL
; [ "hires" ; Event_EventAssignment__Roster::namesAsJSONArray ; JSONArray ]
)
)
When I run that script … the array is empty and I can’t figure out why. It shows:
{
{
"hires" : []
}
}
FWIW. I FINALLY figured something out that worked.
JSONSetElement ( ""
; [ "hires" ; JSON.ArrayFromRelated ( Event_EventAssignment::asJSON ) ; "" ]
)