How to get access to fields inside a field of a content type?

Question

I have a content type which has 5 fields and one of them is a UI extension which generates two text fields from HTML. I'm not able to access the second text field inside the UI extension field.

I'm using JavaScript to access the two text fields inside the UI extension field. However, I'm only able to access the first field. How do I also retrieve and manipulate the second text field?

<form method="post" id="webAddressForm">
        <div class="table form-fields">
        <div class="row name">
                    <div class="label">Web address:</div>
                        <div class="input full"><input type="text" name="web-address" id="webAddress" placeholder="http://google.com"/></div>
                </div>
      <br>
        <div class="row name">
                    <div class="label">Text to display:</div>
                        <div class="input full"><input type="text" name="website-name" id="websiteName" placeholder="Google"/></div>
        <br>
        </div>
      </div>
        </form>

JS being used so far to get the value of the field.

console.log(api.field.getValue()) //  this only returns the value from the first text field.

I am trying to access both webAddress and websiteName text fields.

It retrieves the first field which is connected to the UI extension. Its from the UI Extension sdk reference. — mhmrhiman, Aug 21 '19 at 07:54
Ok, I think it returns an array of fields for you and when you use `api.field.getValue()` by default will return the index 0 value. try to get each value by giving it index of each field `api.field[0].getValue()` and `api.field[1].getValue()`. let me know if it's not working. @mhmrhiman — Spleen, Aug 21 '19 at 08:10
No it doesn't return anything now. Its like it doesn't recognize the second text field at all. — mhmrhiman, Aug 21 '19 at 08:20
that would be helpful if give me a link. if is that code uploaded somewhere. — Spleen, Aug 21 '19 at 09:53
id: "linkComponent" locale: "fr-FR" required: false type: "Symbol" validations: [] _value: "test" It only returns one value which is "test". — mhmrhiman, Aug 21 '19 at 11:46

score 0 · Answer 1 · answered Aug 21 '19 at 23:02

If you want to store multiple values in one field you have to choose the field type JSON object.

By default, Contentful supports several different types for one field but all of them are single values. By choosing JSON as a type for your field (and your UI extension) you can work around this and store the data you need because you have complete control over the JSON structure.

Hope that helps. :).

Here you can find an example I wrote ages ago modelling tabular data in a single field.

How to get access to fields inside a field of a content type?

1 Answers1