Products
    Contact Support Additional Learning Monthly Product Updates

    Forsta Reportal Support

    All the topics, resources needed for Forsta Reportal.

    Render Scripts

    • Last updated:

    Articles in this section

    See more
    In this article

      Render scripts can be defined for the visual component types, to set properties for the components dynamically.

      Aggregated Table

      To enter the script editor, right-click an appropriate Aggregated Table in the Report Tree and select Script > Render.

      In the example below, the Table script is used to dynamically change the aggregated table based on for example parameter values or user information.

      Changing numbers of decimals:

      if(!state.Parameters.IsNull("p_table_dec")
         {
            var pv : ParameterValueResponse =state.Parameters["p_table_dec"];
            table.Decimals = pv.NumericValue;
         }

      In the following examples, the Table script is used to dynamically add and change headers for aggregated tables. If a table already has a banner or a parameter header, this script is called after the banner header is substituted with the header from within the banner and the parameter headers are substituted with a header for the current value for that parameter.

      Adding a header:

      var hf : HeaderFormula = new HeaderFormula();
      hf.Type = FormulaType.Expression;
      hf.Expression = "4";
      table.RowHeaders.Add(hf);

      Changing a header:

      var hf : HeaderFormula = table.RowHeaders[0];
      hf.Expression = "9";

      Note: If you add a script to a table, caching is disabled for that table.

      Building a simple static Table:

      //Clearing the cache on a table
      table.Caching.Enabled=false; 
      //Linking the script Project to the datasource ID
      var project : Project = report.DataSource.GetProject("ds0"); 
      //Linking the question from the project as a Questionnaire Element
      var qe : QuestionnaireElement = project.CreateQuestionnaireElement("q4");
      var qf : QuestionnaireElement = project.CreateQuestionnaireElement("q3");
      //Creating the Questionnaire Element into headers
      var colHeader : HeaderQuestion = new HeaderQuestion(qe);
      var rowHeader : HeaderQuestion = new HeaderQuestion(qf);
      /*----Removing the totals from the column header question is based on a Boolean function-------*/
      colHeader.ShowTotals = false;
      //Adding the Header Question to the column header
      table.ColumnHeaders.Add(colHeader);
      //Adding the other Header Question to the row header
      table.RowHeaders.Add(rowHeader);

      Building a simple static table

      Building a static Table with masking:

      //Clearing the cache on a table
      table.Caching.Enabled=false;
      //Linking the script Project to the datasource ID
      var project : Project = report.DataSource.GetProject("ds0");
      //Linking the question from the project as a Questionnaire Element
      var qe : QuestionnaireElement = project.CreateQuestionnaireElement("q4");
      //New Entry:
      //Masking one answer out of the q4 answers
      var mask : MaskFlat = new MaskFlat(); //Declaring the mask
      mask.IsInclusive = false;  //false includes all precodes except for the selected one
      //True includes only the selected one
      mask.Codes.Add("5");     //Precode 5 is for "68 and older" in the answers
      colHeader.AnswerMask = mask;  //Attaching the mask to the Question Header
      //Creating the Questionnaire Element into headers
      var colHeader : HeaderQuestion = new HeaderQuestion(qe);
      //Adding the Header Question to the column header
      table.ColumnHeaders.Add(colHeader);

      Building a static table with masking

      Example – Building a dynamic Table with dynamically changed banners/categorizations:

      In this example, the table is changed depending on the parameter value selected by the user. By default, the most low condition in the script below is used when IsNull=TRUE, selecting "yes" displays banner 1 and selecting "no" displays categorization 1.

      if(state.Parameters.GetString("p_banner")== "1"){
      var project : Project = report.DataSource.GetProject("ds0"); //get datasource
      var ben : HeaderBanner = new HeaderBanner("ds0", "ban1"); //connect to banner
      table.ColumnHeaders.Clear();  //clear existing header
      table.ColumnHeaders.Add(ben); //add new header which is the banner
      }

      if(state.Parameters.GetString("p_banner")== "2"){
      var qCat : HeaderCategorization = new HeaderCategorization();
      qCat.DataSourceNodeId = "ds0";  //connect to datasource
      qCat.CategorizationId = "cat0"; //connect to categorization
      table.ColumnHeaders.Add(qCat);  //add new header which is the categorization
      }

      if(state.Parameters.IsNull("p_banner")){
      var beno : HeaderBanner = new HeaderBanner("ds0", "ban0"); //connect to banner
      table.ColumnHeaders.Clear();  //clear existing header
      table.ColumnHeaders.Add(beno); //add new header which is the banner
      }






      Figure 1 - Building a dynamic table with three possible cases illustrated:"default (not selected)", "yes" and "no"

      Verbatim Table

      Verbatim Table scripts are used to dynamically change the verbatim table based on for example parameter values or user information. A typical use of this script would be to dynamically set the questionnaire element of the table based on a parameter whilst allowing the user to change other properties of the verbatim table.

      To enter the script editor, right-click an appropriate Verbatim Table in the Report Tree and select Script > Render.

      Set questionnaire element:

      var q : QuestionnaireElement = state.Parameters["p_question"];
      verbatimTable.QuestionnaireElement = q;

      Set sorting property:

      verbatimTable.Sorting = VerbatimSortingType.RespondentId;

      Chart

      This script is used to dynamically change the chart based on parameter values or user information. One way of using charts scripts is to allow the report user to dynamically define the chart type and to set the chart type based on a parameter in a script.

      To enter the script editor, right-click an appropriate table in the Report Tree and select Script > Render.

      Setting a chart type:

      var charttype : String = state.Parameters.GetString("p_GraphType"); //Get the value of the selected answer
      //Set the default graph type if nothing is selected
      if(state.Parameters.IsNull("p_GraphType"))
      {
      chart.Series.SeriesDefault.ChartType = ChartTypes.StackedBar100;
      }
      //Run a switch statement to see what is selected and set the graph accordingly
      if(!state.Parameters.IsNull("p_GraphType"))
      {
      switch(charttype)
      {
      case "column":
      chart.Series.SeriesDefault.ChartType = ChartTypes.Column;
      break;
      case "bar":
      chart.Series.SeriesDefault.ChartType = ChartTypes.Bar;
      break;
      case "line":
      chart.Series.SeriesDefault.ChartType = ChartTypes.Line;
      break;
      default: //A default setting if codes above fail to match to prevent a error
      chart.Series.SeriesDefault.ChartType = ChartTypes.StackedBar100;
      }
      }

      When the type is not selected, the default chart type is used - show me:

      Figure 2 - The chart type is not selected, default type is used

      When the type is selected, the chart changes its look accordingly - show me.

      Figure 3 - The Line chart type is selected

      Setting the palette of a chart:

      The chart Palette is set to the value returned from a String parameter which has a Single question with the same precode names as the palette names.

      chart.PaletteName=state.Parameters.GetString("p_Palette") || "";

      When the color is not selected, the default colors are used - show me:

      Figure 4 - The chart palette is not selected, default colors are used

      When the palette is selected, the chart categories change their colors - show me.

      Figure 5 - The Rainbow palette is selected

      If you set up a report in which the user can choose which question is to be used in tables and possibly also add one or more questions to the column headers, you may have to implement some logic regarding the parts of a table that are to be included in the chart.

      Setting a part of a table:

      chart.RowHeaderMask.AddHeader("benchmark");

      The chart legend can be displayed or hidden depending on the selected parameter value.

      Disabling the legend:

      if(state.Parameters.GetString("banner")== "ban1")
      {
      chart.Legend.Enabled = false;
      }

      Setting a chart distribution type:

      if(!state.Parameters.IsNull("p_chart_distribution"))
      {
      var distribution : String = state.Parameters.GetString('p_chart_distribution');
      if (distribution == 'percent')
      {
      chart.Distribution = DistributionType.VerticalPercent;
      }
      else
      {
      chart.Distribution = DistributionType.Count;
      }
      }

      Gauge

      This script is used to dynamically change the gauge based on parameter values or user information. In this script you can add, remove or change exactly the same values as you can modify in the gauge style designer and gauge designer.

      To enter the script editor, right-click an appropriate gauge in the Report Tree and select Script > Render.

      Changing size of an existing circular gauge:

      var cg : CircularGauge = gauges.GetGauge("Gauge1");
      cg.Size.Height = 50;
      cg.Size.Width = 50;

      Hit List

      This script is used to dynamically change the Hit List based on for example parameter values or user information. In this script you can add, remove or change columns of the Hit List, and you can change the properties of the Hit List itself.

      To enter the script editor, right-click an appropriate hit list in the Report Tree and select Script > Render.

      Adding a column:

      var column : HitListColumn = new HitListColumn();
      column.QuestionnaireElement = state.Parameters["p_question"];
      hitlist.Columns.Add(column);

      Creating a Hit List:

      /*
      var p : Project = this.report.DataSource.GetProject("ds0");
      var ListQ = new Array();
      var orderQ = new Array();
      ListQ = new Array("Q4_Service");
      for(var i: int =0;i<ListQ.length;i++)
      {
      // Create a QuestionnaireElements based on the question ids
      var qe : QuestionnaireElement = p.CreateQuestionnaireElement(ListQ[i]);
      // Create some HitListColumn object
      var hle : HitListColumn = new HitListColumn();
      // Set the HitListColumn hle to be sortable
      hle.IsSortable = YesNoDefaultValue.No;
      // Set the HitListColumn hle to be searchable
      hle.IsSearchable = YesNoDefaultValue.No;
      // Set the HitListColumn hle to have an active link
      hle.IsLink = YesNoDefaultValue.Yes;
      // Associate the QuestionnaireElements  with the HitListColumns
      hle.QuestionnaireElement = qe;
      //Insert column into the Hit List
      hitlist.Columns.Insert(orderQ[i], hle);
      }
      */

      Text

      This script is used to dynamically set the text of a Text component based for example on parameter values or user information. If a Text component has a script, any text set in the property sheet of the component will be overwritten.

      To enter the script editor, right-click an appropriate text component in the Report Tree and select Script > Render.

      If your report is multilingual, you must also check the current language of the report to add the proper texts. One workaround for this may be to add your dynamic texts to an answer list in a multilingual Forsta Plus project and get the texts by using the project.GetQuestion() and question.GetAnswer methods.

      Adding some text based on current report language:

      if(report.CurrentLanguage == 9)
       text.Output.Append("XXX");
      else if(report.CurrentLanguage == 20)
			
       text.Output.Append("YYY");

      Adding some text based on an answer text:

      var p : Project = report.DataSource.GetProject("ds0");
      var q : Question = p.GetQuestion("q_text");
      var t : Answer = q.GetAnswer("text1");
      text.Output.Append(t.Text);

      You can use the Text component output to display text based on a string specified in an input box, or the user role, Report base, parameter value selected, customised text based on any selection and so on.

      Setting a text based on a string specified in the input control:

      var com = state.Parameters.GetString("p_text_input"); 
      //Connecting the string parameter to the input control
      var coma : String = ""; // creating an empty String

      coma += "Welcome to the report "; //Setting the text
      //Entering the name if the input box is used
      if(!state.Parameters.IsNull("p_text_input")){
      coma += com; //adding the name to the existing string
      }
      text.Output.Append(coma); //writing out to the text box

      For this example, an input control and a text component are added to a report page - show me.

      Figure 6 - An input control and a text component on a page

      A string response parameter is applied to the input component - show me.

      Figure 7 - Setting a String response type for the parameter

      The input control must have the Auto Submit property set - show me.

      Figure 8 - Setting the Auto Submit property for the input control

      The user name "John" specified in the input field, when submitted by pressing Enter, is appended to the text "Welcome to report" - show me.

      Figure 9 - The page view before submitting the string

      The "Welcome to report John" text is displayed on the page - show me.

      Figure 10 - The page view after submitting the string

      Setting a text based on a selected filter value:

      var filterValue : FilterValue = state.Filters.Get("ds0", "CustomerGroup");
      if (filterValue == undefined)
      {
      return;
      }
      text.Output.Append("CustomerGroup selected: " + filterValue.Value);

      List

      This script is used to dynamically set the text of a Text component based on multiple selected parameter values.

      To enter the script editor, right-click an appropriate text component in the Report Tree and select Script and then Render

      Displaying Selected Answer as text

      var multiResponseA : ParameterValueMultiSelect = state.Parameters["p_Channel"];
      var responseA : ParameterValueResponse;
      var name : String = " ";
      name += " Filters Applied ";
      if(multiResponseA != null)
      {
      for(var x : int = 0; x < multiResponseA.Count; x++)
      {
      responseA = multiResponseA[x];
      name += " "
      name += responseA.StringValue;
      }
      }
      text.Output.Append(name);

      For this example, a list component and a text component are added to a report page - show me.

      Figure 11 - A list component and a text component on a page

      A string response parameter with the Multi-select property enabled, which is linked to a Multi question in the data source is applied to the list component - show me.

      Figure 12 - Setting a String response type for the parameter

      The list control must have the Auto Submit property set - show me.

      Figure 13 - Setting the Auto Submit property for the list component

      The TV channels selected in the list control, are appended the text "Filters applied " - show me.

      Figure 14 - The page view before selecting the answers

      The "Welcome to report John" text is displayed on the page - show me.

      Figure 15 - The page view after selecting the answers

      Geochart

      Google Geocharts is a chart component that allows you to present data in a map for a continent, a country or a region. The map fills entire regions (typically countries) with colors corresponding to the values that you assign. You add Google Geocharts to a report as a widget using a Text component. The Google Geochart widget relies on the following Code Libraries being added to the Reportal report:

      • GoogleGeoChart,
      • GoogleDataTable,
      • JSONTableUtil,
      • DataSourceEnum.

      The Google Geochart widget can be configured for the report using an object that is passed in to the Geochart constructor. You can configure using these options:

      • Width – the width of the Geochart on the report page,
      • Height – the height of the Geochart on the report page,
      • SelectedGeo – an object defining the geographic question that will be presented in the map (see next slide),
      • SelectedMetric – an object defining the mteric values that will be presented in the map (see next slide),
      • CssClass – the .css class defining the style for the Geochart,
      • ClickEvent – a Javascript event that will be fired when the Geochart is clicked. Can for instance be used to implement filtering based on clicking a region in a map.
      • Datasource – the data source that includes the questions used for the Geochart data.

      SelectedGeo

      • Code – the question id of the question defining the geographic location
      • Label – the label that will be used for the geographic locations
      • Region – what map region you want to display in the map
      • Resolution – what resolution to display in the map (countries, states, etc)

      SelectedMetric

      • Code – the question id of the question defining the metric that will be presented in the map,
      • Label – the label that will be used for the metric,
      • Reverse – Boolean indicating whether the legend should be reversed for this question,
      • Decimals – the number of decimals you want to display.

      Example – Configuring a Geochart

       var googleChartConfig = {
         Width : 400,
         Height : 300,
         SelectedGeo :
            {Code : "world", Label : "The world", Region : "world", Resolution : "countries"},
         SelectedMetric :
            {Code : "weight", Label : "Respondent's weight", Reverse : true, Decimals : 1},
         CssClass : null,
         ClickEvent : null,
         Datasource : "ds0"
      }

      Wordcloud

      Word Cloud is a chart component that allows you to present verbatim input as a "cloud" of words, where the font sizes and font colors used depend on the frequency of the word in a text. The Word Cloud widget only presents pre-aggregated word counts; it does not perform any text analysis of its own. WordCloud can for example be used with Clarabridge data to visualize the Text Analytics output.

      Word Clouds are added to Reportal reports as a widget using a Text component.

      The Word Cloud widget relies on the following Code Libraries being added to the Reportal report:

      • WordCloud,
      • JSONTableUtil,
      • DataSourceEnum.

      The Word Cloud widget can be configured for the report using an object that is passed in to the WordCloud constructor. You can configure using these options:

      • selectedWordCloudBase
      • cssClass – the css class defining the style for the WordCloud
      • hoverValueOnWords
      • verticalEvery
      • delayedMode
      • fontFamily
      • baseFontSize
      • defaultFontSizes
      • defaultFontColors
      • datasource

      Example – Configuring a Word Cloud

       var wordCloudConfig = {
         SelectedWordCloudBase : {Code : "q5", Type : QuestionType.OpenText},
         CssClass : "wordcloudopen",
         HoverValueOnWords : false,
         VerticalEvery : 3,
         DelayedMode : true,
         BaseFontSize : "14px",
         FontColors :
         ["#064209","#A69810","#3D5606","#422610","#A3A610","#265606","#5A7635","#BDC86A","#4E411F","#06420C"],
         FontSizes :
         ["50%","70%","90%","110%","130%","150%","170%","190%","210%","230%"],
         Datasource : DS.Main
      }
      Was this article helpful?
      0 out of 0 found this helpful
      Return to top