Create Item View App to display link column data as iFrame

monday Apps & Developers
,
1

Hello,

Prefacing this by saying I am by no means a developer at all - but I am trying my best to learn what I can to create custom, workable solutions for my organization.
I’m looking to create a very simple item view app that simply displays the contents of a link column as an iframe. Any preliminary guidance on how to approach such a thing? I’ve created simple item views where I’ve just been able to embed the static website I would like (in my use case, an online form). However, I would like the item view to display dynamic links specific to the item. Any guidance on how to create an app on how to do this? Happy to even just get some articles I can read to learn about how to start.

Essentially, the app will need to be able to read the monday.com item data and display the link column’s content as the iframe src.

Thank you in advance!

2

Hello there @nadiah and welcome to the community!

I hope you like it here :muscle:

You will need to use code for this one.

You could use our SDK (documentation here) and use the monday.get method using “context” as an argument to get the context of where the item view is being opened (in which item). This will give you an itemId.

You can then use that itemId with the method monday.api to get the URL inside your link column. This is our API documentation.

Once you have that URL, you can use it in your HTML code to display it inside your view.

You can also check an app that uses the SDK in a basic way here.

I hope that helps!

Cheers,
Matias

1 Like
3

Thank you so much for your help! The example code really helps :slight_smile: I will check this solution out

4

2 follow-up questions - but I think I’m figuring something out! :

This is what I have:

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>;
  }
}

monday.api('query {
  items(ids: itemid) {
    name
    column_values (ids:link82) {
      id
      text
    }
  }
}

');

export default App;
  1. How do I refer back to the item id into this part of the code?:
monday.api('query {
  items(ids: ?-->itemid<--?) {
    name
    column_values (ids:link82) {
      id
      text
    }
  }
}
');
  1. Then after that: how do I refer to the returned url in the html?
5

Hello again @nadiah,

I do not understand the questions you sent. What do you mean refer back to the item ID?

And what do you mean when you say “refer to the returned url in the html”?

What would “refer” mean in this context?

And what url in what html?