How do I create an ‘Apply’ button?

FAQs
1

Detail:
The general idea is to onClick take the values of two variables and set them as the values of two other variables. The destination variables may be defined outside of the scope of this button, e.g. declared manually as part of the dashboard or declared by some other component on the dashboard.

Solution:

import { EmbeddedComponentMeta, defineComponent } from '@embeddable.com/react';
import { Value } from '@embeddable.com/core';

import Component from './index';

export const meta: EmbeddedComponentMeta = {
  name: 'BasicButtonComponent',
  label: 'Basic Button',
  inputs: [
    {
      name: 'label',
      type: 'string',
      label: 'Label',
      description: 'The text on the button'
    },
  ],
  events: [
    {
      name: 'onClick',
      label: 'Click',
      properties: []
    }],
};

type Inputs = {
  label: string;
}

export default defineComponent<Inputs>(Component, meta, {
  props: (inputs) => {
    return {
      ...inputs
    };
  },
  events: {
    onClick: (e) => ({ })
  }
});

Then the props for your react button component will be:

const { label, onClick } = props

Then in the builder, just assign one variable to the other like so:

Screenshot 2024-01-03 at 10.41.31
Screenshot 2024-01-03 at 10.41.31822×1458 51.2 KB

For this case, you’d define two interactions (one for each variable)