Article: AN0002370Updated: 05.11.2018
There are links to records in columns Value from a reference class (no matter if these are columns from classes or queries). After clicking on them user is navigated to a record detail - this is a standard behaviour. However, in some cases it is more suitable to navigate the user to a page which displays data from the record and potentially also other data. Examples can be e.g. reference to a Knowledge Base from a Configuration item or reference to a Project Status Report from the list of projects.
We can have e.g. a webpart with a link to the last Project Status Report (sloupec Last PSR).
Reference in the data in column Last PSR normally contains a link to a record detail. In our example we refer to a record Id 8 in class Id 2765 (FullId = 2765-8).
... and this link would open a record that looks like this:
This record is good for a Project Manager to create Project Status Report. However, to present to the Steering Committee or Project Sponsor we want to display a page with a report (with data from the above record), because the page is better for data presenting and can contain whatever data (not only data from one record):
We can achieve this behaviour in two steps:
- We will select the respective page in the field Redirect to page in the column with the reference to the record and we will define the variable in the field that we want to pass via URL in the field Name of the variable for ID in url. We can define more variables here and set their values. The last variable has to be stated always without value - Id of the referenced record will be inserted into it automatically. Hence, we always pass Id of the record that was included in the link, on which the user was clicking.
Example of variables defined in the field Name of the variable for ID in url:
nft=1&DrId
The example contains two variables separated by character &. The first variable contains value 1. The second varibale does not contain any value but the value will be inserted into it automatically (see below).
The setting in the Column detail then looks like this:
The page mentioned above in the field Redirect to page has in our example Id 42.
The link in the data will be changed and contains now URL to the given page including variables. Please note that the variable DrId has now value 8, which is Id of the particular record from our above example, which displays a standard link, if the option Redirect to page is not used.
- We have to process the variables in the page and we will display corresponding data according to values which were passed.
Example: Script in the page detail
function OnLoad()
{
var dr = null;
//read ID from url
var id = OGForm.QueryString.GetInt('DrId');
if (id != null)
{
var cl = OGModel.ClassDefs['project_status_report'];
dr = OG.DataRow.GetDataById(cl.Id, id);
}
//pass ID to webparts in the page
OGWebParts['text'].SetData('dr', dr);
var b = dr != null;
OGWebParts['text'].Visible = b;
}
Displaying the data is performed by webpart Script, that is inserted in the page.
Example: Webpart draws tables and insert into them data for the passed ID - we can get the data from the classes according to our needs.
function OnPreRender()
{
//take-over record loaded in the page
var dr = OGWebPart.GetData('dr');
if (dr != null)
{
var pro = dr.GetDR('project');
var ps = dr.GetDR('project_status');
var regionsText = OG.TextUtils.ConvertEntitiesToSeparatedString( pro['regions'], ', ', '');
var sb = new System.Text.StringBuilder();
sb.Append( '<div class="endashboard"><table style="width: 100%"><tr> <td><h1>' + pro['name'] + ' - ' + regionsText + '</h1>');
sb.Append( '<h2>Project status report</h2></td><td style="text-align: right; width: 250px">');
var ic = dr['colour'];
var co = '';
if ( ic != null)
{
ic = OG.Color.ToHtml(OG.Color.ToColor(ic));
}
sb.Append( '<div class="circle" style="background-color: ' + ic + '"></div>');
sb.Append( '<img src="./ImagesData/sipka_semafor.png" />');
sb.Append( '</td></tr></table><br/><br/>');
sb.Append( '<table class="t3">');
sb.Append( '<tr><th>Project owner:</th><td>' + pro['owner'] + '</td><td class="space"> </td><th>Report for period:</th><td>' + dr['period'] + '</td></tr>');
sb.Append( '<tr><th>Team members:</th><td>' + pro['team_members'] + '</td><td class="space"> </td><th>Status:</th><td>' + ps['name'] + '</td></tr>');
sb.Append( '<tr><th>Date of report:</th><td>' + dr['date'].ToString('dd.MM.yyyy') + '</td><td class="space"> </td><th>Report type:</th><td>Regular</td></tr>');
sb.Append( '</table>');
sb.Append( '<table class="t1"> <tr><th>Recent accomplishments:</th><td class="space"> </td><th>Upcoming activities:</th></tr> <tr><td>' + dr['recent_accomplishment'] + '</td><td class="space"> </td><td>' + dr['upcoming_activities'] + '</td></tr> </table>');
sb.Append( '<table class="t1"> <tr><th>Risks and issues:</th><td class="space"> </td><th>Counter-measures:</th></tr> <tr><td>' + dr['risks_and_issues'] + '</td><td class="space"> </td><td>' + dr['counter_measures'] + '</td></tr> </table>');
sb.Append( '<h3>Project description</h3></td><td style="text-align: right; width: 250px">');
sb.Append( '<p>' + pro['description'] + '</p></div>');
//add to the page
OGForm.AddControl(OGForm.CreateLiteralControl('lc1', sb.ToString()));
}
}
Note: The page uses also CSS styles, that we define in the webpart Script.