Best approach to have content editable via Plenti CMS (many individual components vs one component)

[jamestagal]

Hi @jimafisk

Thanks for the offer.

I am setting up a timeline component with cards. It's called a fixture in football lingo in Australia. But bacially it lists the matches for each round of the football season with information such as who is playing, where and the times etc... See my working example here.

so I would like to figure out how best to have each card editable via the CMS and my first approach was to have it contained in one page component. But because there are at least 25 cards to edit in total I thought the editing experience for so much content would be horrendous in the CMS (many sections with no clear delineation between each card, long scroll to edit all cards). So my next thought was to break up the component into 25 separate components, one for each card. So that when you edit the fixture page let's say, you neatly get 25 separate components to open up and edit. This would be a nicer experience for the editor I think but not sure if this would be a good approach.

Initially, I started setting up a content type to have each card in a separate json file but then I remembered that when you do that you are essentially wanting to have each content page have an end point (url) but in this case I don't think I would want or need end points for each of these card. Therefore, I wasn't sure of the best approach.

Pls help me think through the best way to approach this one.

Best regards, Ben

[jimafisk]

So my next thought was to break up the component into 25 separate components, one for each card. So that when you edit the fixture page let's say, you neatly get 25 separate components to open up and edit

I agree with this approach. If each card is a "content component" it would appear as a collapsible widget in the editor sidebar, which would make it more manageable if there are lots of cards.

Initially, I started setting up a content type to have each card in a separate json file but then I remembered that when you do that you are essentially wanting to have each content page have an end point (url) but in this case I don't think I would want or need end points for each of these card.

Yeah I agree here too, you probably don't need separate JSON files / endpoints for each of these. I pushed some changes that turn these into content components.

Also, I assume since this is named "2024" you will need more "fixtures" in the future? I converted this into a separate content type to demonstrate what that would look like: https://jamestagal.github.io/capital-tigers/fixture/2024/

I didn't see the CMS included in the project, so I added that as well.

[jamestagal]

Hi Jim, Wow that's awesome. Thank you. 🙏 Thanks for demonstrating that approach. I didn't think or haven't thought of this approach , a "content component" to hold an array of cards. This is really neat. 😄 and shows how flexible you have made Plenti. Yes this approach is also good for adding another fixture for another year! 😸 and that is how it would need to work. Appreciate you showing me this one. Thank you so much Jim.

Ben

[jamestagal]

Hi @jimafisk

I just saw this cool time picker widget .

Did you implement it? So does the widget get added when you define a time field in the .json file?

[jimafisk]

That's part of the discoverable CMS! If you use a value in your JSON that the CMS recognizes as "time" it will give you the widget. If you didn't want this widget and prefer a plaintext field, you could override it with a _schema.json file. Similarly if you changed your "date" field format from Saturday - March 9 to a format the CMS recognizes (e.g. 3/9/24 among others), you'd automatically get a date picker too. Then in your svelte template you could use a JS Date object and format it back to look like it does now.

[jamestagal]

Awesome @jimafisk

Yes the _schema.json is a great addition to Plenti because you can define overrides for widgets = heaps of flexibility here. Also, I seem to remember you have mentioned the date widget to me before but I didn't really understand how to format the template using the JS Date object but maybe now I can explore it more and see if I can implement it 😆

Thanks again.

[jimafisk]

Awesome! Let me know how it goes!

[jimafisk]

I just added some info to the docs that hopefully reinforces this concept: https://plenti.co/docs/cms-discoverability

[jamestagal]

Awesome @jimafisk that really helps.

And I will post in the discussion forum about both of these learnings for others (content component & date/time widget) after I figure out how to modify the date object in the template. 😸

Thanks again.

[jamestagal]

Hi @jimafisk

I am working on the date object to see if I can display it as March 9 leaving off the year but using the date picker widget in Plenit and wanted to run the following code by you. Would this work for modifying the date in the template? And I sill not sure how I would target it in the html

 function formatDate(date){
  const Date = new Date();
  const Months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  return `${Months[date.getMonth]}, ${Date[date.getDate()]}`;
 }

See commit here

[jamestagal]

Hi @jimafisk

I've been doing some more thinking on this date property and maybe the following might be a better approach?

const convertDate = (dateStr) => {
  let newDate = new Date(dateStr);

  let myDate = newDate.toLocaleDateString('en-EN', { day: 'numeric,', month: 'long'
  })
  return myDate;
 }

So the result date should convert to = January, 9

Then in the template could I do this?

So make the card.date field equal to the convertDate function from above.

 <span class="match-list__group-round">{card.title}</span>{card.date = {convertDate}}

I tried it but it didn't change 😆

Pls let me know how I can connect the function to the date field in the template.

Regards, Ben