The Canvas Envision platform supports customization through evCreate API. One of the most useful customization features is the ability to create custom buttons in the creator ribbon interface. These buttons let you run custom scripts directly in your documents — allowing the streamlining of repetitive tasks, automating workflows, or integrating data from other systems.
In this blog post, we’ll walk through everything you need to know to get started with custom buttons in Canvas Envision: what they are, how to create them, and tips for deploying them efficiently across your workspace for your team to use.
What is the evCreate API?
“The evCreate API (application programming interface) is a connection point for external systems, software, services, custom scripts, and AI (artificial intelligence) bots and agents to call the Canvas Envision Creator's functionality programmatically.” – evCreate API Overview, evCreate API 5.7
What is a Custom Ribbon Button?
A custom ribbon button is a command element you can add to a special tab in the Canvas Envision interface. When clicked, it runs a JavaScript file you provide—allowing for anything from inserting shapes and text, controlling 3D views, to integrating external data via APIs.
These buttons live in a custom ribbon tab that appears between the default tabs in Envision's UI. Creators in your workspace can access these tools without writing a line of code themselves.
Prerequisites: What You’ll Need
To create and deploy a custom button, you’ll need:
- Admin user role in Canvas Envision
- A 32×32-pixel SVG or PNG to use for the icon image (SVG preferred)
- A valid, self-contained JavaScript (.js) script file (example provided)
- Familiarity with Canvas Envision’s evCreate API
- Understanding of JavaScript basics
If your script relies on assets like images or data files, make sure they’re hosted at accessible URLs or embedded appropriately.
Step-by-Step: Creating Your First Button
Here’s how to create and deploy your own button using the built-in Custom Ribbon Configuration Editor.
1. Open the Configuration Editor
Navigate to:
File > Options > Configure Custom Ribbon Tab
(Only Admins will see this option.)
2. Add a New Button
- Click the “Add” toolbar button.
- Populate the required fields:
- ID: A unique identifier for internal tracking
- Label: The display name shown on the creator ribbon
- Button Icon: Upload a 32x32-pixel SVG or PNG
- Script: A valid self-contained JavaScript file
- Tooltip: Short description shown on button hover
- Visibility: Choose if it appears in 2D editing mode, 3D editing mode, or both
- Enable Behavior: Choose when the button is active (e.g. only when objects are selected)
3. Confirm, Save, and Deploy
Click “Confirm” to confirm edits then “Save” to store it in the staging environment. You can now test the button in the UI under the staging tab (with a yellow label).
Once you're happy with how it functions, click “Deploy” to publish it to all Creators in your workspace. That’s it—your button is now live!
Example: A Simple “Insert Hello Text” Button
Here’s an example of a very basic script that creates a text box on the page:
(async function () {
async function waitForEvCreateApiReady() {
const until = (predicateFn, intervalMsec) => new Promise(resolve => {
const poll = () => predicateFn() ? resolve() : setTimeout(poll, intervalMsec);
poll();
});
await until(() => window.evCreate !== undefined, 500);
await window.evCreate.config.WhenApiReady();
}
await waitForEvCreateApiReady();
await window.evCreate.object.text.Create("Hello from Custom Button!", {
left: 100, right: 600, top: 100, bottom: 200
});
})();
Best Practices
- Modularize Reusable Logic: Write helper functions for tasks like layer selection or page iteration to avoid duplicating code.
- Test in Staging First: Always verify your buttons in the staging configuration before deploying to your full team.
- Use Clear Icons, Labels, and Tooltips: Help your users understand what each button does at a glance.
- Store Assets Thoughtfully: If your scripts rely on icons, templates, or data files, host them in a consistent and accessible location (e.g., a dedicated asset server or public cloud directory).
- Fallback and Error Handling: Wrap risky calls in try/catch blocks and provide user-friendly messages if something fails.
Use Cases Worth Automating
Custom buttons can dramatically improve productivity in common use cases such as:
- Inserting templated objects (e.g. company logos, text callouts)
- Auto generating and naming pages
- Creating BOM tables or syncing with PLM/MES systems
- Controlling 3D visibility or part grouping actions
Conclusion
Custom buttons in Canvas Envision give you the power to enhance user productivity around your workflows. Whether you’re automating repetitive steps, enforcing design consistency, or simplifying tasks for other users, evCreate allows you to do in a low code way.
If you haven’t tried implementing a custom button yet, open the Configuration Editor and start experimenting—the possibilities are endless.
Start your Canvas Envision free trial today →
For a full overview of the evCreate API, see the official documentation:
https://developers.canvasgfx.com/sdk-create/welcome-to-evcreate-api.html
