Add a link on top of html elements (React)
https://sharepoint.stackexchange.com/questions/244854
-
19-01-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
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&ListId=%7B6AE8DD28%2DD469%2D457D%2DA8E4%2DFABC3D2A5DA4%7D&ID=1&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&ListId=%7B6AE8DD28%2DD469%2D457D%2DA8E4%2DFABC3D2A5DA4%7D&ID=1&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.
المحلول 2
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>
)
}
}
نصائح أخرى
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>
)
}
لا تنتمي إلى sharepoint.stackexchange
