Introduction

Each of the main modules has the ability to collect information from end-users and the project team through Surveys and Test Sign-Offs. To enable administrators to extend the presentation and/or functionality of the forms, the following technologies are supported by ManagementStudio:

The examples within this document are based on Application Surveys, however, the concept is identical for Test Sign-Offs.

TABLE OF CONTENTS

• Introduction
• PowerShell
  • Execution
  • Use
  • Example
• JavaScript
  • Execution
  • Use
  • Example
• Cascading Style Sheets
  • Execution
  • Use
  • Example
• Further Support

PowerShell

Execution

ManagementStudio's API provides the ability to customise ManagementStudios functionality and interact with external applications.  PowerShell code added to the survey executes when the user submits the form.

Use

Each page has the capability of running PowerShell code, which is triggered when the HTML form is submitted by the user.  A project-specific log file is created for each survey that contains a script and is stored in File Storage Path defined during installation.  For example, the File Storage Path is C:\Tmp and the code is run in the survey App Owner Survey in Project 1.  This would create a log file in:

C:\Tmp\Project_1\Logs\App Owner Survey - On Submit Script_April_2021.log

To add PowerShell to a Survey:

• Select a Survey in Administration > [Module] > Surveys
• Enter the code in the section labelled On Submit PowerShell (1)
• Click the Save Changes (2) button once finished to commit the changes

Example

A survey is issued to all application owners, requesting them to validate the information currently held about the application.  This is automatically issued when the application is moved to 2. Validating\Send Survey in the application lifecycle management workflow.  When the application owner completes the survey, ManagementStudio will move the application to 2. Validating\Survey Pass.

The following code is responsible for moving the application to a new process:

# Define the process to target
$ProSub = "2. Validating\Survey Pass" 

# Pass the module, target process and instance to Get-MSConfigProcess
$ProcessDetail = Get-MSConfigProcess -Module $ScriptArgs.Module -ProcessPath $ProSub  -InstanceIds $ScriptArgs.Items 

# Move the user to "2. Validating\Survey Pass"
Move-MSModuleItemProcesses -Module $ScriptArgs.Module -Ids $ScriptArgs.Items -ProcessId $ProcessDetail.ProcessId -SubProcessId $ProcessDetail.SubProcessId

The API requires the module name in order to interact with the appropriate object (application, user, device, etc). The script retrieves the module name using $ScriptArgs.Module which enables standardised code to be applied across different modules with little to no modification.

Add the code to the On Submit PowerShell panel (1) and click Save Changes (2).

For more information about working with the API in ManagementStudio, please refer to the PowerShell Examples section of the Knowledge Base.

JavaScript

Execution

Custom JavaScript is executed once the HTML is fully rendered.  Code is able to interact with existing HTML elements and traverse/modify the HTML Document Object Model (DOM).

Use

All elements within the survey are referenced by an internal HTML identifier, known as an element ID. Custom JavaScript should modify page elements by referencing the element ID.

Use a browser's developer tools or view the page source in a browser to identify the correct element ID to use in the script.  For example, the screenshot below shows the element ID for the field title App Vendor.

HTML element IDs are unique to each page and should be updated if code is copied between Surveys.

To add JavaScript to a Survey, enter the code in the section labelled Custom Javascript (1) and click the Save Changes (2) button once finished to commit the changes.

Example

This example will rename the App Name field title in the Survey to Application Name.  Although this should be achieved by using the Special Control Text for the field, this illustrates how objects are easily manipulated. 

The element ID for the App Name title for this particular survey is survey-label-id-63 (replace this with the correct ID of the element to be modified). The following image shows the form prior to modification:

The code to modify the field label is:

var headerText = document.getElementById("survey-label-id-63"); headerText.innerHTML = "Application Name";

Add the code to the Custom JavaScript panel (1) and click Save Changes (2).

The image below illustrates the changes made by the custom code.  Custom JavaScript is executed once a survey has fully loaded and is available for survey links that are already issued.

Cascading Style Sheets

Execution

Custom Cascading Style Sheets (CSS) definitions are slipstreamed into the form's HTML during the rendering process.  CSS enables an administrator to customise the presentation of all visual elements within a web page.

Use

All HTML style elements used in the surveys are referenced by an internal HTML identifier, known as an element ID.  Use a browser's developer tools or view the page source in a browser to identify the correct element ID to reference.  For example, the screenshot below shows the element ID for the Survey's Pass button.

HTML element IDs are unique to each page and should be updated if code is copied between Surveys.

To add custom style to a survey, add the CSS to the section labelled Custom CSS and click Save Changes at the top.

Example

This example will change the background colour of the Fail button from orange to dark red, and update the text to white.

The element ID for the button in this particular survey is survey-button-fail (replace this with the correct ID of the element to be modified). The following image shows the form prior to modification:

The custom style to modify the button colours:

#survey-button-fail {     background-color: darkred;     border-color: darkred;     color: white }

The button was referenced by its ID, survey-button-fail.  Add the code to the Custom JavaScript panel (1) and click Save Changes (2).

The image below illustrates the changes made by the custom style.

Some elements, such as buttons, have a border colour specified.

A list of HTML colour names for use within custom CSS can be found at https://support.migrationstudio.com/a/solutions/articles/14000122843.

Further Support

If you require further support, please visit ManagementStudio's Service Desk to search the knowledge base or create a new support ticket.