Contentful logo

Contentful Community

Set entry title based on selected value from a custom UI extension

#1

Good Morning party people,

I have a custom select ui-extension and want to set the entry title based on the selected entry. So basically i want to get rid of the title field and set the entry title based on the selected value. In this case for example the entry title should be Test3.

#2

Hi,
you can use the displayField property to set the title.
the value will be field id that you want its value to be used as title.

Example

const contentful = require('contentful-management')

const client = contentful.createClient({
  accessToken: '<content_management_api_key>'
})

client.getSpace('<space_id>')
.then((space) => space.getEnvironment('<environment-id>'))
.then((environment) => environment.createContentTypeWithId('<custom-id>', {
  name: 'Blog Post',
 displayField: 'title'
  fields: [
    {
      id: 'title',
      name: 'Title',
      required: true,
      localized: false,
      type: 'Text'
    }
  ]
}))
.then((contentType) => console.log(contentType))
.catch(console.error)
1 Like
#3

@khaled Thanks for your reply. I made a mistake - I mean the UI extension, not the JS SDK. So currently i have a React UI Extension which takes some value from an API

    onChange = e => {
        const value = e.currentTarget.value;
        this.setState({ value });

        const result = this.state.items.find(e => e.slug === value);
        if (result) {
            this.props.sdk.field.setValue(result);
        }
    };
   ....
   ....
 return (
            <div>
                <SelectField id="events" name="events" labelText="Select an event" helpText="Select an event from the Pretix API" value={this.state.value.slug} onChange={this.onChange}>
                    <Option value="">Pick an event</Option>
                    {this.state.items.map(item => {
                        return (
                            <Option key={item.slug} value={item.slug}>
                                {item.name.de}
                            </Option>
                        );
                    })}
                </SelectField>
            </div>
        );

Now i also want to set the entry title based on my selected value.