entity reference causing fields to disappear in UI

[jamestagal]

Hi @jimafisk , I am just separating this one to it own issue.

Just a note on the entity reference field. When adding it in the way I did above, trainer.name fields, I noticed when I click the edit button those two field including the image temporarily disappear in the UI but come back once I exit the editor and reload the page. See screencast illustrating he behaviour below.

https://user-images.githubusercontent.com/6309595/211965045-b2f54e9c-7303-4654-a688-2a44f720db2c.mov

Originally posted by @jamestagal in https://github.com/jamestagal/plenti-educenter/issues/13#issuecomment-1379748696

[jamestagal]

Hi @jimafisk This works in reverse now. 😆 I mean now the trainer and nested fields (image/text) only appears when I click edit..and disappear when I refresh the page. See screencast.

https://user-images.githubusercontent.com/6309595/212793209-05d3356f-7008-4424-a295-198cb23de7e9.mov

[jimafisk]

I haven't taken a look, but make sure the JSON content source for each course page is putting the trainer name in an array now. I made the update for the defaults adding new content, but didn't make the update for the existing pages.

[jamestagal]

ok. Should the array wrap the nested fields such as:

    "trainer": [
        {
        "type": "teacher",
        "name": "Clark Malik",
        "image": {
            "source": "media/teacher-1.jpeg",
            "altText": "Profile picture of Clark Malik",
            "url": "."
            }
        }
    ],

[jimafisk]

Think you just need to make sure "name": "Clark Malik", => "name": "[Clark Malik]",

[jamestagal]

Hi @jimafisk Thanks for this. That worked! 😄

Question on another reference. I want to be able to search on the course.category when creating a course. So within these courses I enclosed the course.category in an array in the JSON content sources as above and added the following to the _schena.json file.

    "course.category": {
      "type": "autocomplete",
      "options": [
        {
          "type": "courses",
          "search": [
            "course.category"
          ],
          "result": "fields.course.category"
        }
      ]  
    },

I think I have the sytax correct above but I am not getting any categories returned in the UI. Will I need to handle the array in the html somehow?

Ben

[jimafisk]

Yeah exactly, in your template you'll need to pull just the first item out of the array like course.category[0]. Once we add support for single item reference (vs multiple references) you won't have to do that anymore.

[jamestagal]

hi @jimafisk thanks. I just realised that I am setting a category in the JSON but not using it in this template. It is used in the other page templates.. How could I approach this one....Could I just add it to the page somewhere? Could there be another approach?

[jamestagal]

hi @jimafisk

Ok well I just added the course.category under the course title as follows but I still don't get any results:

      <div class="col-xl-3 order-1 col-sm-6 mb-4 mb-xl-0">
        <h2>{course.title}</h2>
        <h6 class="text-color">{course.category[0]}</h6>
      </div>

[jamestagal]

Hi @jimafisk I have upgraded Plenti to the latest release v0.6.3 and changed the field type to referemces in _schema.json file for the courses content type and that change worked 😄 when referencing the teachers but it didn't work 😞 for course.category. See _schema.json file and code snippet below:

    "course.category": {
      "type": "references",
      "options": [
        {
          "type": "courses",
          "search": [
            "course.category"
          ],
          "result": "fields.course.category"
        }
      ]  
    },

Pls let me know if there is something I have missed here.

Also I removed the [0] from within the template as per this update to multiple references. Regards, Ben

[jamestagal]

Hi @jimafisk I'm looking at the entity references I had added to the _schema.json for the courses content type and it looks different in the CMS editor and It doesn't seem to allow for searching... I remember that I was able to search on the teachers in a field and as I typed other teachers names would appear in the field but not anymore. I wonder since it was updated I might need to change the syntax.

Here is the code as I have it presently:

    "trainer.name": {
      "type": "references",
      "options": [
        {
          "type": "teachers",
          "search": [
            "title"
          ],
          "result": "fields.title"
        }
      ]  
    },
    "course.category": {
      "type": "references",
      "options": [
        {
          "type": "courses",
          "search": [
            "course.category"
          ],
          "result": "fields.course.category"
        }
      ]  
    },

Does that look correct? Ben

[jimafisk]

That looks correct! Are you able to apply any schema to the component? One thing to note, is that the keys in _defaults.json for the component must match exactly the component that's placed on the page (same order too). So if one of these fields have changed in the content source, just make sense it's changed in the component as well.

[jamestagal]

Thanks @jimafisk . I will investigate it this evening...I am sure I don't have the _defaults.json matching the component because I have made changes recently. 😄

[jamestagal]

Hi @jimafisk

I have updated my _defaults.son file to match the data source for the courses json files. Here's what I have found.

1. When in the CMS and I searched on a teacher in a course I was able to retrieve other teacher's name, image and category. See short screencast below. However, I see that the teacher appears in the CMS as a component with an Add new name option below it. Although it retrieved 'a' teacher it didn't provide the usual search functionality i.e. when typing a letter it returns results matching those letters in real time. This is different from how it used to function.. See your screencast from a previous post. https://github.com/plentico/plenti/issues/260#issuecomment-1384716641

Is this the new default behaviour? because I would probably not want to add a teacher here but add a new teacher via Add button in the CMS to add a new teacher to the existing teachers content type. And then come back into the CMS to Add content of type: Course and search on that teacher to add.

See working example (Teacher)

https://user-images.githubusercontent.com/6309595/227170672-64c7264f-c5b4-4ef6-925d-327f79089061.mov

2. I definitely have a problem when searching on a course.category. It doesn't return anything from the data source and you can see from the example below that I am just able to type into the field but it doesn't seem to find any existing categories.
   See non-working example (Course category)

https://user-images.githubusercontent.com/6309595/227178747-5054d340-031c-4be4-8882-e566e2b4b7be.mov

Let me know what you think. Ben

[jimafisk]

Is this the new default behaviour?

No, it looks like the references schema is not being applied.

I definitely have a problem when searching on a course.category

The schema doesn't appear to be applied here either.

I'm catching up on a few things this week so I can't ook at the moment, but make sure you aren't trying to apply a schema from the base content type into a component. If that's the case, you need to apply the schema in the component itself. Hope that helps!

[jamestagal]

hi @jimafisk

Here's my update since making a few changes. So the main change is that I am getting the search functionality that I wasn't getting before. However I have a few more questions. Also the issues wasn't where I had the _schema.json it was the spelling of a key word. 😊 See details below.

1. The first is that I realised that I was using the word references with an s but it should be singular reference in my case. For some reason I thought that when I was referencing many items in an array I should be using the plural s but I now thinking again it might only apply when you are referencing more than one source in the one search.

2. For the category search in the course content type it returns two results. See screencast video below. Why would that be? Maybe I have two fields that are the same?

See non-working example (Course category)

https://user-images.githubusercontent.com/6309595/229251144-e4d1fcba-e8f1-47c6-8ce8-b7f53bd11601.mov

3. When I reference the teachers content type in the course, it returns the teachers but it doesn't replace the content in the UI it just disappears. I am guessing that for the content to be inserted in the UI it needs to be handled in the template but I am not sure...here. Pls see screencast of the search on the teachers below.

See working example (Teacher)

https://user-images.githubusercontent.com/6309595/229255033-9cdb026c-e833-4308-9387-e887d77d4a22.mov

4. When I try to reference the courses fields (ie course.category and trainer.name ) in the _schema it doesn't work at all. Why would this be?

Here is the code I tried:

  "trainer.name": {
    "type": "reference",
    "options": [
      {
        "type": "courses",
        "search": [
          "trainer.name"
        ],
        "result": "fields.trainer.name"
      }
    ]  
  },
"course.category": {
  "type": "reference",
  "options": [
    {
      "type": "courses",
      "search": [
        "course.category"
      ],
      "result": "fields.course.category"
    }
  ]  
},

[jimafisk]

For some reason I thought that when I was referencing many items in an array I should be using the plural s but I now thinking again it might only apply when you are referencing more than one source in the one search.

The whole reference vs references is only regarding the value(s) that are returned. If you want to display multiple values, use references and loop over the array that's returned. If you want to display a single value, use reference and you can just print the string that's returned.

For the category search in the course content type it returns two results

I imagine you have multiple courses that have the same category listed? Unfortunately there isn't any sort of "unique" filter at this point. Instead of searching the categories listed on courses, you could create a category content type (if it doesn't already exist) and search that directly.

When I reference the teachers content type in the course, it returns the teachers but it doesn't replace the content in the UI it just disappears.

Your template is probably not handling the return value correctly. I haven't looked at the code, but most likely your template is handling a multi-value array because your template seems to be a single value reference (not references) field.

When I try to reference the courses fields (ie course.category and trainer.name ) in the _schema it doesn't work at all.

Is this trying to reference values in an array? If that's the case, you must apply the schema in the component itself.

[jamestagal]

Hi @jimafisk I have added your login component, from Fitlife example, to the lated commit to this theme but it is not working. Plus it seems to have messed around with something because I can't navigation around the content on the site.

Please take a look when you can. No rush

Regards, Ben

[jimafisk]

Hi @jamestagal, looks like you were missing the import for onMount: https://github.com/jamestagal/plenti-educenter/commit/81ee2cd11cba18d1aa9257191abbc33f823c4a86. Seems to work on my end now:

[jamestagal]

Thanks @jimafisk It's always something I am missing. Sorry to badger all the time. I will endeavour to look harder ☺️ next time

[jamestagal]

Hi @jimafisk

Thank you. you are so patient with me and my stumblings with this work. But I am persistent and do try to learn so please continue to understand my novice endeavours.

UPDATE: Based on your comments above I have been able to solve the issues I was having with referencing the teachers and now the course categories. 😄

Instead of searching the categories listed on courses, you could create a category content type (if it doesn't already exist) and search that directly.

I did what you suggested and just referenced the course_catgs content type, that I already had to find the existing categories. 👍 Brilliant!

Your template is probably not handling the return value correctly. I haven't looked at the code, but most likely your template is handling a multi-value array because your template seems to be a single value reference (not references) field.

This one took me some time to understand but I was able to figure it out in the end! 😊 Firstly, in the course json files I had the trainer.name in an array, see below. But I think I didn't need to

 "trainer": {
        "name": ["Clark Malik"]
},

After removing the array brackets, all I had to do was remove the index [0] at the end of the following line for it to work!

content.type === "teachers" && content.fields.name === trainer.name[0]

I think since removing the array brackets there was no need for the index [0]

Anyway your replies helped me figure it out and get it working. Thanks again Jim. Much appreciated. Ben

[jimafisk]

Nice @jamestagal! Sounds like you nailed it! Always happy to help and keep up the great work, it's all about time in the saddle :cowboy_hat_face:

[jamestagal]

Hi @jimafisk I am just reopening this issue instead of creating a new thread. It is still related to reference entities.

I had an odd thing that happened after changing the file name of component from aboutus to our_journey The reference that I applied to disable the text of the name field for this component within the aboutus.json page strangely remained disabled but I haven't changed the file name of the overridden component to match its new name yet. For instance the _schema override is currently in the _aboutus folder however the new component name is called our_journey.svelte . Do you know what might have caused that?

Now another related reference phenomenon is with the contactus.json page. I have disabled the text on the name field for each component (i.e. page_title, contact & map) here but it isn't being applied.
So I am not quite sure why the text disabled override isn't working for this contactus.json page but it is working for the aboutus.json page? And actually the page_title component template is shared (is being used) for both of these pages.

[jamestagal]

Hi @jimafisk How are you? Hope you are well. I just wanted to give you an update on my investigations into my above questions. I understand now, after reading the docs that single page type overrides need an underscore + schema in front of the file name. (for example _schema_index.json).

Also I realised that the for each _components override I needs to have a _defaults.json with a matching template for any overrides to work. One further question here though, is for single pages overrides, would that rule for having a _defaults.json file apply here too? For instance, in the Pages content, I have a _schema_aboutus.json file but I don't have a _defaults_aboutus.json. Should I?

UPDATE: Correction regarding my question and example above....I don't need _defaults.json files here and the _schema as well because all data sources come from components.....I'm slowly getting there Jim. 😊

Ben

[jimafisk]

Good investigation @jamestagal! You're spot on with these findings.

single page type overrides need an underscore + schema in front of the file name. (for example _schema_index.json).

That's exactly right

for each _components override I needs to have a _defaults.json with a matching template for any overrides to work

That's correct too. We match the key structure from the defaults to the JSON keys of whatever is actually placed on the page.

One further question here though, is for single pages overrides, would that rule for having a _defaults.json file apply here too?

No defaults are needed for single types.

---

You're definitely getting it, keep up the great work!