1. Create a Url interfance and add to the object.
export interface Url {
Url: string;
Description: string;
}
export interface ApproverWithLink {
name?: string;
email: string;
id: number;
role: string;
status: string;
lastmodified: string;
taskLink: Url;
}
2. Create the object and fill in Url object.
public static _getApproverWIthUrl(workflowUsers: IWorkflowUsers): ApproverWithLink[]
let authors: ApproverWithLink[] = [] as ApproverWithLink[];
if(workflowUsers != null && workflowUsers != undefined &&
workflowUsers.approvers != null && workflowUsers.approvers != undefined){
let localApprovals: Approver[] = workflowUsers.approvers;
for (let i = 0; i < localApprovals.length; i++) {
let localUrl: Url = {Url: 'https://www.google.com', Description:'Google'};
let returnRec: ApproverWithLink = {name: localApprovals[i].name,
email: localApprovals[i].email, id: 0, role: localApprovals[i].role,
status: localApprovals[i].status,
lastmodified: localApprovals[i].lastmodified, taskLink: localUrl };
authors.push(returnRec);
}
}
return authors;
}
3. Display on the webpart
let localApprovals: ApproverWithLink[] =
SPFacade._getApproverWIthUrl(this.props.wfApprovalReviewerList);
<ReactTable
data={localApprovals}
columns={[
{
columns: [
{
Header: "Name",
accessor: "name"
},
{
Header: "Role",
accessor: "role"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Last Modified",
accessor: "lastmodified"
},
{
Header: "Link",
accessor: "taskLink",
Cell: e=><a href={e.value.Url}> {e.value.Description} </a>
}
]
}
]}
defaultPageSize={5}
showPagination={false}
noDataText="No approvals assigned!"
style={{
height: "200px" // This will force the table body to overflow and scroll, since there is not enough room
}}
className="-striped -highlight"
/>
</div>
