Misunderstanding of errors (JavaScript beginner)

Making Packs
21

Dear Eric Noël,

I wanted to express our gratitude for the great job you did in adapting the method for using Codespaces with GitHub. Your attention to detail and clear presentation made using this method incredibly easy for all of us.

In addition, we were also impressed with the detailed presentation of how to use the CLI method that you provided. This was extremely helpful in helping us understand and practice the steps necessary to effectively use this method.

Again, we thank you for your excellent work and look forward to continuing to work with you in the future.

Sincerely,
Thierryvm

2 Likes
22

The npx coda upload command will do all of the packaging for you, so you don’t need to worry about getting tsc working.

nvm is a great tool, and I use it myself. In my instructions I just say “install Node and NPM” but don’t go into detail, as there are many ways to do it and if can vary by operating system.

Let me know if the Codespaces instructions end up working any better!

1 Like
23

CodeSpaces works really well and by following your explanations, the package was online within minutes.
For my part, it seems to be the best way to do it, because no IDE installation to do and therefore no errors.
To be seen on the long term, but I encourage its use.

Sincerely,

Thierry

1 Like
24

Hello @Eric_Koleda ,

I’m doing tests with CodeSpaces, but even with all the coda documentation, it gives me errors in the pack.ts file.

I tried with “pack.addAction” and register without success :(.

Sincerely,

Thierry

import * as coda from "@codahq/packs-sdk";

const pack = coda.newPack();

pack.register("change-table-color", async () => {
  // Récupère tous les headers de tableau dans le document
  const tableHeaders = document.querySelectorAll("th");

  // Ajout d'un événement "click" sur chaque header pour changer la couleur
  tableHeaders.forEach((header: HTMLTableCellElement) => {
    header.addEventListener("click", () => {
      // Récupère la valeur actuelle de la couleur de fond de l'header
      let currentColor = header.style.backgroundColor;

      // Utilise un switch pour changer la couleur de l'header en fonction de la couleur actuelle
      switch (currentColor) {
        case "white":
          header.style.backgroundColor = "#0000FF";
          break;
        case "#0000FF":
          header.style.backgroundColor = "#FFFF00";
          break;
        case "#FFFF00":
          header.style.backgroundColor = "#00FF00";
          break;
        case "#00FF00":
          header.style.backgroundColor = "#FF00FF";
          break;
        case "#FF00FF":
          header.style.backgroundColor = "white";
          break;
        default:
          header.style.backgroundColor = "white";
      }
    });
  });
});

export { pack };
25

Hi @Thierryvm - Glad to hear that the Codespaces tutorial has worked out. Looking at your code, there is no method pack.register(), I’m not sure where you saw that. Also document.querySelectorAll(); won’t work since that’s using browser-specific APIs that aren’t available in Packs.

I strongly suggest you start with some of the sample Packs, get them working, and then make small changes one at a time. Pasting in large amounts of code from outside sources isn’t likely to work, since many of those sources assume you are coding for a browser / web page.

1 Like
26

Hello @Eric_Koleda

Indeed, register doesn’t work and I got it from Stack Overflow, probably without being sure that it is TypeScript. And the other problem is that I’m looking for a function that allows me to change the header of a table ("Get all table headers in the document for example and change their style).
I’m learning all the JavaScript and TypeScript in parallel now, but this is not a good way to learn :frowning:

I even tried adding a file to the root named (“changeColors.ts”) to add the colors, but without success.

For the rest, it comes from my experience in Python for the Switch/case for example.

{
“compilerOptions”: {
“lib”: [“es2020”, “dom”],
“target”: “ES2020”,
“moduleResolution”: “node”
}
}

Here, I thought that playing with the DOM, in the tsconfig.json file, would allow me to solve this problem. So there you go, I wanted to go faster than the song and I burned my wings.

Otherwise, is my idea to change the background color of the header (th) of each table possible?

Sincerely,

Thierry

27

Hi @Thierryvm - I applaud that you are trying at all!

No, this isn’t possible using a Pack. See the section What can Packs do? in the documentation to learn more about the limitations. But in general Packs can only add to the Coda experience, not change existing parts of the doc.

The Coda API can be used to change a doc, and you can call the API from a Pack, but even then there is no method in the API to change the color of table headers. More fundamentally, Coda the product doesn’t allow for the table headers to have different colors, and no API or SDK can fundamentally change the product it’s working with.

2 Likes
28

Thank you for your reponse :slight_smile: an good day.

Cordialement,
Thierryvm