0

I have a "meeting radar" on my SharePoint witch is build using react I think and I wish to upgrade. Unfortunatly, even though I am starting to have a correct js level, I dont understand this code and the person that did wrote it is no longer around or commented it.

So this radar (see picture: https://drive.google.com/open?id=1ahDysp3Jv2y1xvPNfA6gpYZlBnNprNKX) is displaying flashing points with the name of the meetings that the script get from a SP list.

I want to either make each displayed meeting a clickable link to the SP list item or a simple link on top of the complete radar to the SP list.

I just dont manage to understand the code below and were I schould try to build an onclick.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" description="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="\sites\mySite\SiteAssets\radar.css">
<link rel="stylesheet" href="/sites/mySite/SiteAssets/font-awesome-4.7.0/css/font-awesome.min.css" />
</head>

<body>
  <div id="app"></div>
 <div className="app-container" id="appContainer"></div>

 <script src="\sites\mySite\SiteAssets\react\react.min.js"></script>
 <script src="\sites\mySite\SiteAssets\react\react-dom.min.js"></script>
 <script src="\sites\mySite\SiteAssets\react\babel.min.js"></script>
 <script src="\sites\mySite\SiteAssets\react\axios.min.js"></script>
 <script src="\sites\mySite\SiteAssets\react\bluebird.min.js"></script>

<script type="text/babel">

class ArticleListContainer extends React.Component {

  constructor(props){

    super(props);
    this.state = {
      data : []
    }}

  componentDidMount() {

    var config = {
      headers: { "Accept": "application/json; odata=verbose" }
    };
        axios.get("http://my.company.corp/sites/mySite/_api/Web/Lists/GetByTitle('Termin%20Radar')/items?$filter=Priority%20eq%20%27High%27",config)
      .then((response) => {
        console.log(response.data.d.results);

        this.setState({
          data:response.data.d.results
        });
      })
      .catch((error) => {
        this.setState({
          error
        });
      });

      //response.data.d.results.push(response.data.d.results[0]);

  }

  //<a class="ms-listlink ms-draggable" onclick="EditLink2(this,117);return false;" onfocus="OnLink(this)" href="http://mycompany.corp/sites/mySite/_layouts/15/listform.aspx?PageType=4&amp;ListId=%7B6AE8DD28%2DD469%2D457D%2DA8E4%2DFABC3D2A5DA4%7D&amp;ID=1&amp;ContentTypeID=0x010300B4B752E2E0C4D84CB26B1DCB7D394445" target="_self" DragId="0">Type A+ Full Scale Evac Test, Workstream Slides</a>

  //href="http://mycompany.corp/sites/mySite/_layouts/15/listform.aspx?PageType=4&amp;ListId=%7B6AE8DD28%2DD469%2D457D%2DA8E4%2DFABC3D2A5DA4%7D&amp;ID=1&amp;ContentTypeID=0" + {article.ContentTypeId} + """
  render() {

      return (
        <div>
          {this.state.data.map( function( article, i ){
               return(
             //react.js, not far from solution with onClick
             //<div className="target" key={article.Id} onClick={article.ContentTypeId}><span className="text">{article.Title}</span></div>
             //<div onClick={article.ContentTypeId} className="target" key={article.Id}><span className="text">{article.Title}</span></div>
            <div className="target" key={article.Id}><span className="text">{article.Title}</span></div>  
        )})}
        </div>
      )
  }  
}

class App extends React.Component {

  render() {
    return(
      <div className="grid">
        <div className="radar"><div ></div>
          <div className="axis"></div>
          <div className="concentric-circles"></div>
          <div className="pacman"></div>
          <div className="targets">
            <ArticleListContainer/>
          </div>
        </div>
    </div>
    )}
}

ReactDOM.render(<App />, document.getElementById('app'));

</script>
</body>
</html>

If anybody could give me pointer on how to add these dynamic links, that would be great. Thanks for reading.

  • I am not that much aware of React, but I can help you creating dynamic link list item or for list url – Anil Pal Jul 9 '18 at 12:58
  • Any help is welcome. I played in the part with "{this.state.data.map( function( article, i ){" trying to build the link here, since it is the part bulding the text to display, but not chance yet. I dont mind rewritting a part of the code nt with react, with I dont master anyway – Romain Condat Jul 9 '18 at 13:30
1

For dynamic list item url:

render() {

  return (
  <a href="http://my.company.corp/sites/mySite/Lists/Termin Radar/">
    <div>
      {this.state.data.map( function( article, i ){
           return(
         //react.js, not far from solution with onClick
         //<div className="target" key={article.Id} onClick={article.ContentTypeId}><span className="text">{article.Title}</span></div>
         //<div onClick={article.ContentTypeId} className="target" key={article.Id}><span className="text">{article.Title}</span></div>
          var listitemURL= "http://my.company.corp/sites/mySite/Lists/Termin Radar/DispForm.aspx?ID="+{article.ID};
      <div className="target" key={article.Id}><a href={listitemURL}><span className="text">{article.Title}</span></a></div>  
    )})}
    </div>
    </a>
  )
 }

For List URL, link below in href attribute directly on main outer div of radar

render() {

  return (
  <a href="http://my.company.corp/sites/mySite/Lists/Termin Radar/">
    <div>
      {this.state.data.map( function( article, i ){
           return(
         //react.js, not far from solution with onClick
         //<div className="target" key={article.Id} onClick={article.ContentTypeId}><span className="text">{article.Title}</span></div>
         //<div onClick={article.ContentTypeId} className="target" key={article.Id}><span className="text">{article.Title}</span></div>
        <div className="target" key={article.Id}><span className="text">{article.Title}</span></div>  
    )})}
    </div>
    </a>
  )
 } 
  • Thanks for these feedback, I am getting near to the goal I think. Nevertheless, in case1, adding a variable in the "return(" seems to create a blocking point: on my page, nothing is displayed. I tried to put some console.log there but same results. It is not loading the sciript – Romain Condat Jul 11 '18 at 8:54
0

Oh well, the answer was pretty easy actually. My problem is that I could not get how to concatenate 2 {variable} inside my url. Turns out I just had to write {var1 + var2}

  render() {
      console.log('in render');
  console.log(this.data);
  var listitemURL= "http://.../sites/.../Lists/Termin%20Radar/DispForm.aspx?ID="
      return (
        <div>
          {this.state.data.map( function( article, i ){
            return(
                //var listitemURL= "http://.../sites/.../Lists/Termin%20Radar/DispForm.aspx?ID="+{article.ID};
                //<div className="target" key={article.Id}><span className="text">{article.Title}</span></div>  
                <div className="target" key={article.Id}><a href={listitemURL+article.ID}><span className="text">{article.Title}</span></a></div>  
            )})}
        </div>
      )
  }  
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.