Accessing the ItemId in an Item View app

Hi @mattfitzgerald!

Thank you for the awesome feedback. We’re definitely looking to update our Quickstart React tutorial to encompass more of our SDK methods for the future.

For now, do you mind letting me know if using the monday.get("context") SDK method works for you to retrieve the item ID? I tested this out and was able to see the item ID with the relevant item card.

As a reference, here is our comprehensive SDK documentation: GitHub - mondaycom/monday-sdk-js: Node.js and JavaScript SDK for developing over the monday.com platform. This will show you all of the methods available in our SDK.

Hi @Helen,

Thanks for your prompt response.

Should I expect that the data available using monday.get("context") to be different to what’s available using monday.listen("context")? Could you share the code that you’re using that gives you access to the ItemId in an Item View app?

The following app.js (modified from the app in the Quickstart guide)

import React from "react";
import "./App.css";
import mondaySdk from "monday-sdk-js";
import "monday-ui-react-core/dist/main.css"
//Explore more Monday React Components here: https://style.monday.com/
import AttentionBox from "monday-ui-react-core/dist/AttentionBox.js"

const monday = mondaySdk();

class App extends React.Component {
  constructor(props) {
    super(props);

    // Default state
    this.state = {
      settings: {},
      name: "",
    };
  }

  componentDidMount() {

    monday.listen("context", res => {
      this.setState({contextData: res.data});
      console.log(res.data);
    })
  }

  render() {
    return <div className="App">
      {JSON.stringify(this.state.contextData)}
    </div>;
  }
}

export default App;

Produces the following output:

{"theme":"light",
"user":{"id":"22247712","isAdmin":true,"isGuest":false,"isViewOnly":false},
"boardIds":[1343136079],
"viewMode":"fullscreen",
"editMode":true,
"instanceId":-1}

Note the absence of boardId (singular) and itemId as described in The Quickstart Guide: Views & Widgets under the heading Set up a context listener that calls the monday API. It really seems like it’s the wrong set of context data for an Item View app.

Thanks again,
Matt

Hi @mattfitzgerald!

Ahh okay actually I think I may have figured it out. Are you testing this on a board with an item? Or are you testing this in the app preview section?

The reason I ask is because I was able to retrieve the relevant item ID using both the monday.listen("context",...) method, as well as the monday.get("context",...) method.

However, this only worked for me when testing on a relevant item in my board (i.e. I go into one of the items on one of my boards, and add this example item view to it). When testing in my app preview area, I did not get any item ID information, since there isn’t any context to get from the app preview section!

Regarding your question, the listen SDK method acts largely like a webhook for your view app, and essentially subscribes you to event changes initiated in your view app. The get method will retrieve information about your view app, but won’t be subscribed and “listening” to events initiated.

As such, the documentation is indeed correct. I copied your code and was able to get it working for me. This is the payload I’m seeing on my end:

Thanks @Helen, you’ve solved the mystery!

I was indeed using the preview area to view the app during development.

I built, zipped and uploaded the app and I can now see the attributes I expected in the context hash including the elusive ItemId.

I’ve also now seen that a build can be created from a URL so this build/zip/upload workflow will not be required every time I want to run my code in the Monday environment during development. Great success!

Cheers,
Matt

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.