Update a Component
The PUT method sends the component object with updated values to our backend. An update on the component will not take over already inserted values, make sure also to update your stories that contain this component.
https://mapi.storyblok.com/v1/spaces/:space_id/components/:component_id
Path Parameters
-
:space_id
required numberNumeric ID of a space
-
:component_id
required numberThe numeric id of the component
Request Body Properties
-
component
The Component Objectcomponent object.
-
name
stringTechnical name used for component property in entries
-
display_name
stringName that will be used in the editor interface
-
schema
objectKey value pairs of component fields.
-
image
string or nullURL to the preview image, if uploaded
-
preview_field
stringThe field that is for preview in the interface (Preview Field)
-
is_root
booleanTrue if the component can be used as a Content Type
-
preview_tmpl
stringYour component preview template. You can learn how to design your preview template here.
-
is_nestable
booleanTrue if the component is nestable (insertable) in block field types
-
component_group_uuid
stringThe component folder ID of the component
-
color
stringThe color of the icon selected for the component
-
icon
stringIcon selected for the component
-
internal_tag_ids
string[]List of ids of the tags assigned to the component
-
content_type_asset_preview
stringAsset preview field (Preview Card) for a content type component
-
Response Properties
-
component
The Component Objectcomponent object.
-
id
numberThe numeric ID
-
name
stringTechnical name used for component property in entries
-
display_name
stringName that will be used in the editor interface
-
created_at
stringCreation date (Format:
yyyy-MM-dd'T'HH:mm:ssZ
) -
updated_at
stringLatest update date (Format:
yyyy-MM-dd'T'HH:mm:ssZ
) -
schema
objectKey value pairs of component fields.
-
image
string or nullURL to the preview image, if uploaded
-
preview_field
stringThe field that is for preview in the interface (Preview Field)
-
is_root
booleanTrue if the component can be used as a Content Type
-
preview_tmpl
stringYour component preview template. You can learn how to design your preview template here.
-
is_nestable
booleanTrue if the component is nestable (insertable) in block field types
-
all_presets
object[]An array of presets for this component
-
id
numberThe numeric ID of the preset
-
name
stringName of the preset
-
component_id
numberThe ID of the component the preset is for
-
image
string or nullLink to the preview image of the preset
-
icon
stringIcon selected for the preset
-
color
stringColor of the icon selected for the preset
-
description
stringThe description of the preset
-
-
real_name
stringDuplicated technical name or display name, used for internal tasks
-
component_group_uuid
stringThe component folder ID of the component
-
color
stringThe color of the icon selected for the component
-
icon
stringIcon selected for the component
-
internal_tags_list
object[]List of objects containing the details of tags used for the component
-
id
numberId of the tag
-
name
stringName of the tag
-
-
internal_tag_ids
string[]List of ids of the tags assigned to the component
-
content_type_asset_preview
stringAsset preview field (Preview Card) for a content type component
-
curl "https://mapi.storyblok.com/v1/spaces/606/components/4123" \
-X PUT \
-H "Authorization: YOUR_OAUTH_TOKEN" \
-H "Content-Type: application/json" \
-d "{\t\"component\": {\"id\":4123,\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}"
// Using the Universal JavaScript Client:
// https://github.com/storyblok/storyblok-js-client
Storyblok.put('/spaces/606/components/4123', {
"component": {
"id":4123,
"name": "banner_section",
"display_name": null,
"schema": {
"headline": {
"type": "textarea",
"pos": 0,
"translatable": true,
"description": "This field is used to render an H1 title"
}
},
"is_root": false,
"is_nestable": true,
}
})
.then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
$client = new \Storyblok\ManagementClient('YOUR_OAUTH_TOKEN');
$payload = [
"component" => [
"id" => 4123,
"name" => "banner_section",
"display_name" => null,
"schema" => [
"headline" => [
"type" => "textarea",
"pos" => 0,
"translatable" => true,
"description" => "This field is used to render an H1 title"
]
],
"is_root" => false,
"is_nestable" => true,
]
];
$client->put('/spaces/606/components/4123', $payload)->getBody();
require 'storyblok'
client = Storyblok::Client.new(oauth_token: 'YOUR_OAUTH_TOKEN')
payload = {
"component" => {
"id" => 4123,
"name" => "banner_section",
"display_name" => null,
"schema" => {
"headline" => {
"type" => "textarea",
"pos" => 0,
"translatable" => true,
"description" => "This field is used to render an H1 title"
}
},
"is_root" => false,
"is_nestable" => true,
}
}
client.put('/spaces/606/components/4123', payload)
HttpResponse<String> response = Unirest.put("https://mapi.storyblok.com/v1/spaces/606/components/4123")
.header("Content-Type", "application/json")
.header("Authorization", "YOUR_OAUTH_TOKEN")
.body("{\t\"component\": {\"id\":4123,\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}")
.asString();
var client = new RestClient("https://mapi.storyblok.com/v1/spaces/606/components/4123");
var request = new RestRequest(Method.PUT);
request.AddHeader("Content-Type", "application/json");
request.AddHeader("Authorization", "YOUR_OAUTH_TOKEN");
request.AddParameter("application/json", "{\t\"component\": {\"id\":4123,\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
import Foundation
let headers = [
"Content-Type": "application/json",
"Authorization": "YOUR_OAUTH_TOKEN"
]
let postData = NSData(data: "{\t\"component\": {\"id\":4123,\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}".data(using: String.Encoding.utf8)!)
let request = NSMutableURLRequest(url: NSURL(string: "https://mapi.storyblok.com/v1/spaces/606/components/4123")! as URL, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 10.0)
request.method = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data
let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
if (error != nil) {
print(error)
} else {
let httpResponse = response as? HTTPURLResponse
print(httpResponse)
}
})
dataTask.resume()
import requests
url = "https://mapi.storyblok.com/v1/spaces/606/components/4123"
querystring = {}
payload = "{\t\"component\": {\"id\":4123,\t\t\"name\": \"banner_section\",\t\t\"display_name\": null,\t\t\"schema\": {\t\t\t\"headline\": {\t\t\t\t\"type\": \"textarea\",\t\t\t\t\"pos\": 0,\t\t\t\t\"translatable\": true,\t\t\t\t\"description\": \"This field is used to render an H1 title\"\t\t\t}\t\t},\t\t\"is_root\": false,\t\t\"is_nestable\": true,\t}}"
headers = {
'Content-Type': "application/json",
'Authorization': "YOUR_OAUTH_TOKEN"
}
response = requests.request("PUT", url, data=payload, headers=headers, params=querystring)
print(response.text)
You will receive a fully loaded component object as a response.