I’ve been pulling my hair out to get an external (any external, been through several) to work. So far, I’ve only gotten the confetti demo to work. I’ve gone through the “Using external JS libraries” and I’m confident that I’m putting the in the correct place (custom code) and the code in Action correctly – and the confetti example works fine.
I’ve repeatedly gone through the in-app Custom scripts “Custom code” documentation (e.g., where it gives the <script> function myFunction()...
and the same confetti()
example, etc.)
mple
I also looked at this thread but I am pretty confident the problem is me
I think I’m getting a bit confused by the layers of abstraction here and just not getting the paradigm of the Custom Code, Actions, and execution sequence. (For example, I kept testing changes, but didn’t realize I needed to refresh my browser to get some changes to Custom Code to update/execute.)
I’ve tried multiple libraries, the ESM approach, and everything else I can think of. I feel like I’ve done more complicated things in UIBakery, and I’m not sure what simple thing I’m missing here.
FWIW, not sure it’s accurate, and keep revising things to make it work, here’s what’s in my Custom code section now:
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/uuidv7@1.0.2/dist/index.min.js"></script>-->
<script type="module">
// Import from a CDN that supports ES module imports
import { v7 as uuidv7, parse as uuidParse } from "https://esm.sh/uuid@9.0.0";
import base32Encode from "https://esm.sh/base32-encode@2.0.0";
function generateBase32EncodedUUIDv7() {
// Generate a UUIDv7 (standard hyphenated string)
const uuidStr = uuidv7();
// Convert the UUID string to a Uint8Array (16 bytes)
const uuidBytes = uuidParse(uuidStr);
// Base32 encode using RFC4648 without padding
const encoded = base32Encode(uuidBytes, "RFC4648", { padding: false });
return encoded;
}
console.log(generateBase32EncodedUUIDv7());
</script>
And in my Action, I’ve tried calling the generateBase32EncodedUUIDv7()
function directly, and tried pulling the function code into the Action directly, which is where it sits at the moment:
// Generate a UUIDv7 (standard hyphenated string)
const uuidStr = uuidv7();
// Convert the UUID string to a Uint8Array (16 bytes)
const uuidBytes = uuidParse(uuidStr);
// Base32 encode using RFC4648 without padding
const encoded = base32Encode(uuidBytes, "RFC4648", { padding: false });
confetti({
particleCount: 500,
spread: 300,
origin: { y: 0.6 }
});
return {{encoded}};
Trying to provide as much detail as possible – and going to keep working on, primarily posting this in case anyone else is sharing the same pain point, or is able to point out what silly mistake I’m making
And curious if anyone has a good UUIDv7 library they have working or if (since we’re self-hosted) if there’s some way for us to add a package the old-fashioned way with npm.