Skip to main content

Updating & pushing views

Modals contain a stack of views. When you call the views.open method, you add the root view to the modal. After the initial call, you can dynamically update a view by calling the views.update method, or stack a new view on top of the root view by calling the views.push method.

The views.update method

To update a view, you can use the built-in client to call the views.update method with the view_id parameter that was generated when you opened the view, and a new view object including the updated blocks array. If you're updating the view when a user interacts with an element inside of an existing view, the view_id parameter will be available in the body of the request.

The views.push method

To push a new view onto the view stack, you can use the built-in client to call the views.push method by passing a valid trigger_id parameter and a new view payload. The arguments for the views.push method is the same as views.open. After you open a modal, you may only push two additional views onto the view stack.

Learn more about updating and pushing views in our API documentation

// Listen for a button invocation with action_id `button_abc` (assume it's inside of a modal)
app.action('button_abc', async ({ ack, body, client, logger }) => {
// Acknowledge the button request
await ack();

try {
if (body.type !== 'block_actions' || !body.view) {
return;
}
// Call views.update with the built-in client
const result = await client.views.update({
// Pass the view_id
view_id: body.view.id,
// Pass the current hash to avoid race conditions
hash: body.view.hash,
// View payload with updated blocks
view: {
type: 'modal',
// View identifier
callback_id: 'view_1',
title: {
type: 'plain_text',
text: 'Updated modal'
},
blocks: [
{
type: 'section',
text: {
type: 'plain_text',
text: 'You updated the modal!'
}
},
{
type: 'image',
image_url: 'https://media.giphy.com/media/SVZGEcYt7brkFUyU90/giphy.gif',
alt_text: 'Yay! The modal was updated'
}
]
}
});
logger.info(result);
}
catch (error) {
logger.error(error);
}
});