Telerik India wishes you happy New Year 2013

Telerik India wishes you very happy New Year 2013. We hope you will have healthy , happy and successful year ahead.

image

We are determined to help you in “Delivering more than Expected “. You will find us around all the community events and conferences in India.

We will create more blog posts and deliver 2 webinars each month in India time zone to expedite your learning and knowledge on various Telerik Products.

Once again we wish you joyful New Year. Let us work together in this year to “Deliver More Than Expected

Advertisements

How to work with Pie Charts in JavaScript based Application for Windows 8

In this post we will take a look on working with Pie Charts in JavaScript based Application for Windows Store. We will follow step by step approach in this blog post.

Step 1: Add References

Very first we will add Telerik JS and CSS files references in the project. If first time you are working with Rad Controls in Windows 8, I suggest you to read blog post to setup the environment

After adding the files in the project we need to refer them on the html file . Files can be referred as given in following code snippet.

<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

Step 2: Create a Chart

A Pie chart can be created by setting data-win-control attribute of a div as Telerik.UI.RadChart and setting series type as pie


<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [{
 type: 'pie',
 data : [

{value:30,category:'Math'},
 {value:20,category:'Physics'},
 {value:22,category:'Chemistry'},
 {value:28,category:'Economics'}

 ],
 lables :
 {
 visible:true
 }

 }
 ]}"

 />

&nbsp;

In above code snippet,

  • We are setting data-win-control attribute as Telerik.UI.RadChart
  • In data-win-options , series type is set as pie
  • In data-win-options data is set locally.
  • Data array contains two properties. They are values and categories

At this point if we go ahead and run the application, we will get an output something like below

image

Step 3: Configure More Pie Chart options

You can configure common options of char series as discussed in this blog post . Apart from common options you can configure options like following,

  1. colorField
  2. explodeField
  3. categoryFiled

Assume you have data source as following

image

You can configure these values for pie chart as following

image

On running you will pie chart as following. You will find that colours of categories have been changed.

image

You can explode a category as following. Even though in following example we are setting explode attribute with explode property in data array, you are free to set any property of data array as explode field by setting explodeField attribute as we set colorField.

image

On running you will pie chart as following.

image

In this we can work with pie charts. Below is the consolidated code of above discussion


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>TestDemoJavaScript</title>

<!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

 <!-- TestDemoJavaScript references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>

 <h1>Chart Demo</h1>

<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [{
 type: 'pie',
 data : [

{value:30,subject:'Math',color :'red',exlode : 'true'},
 {value:20,subject:'Physics',color:'blue',explode:'false'},
 {value:22,subject:'Chemistry',color:'green',explode:'true'},
 {value:28,subject:'Economics',color:'gray',explode:'true'}

 ],
 field: 'value',
 categoryField: 'subject',
 colorField :'color',
 lables :
 {
 visible:true
 },
 tooltip :
 {
 visible : true
 }

 }
 ]}"

 />

&nbsp;

</body>
</html>

&nbsp;

Future Post

In this post we learnt working with pie Charts. We focused on only one type of series. In further posts we will explore various series type and working with remote data in the Rad Chart. I hope you find this post useful. Thanks for reading.

How to set background image of Kendo UI Mobile View

In this post we will take a look on how to set background image of Kendo UI Mobile view. Let us say we have a view as following,

image

This Kendo UI Mobile View is created as following,


<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<p>
This is View
</p>
</div>

Now you have a requirement to put a background image in this view and set the colors of the texts on the view. You can do it by setting style of div in the CSS. This can be done as following


#tabstrip-home .km-content{

background-image: url('../appimages/backgroundimage.jpg');
background-size: auto 100%;
background-repeat: repeat;
color : white;

}

In above code snippet ,

  1. Tabstrip-home is id of the view. Background image of this particular view will be set to an image.
  2. Background image is inside the folder appimages. We are setting backgroundimage.jpg as the background of the view.
  3. Image will repeat itself as background of the view.
  4. Text of the view content has been set to white.

After setting style view should look like as following image,

image

In this way you can set an image as background of KendoUI Mobile View. I hope you find this post useful. Thanks for reading.

Create APK package for Google Play using Icenium Graphite

In this post we will take a look on creating APK package for submission to Google Play using Icenium. Let us follow following walkthrough to create APK package,

To create package, Right click on the project and select Publish to create APK package,

clip_image001

In the next window click on Google Play. You will get an error message that there is no certificate or Code Sign Identity found for Google Play Signing.

image

To solve this issue click on the option in Icenium Graphite IDE.

image

In Users Option window select General tab and then Certificate Management option.

image

In Certificate Management option you will get an option to create New Certificate. Click on Create New to create new certificate. You can either use

  1. Self-signed identity
  2. Request for the Certificate

Let us go ahead and request for the Self-signed identity. In Self-signed identity window you need to provide following vital information,

  • Country
  • Type of the self-signed identity. In this choose Google Play as option. Other option available is Generic.
  • Configure Start Date and End Date

image

After creating Self-signed identity you can find them in Cryptographic Identities section. Below you can see that I have created three self-signed identity.

image

After creating Self-signed identity right click on the project and select properties in the properties windows, select Android tab. Here you can set various application properties for android platform.

image

From the Code Signing Identity drop down, select any existing certificate to associate it with the application.

image

You can set icons, application permissions for Google Play here. After associating self-signed identity again right click on the project and select publish option. You will get Application Validation Status message as OK.

image

Next click on the Build button to create the package. Icenuim will build the application in cloud and ask you to give a name of the apk package and save it locally.

image

In this case we saved APK with name tearchapp. Now you can submit the APK file to Google Play to publish application. I hope you find this post useful. Thanks for reading.

Make a Call on Icenium using PhoneGap

In this post we will take a look on making a call using PhoneGap in a Hybrid application creating using Icenium. Let us create a view like following to make a call,

image

Above view can be created using following code snippet,


<div data-role="view" id="callview" data-title="Make a Call">
<h1>Call this number!</h1>
<div id='Div1'>
<label for="txtName" style="display: inline-block;">Enter Phone Number to Call:</label>
<input type="text" id="Text1" value="" />
</div>
<div>
<a id="A1" data-role="button" data-click="callfunction" data-icon="action">Make A Call</a>
</div>
</div>

On click of Make a Call button a call can be done as following,


function callfunction() {

var phntocall = document.getElementById('txtPhoneNumber1').value;
window.location.href = "tel:" + phntocall;

}

In above code snippet we are reading phone number. After that using tel: to make a call. It will open native Call application with configured phone number to make a call.

I hope you find this post useful. Thanks for reading.

How to fetch data of selected item in KendoUI Mobile ListView

In this post we will take a look on how to read data value of selected item in KendoUI Mobile ListView. Let us say you have a ListView as given in following image,

image

As you see that there is button in each ListView item and on click of the button you need to fetch the selected phone number to make a call.

Above ListView can be created as following,


<div data-role="view" id="policestationview">

<ul data-role="listview"
id="policestationlistview"
data-style="inset"
selectable="true"
data-source="somedata"
data-template="sometemplate"
data-click="somefunction">
</ul>

</div>

In above view

  • Data source is set to somedata
  • Data Template is set to sometemplate
  • Most importantly data-click is set to a JavaScript function

Now in function you can fetch selected item on click event of ListView as following,

image

In above code snippet phonenumber and name is properties of the array set as the data source of the listview. For your reference datasource is as following. You can see that name and phonenumber are properties of the array used to create datasource.


var dataarray = [

{ name: "Darya Ganj", phonenumber: " 01123274683", group: "CENTRAL" },
{ name: "Kamla Mkt", phonenumber: "01123233743", group: "CENTRAL" },
{ name: "I.P. Estate", phonenumber: "01123318474", group: "WEST" }

];

var somedatasource = new kendo.data.DataSource.create(
{
data: dataarray,
group: "group"
});

</script>

In this way you can fetch data of slecetd itm of KendoUI Mobile ListView. I hope you find this post useful. Thanks for reading.

How to work with RadChart in JavaScript based Application for Windows 8

In this post we will take a look on working with RadChart in JavaScript based Application for Windows Store. We will follow step by step approach in this blog post.

Step 1: Add References

Very first we will add Telerik JS and CSS files references in the project. If first time you are working with Rad Controls in Windows 8, I suggest you to read blog post to setup the environment

After adding the files in the project we need to refer them on the html file . Files can be referred as given in following code snippet.


<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

Step 2: Create a Chart

A chart can be created by setting data-win-control attribute of a div as Telerik.UI.RadChart.

image

At this point if we go ahead and run the application, we will get an output something like below

image

Step 3: Add Series

We can add series to a chart in two ways

  1. Declaratively in HTML
  2. Programmatically in JavaScript

Declaratively a series can be added by setting value of data-win-options. In following code snippet we are creating one series in the chart.


<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Runs', data: [1000, 860,425,956,320]}

]
 }"
 />

&nbsp;

Series takes three parameters

  1. Type of the series
  2. Name of the series
  3. Data to be displayed in the series

In above code snippet, we are creating column type of series with name Runs and 5 data points. At this point if we go ahead and run the application, we should get a chart as following.

image

Programmatically chart series can be created as following,


var performancechart = document.getElementById("performancechart").winControl;
 var wicketcolumnseries = new Telerik.UI.Chart.ColumnSeries();
 wicketcolumnseries.data = [30,100,67,123,49];
 wicketcolumnseries.name = "Wicket";
 wicketcolumnseries.color = "green";
 wicketcolumnseries.visibleInLegend = true;
 performancechart.series.push(wicketcolumnseries);
 performancechart.refresh();

&nbsp;

In above code snippet following tasks has been performed

  1. Line 1: Getting reference of Chart as win control
  2. Line 2: Creating series of type Column
  3. Line 3: Setting data for the column series
  4. Line 4: Setting name of the column series
  5. Line 5: Setting colour of series
  6. Line 6: Making sure series is visible in Chart Legend
  7. Line 7: Pushing created column series to the series collection of chart
  8. Line 8: Refreshing the chart

Let us add one more series to chart declaratively in HTML.


<h1>Chart Demo</h1>
 <div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Match', data: [30, 25,22,28,25]},
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320]}

],

 }"
 />

&nbsp;

So far we have added three series to chart. At this point of we go ahead and run the application then we should get a chart as following

image

There are many other types of series. We will explore them one by one in further posts.

Step 4: Add Category Axis

Category Axis can also be added in two ways,

  1. Declaratively in HTML
  2. Programmatically in JavaScript

In HTML we can add Category Axis as following


<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Match', data: [30, 25,22,28,25]},
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320]}

],
 categoryAxis: {
 categories: [2008, 2009, 2010, 2011, 2012]
 }

 }"
 />

&nbsp;

In JavaScript we can add Category Axis as following code snippet,

image

On running we will find chart with Category Axis as following,

image

Step 5: Working with Tooltip

We can configure tooltip at two levels

  1. At the chart level
  2. At the series level

Chart level tooltip can be configured as following snippet,

<div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 { type: 'column', name: 'Match', data: [30, 25,22,28,25]},
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320]}

],
 categoryAxis: {
 categories: [2008, 2009, 2010, 2011, 2012]
 },
 tooltip: {
 visible: true
 }

 }",

 />

&nbsp;

At the series level we can configure tooltip as following

image

Now on running of the application we will find that when we move mouse on the chart values of the series are displayed as tooltip.

Final chart should look like as following,

image

For your reference full source code is given below,


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>TestDemoJavaScript</title>

<!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!--Telerik References -->
 <script src="/Telerik.UI/js/jquery.js"></script>
 <script src="/Telerik.UI/js/ui.js"></script>
 <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
 <link href="/Telerik.UI/css/common.css" rel="stylesheet" />

 <!-- TestDemoJavaScript references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>

 <h1>Chart Demo</h1>
 <div id="performancechart" data-win-control="Telerik.UI.RadChart"
 data-win-options="{
 series: [
 {
 type: 'column',
 name: 'Match',
 data: [30, 25,22,28,25],
 tooltip: {
 visible: true

 }
 },
 { type: 'column', name: 'Runs', data: [500, 360,125,456,320],}

],
 categoryAxis: {
 categories: [2008, 2009, 2010, 2011, 2012]
 }

 }",

 />

&nbsp;

</body>
</html>

&nbsp;

Future Post

In this post we learnt basics of working with Rad Chart. We focused on only one type of series. In further posts we will explore various series type and working with remote data in the Rad Chart. I hope you find this post useful. Thanks for reading.

Send SMS on Icenium using PhoneGap

In this post we will take a look on sending SMS using PhoneGap in a Hybrid application creating using Icenium. Let us create a view like following to send SMS,

image

Above view can be created using following code snippet,


<div data-role="view" id="messageview" data-title="Send SMS">
<h1>Send Messages!</h1>
<div id='helloWorldInput'>
<label for="txtName" style="display: inline-block;">Enter Phone Number to send message:</label>
<input type="text" id="txtPhoneNumber1" value="" />
<input type="text" id="txtPhoneNumber2" value="" />
</div>
<div>
<a id="submitButton" data-role="button" data-click="sayMessage" data-icon="compose">Send Message</a>
</div>
</div>

On click of Send Message button a SMS can be send as following,


function sayMessage() {
var phn1 = document.getElementById('txtPhoneNumber1').value;
var phn2 = document.getElementById('txtPhoneNumber2').value;
var phonenumbers = phn1 + "," + phn2
window.location.href = "sms:" + phonenumbers + "?body=" + "hello test message";
}

In above code snippet we are reading two phone numbers and concat them with comma. After that using sms: to send the message. It will open native Message application with configured phone numbers and message body.

I hope you find this post useful. Thanks for reading.

Testing Multiple Alerts Dialog in Test Studio

Recently I was at a customer place and there was a question popped up. Question was “How Test Studio handles multiple Alerts” or rather question was “Can Test Studio handles multiple Alerts? “. Answer is yes, Test Studio can handle Multiple Alerts very smoothly.

To demonstrate this I have created a simple application. This application is having one button and on click event of the button we are generating 10 alerts.


<!DOCTYPE html>
<html>
<head>
<title>Demo Multiple Alerts</title>
<link href="demo.css" rel="stylesheet" />
<script type="text/javascript" >
function GenerateMultipleAlerts(e)
{

for (var i = 1 ; i <= 10 ; i++) {

var displayMessage = "Alert Message " + i;
alert(displayMessage);

}

}
</script>
</head>
<body>
<h1>Multiple Alerts Testing</h1>

<button id="addbutton" onclick="GenerateMultipleAlerts()">  Generate Multiple Alerts </button>
</body>
</html>

Let us record testing steps of this web application. After recording you will find that all the 10 alerts handle has been recorded.

clip_image002

After recording the test, execute it in browser of your choice. You will find all alerts handle has been passed successfully.

clip_image003

We can conclude this post by saying Test Studio handles multiple alerts very gracefully. Thanks for reading this post.

Kendo DateTimePicker Wrapper for ASP.NET MVC

Overview:

This is the fifth post in a series on Kendo UI wrappers for ASP.NET MVC. In this post we will look at one more wrapper named DateTimePicker. Before we get on with DateTimePicker Kendo wrapper, if you are new and want to learn more about Kendo Wrappers for ASP.NET MVC, I suggest you take a look at “Jumpstarting Development with Kendo UI for ASP.NET MVC” by Abhishek Kant. The jumpstarting blog post will give you the basics on how to get started with Kendo for ASP.NET MVC. Here is the post which has links to all other blog post of the series.

What is DateTimePicker control?

DateTimePicker is a control which allows end user to select a date & time from a calendar & time picker. It also supports to input the data directly. The DateTimePicker control supports customizing the month view by providing a custom template. The Minimum date, Maximum date, the view to start the calendar with and the time interval on the time picker, are all configurable through options.

image

Instantiating a DateTimePicker:

The first step in using a date time picker is to instantiate it on the page. To instantiate the control we make use of the DateTimePicker builder available as part of the Kendo Wrappers for ASP.NET MVC. Below is the code snippet which shows how to instantiate the control:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.HtmlAttributes(new { style = "width:230px"})
 )

Here is the output of the above code:

image

What we just did was to instantiate a DateTimePicker control on the page and we gave it name. When it is rendered you will basically see a textbox to enter the date and time, a calendar button and the clock button. The calendar button when clicked will allow you to select a date and when you click the clock button will allow you to select the time interval.

Set default value to control:

As you can see from the previous section, when the control is instantiated the textbox is empty. That is expected as we never set a default value to the date time picker control. The calendar when opened will always show the current date highlighted but that is not a value until use clicks on it. In order to set the default value on the control, we will use the Value() method. The Value() method takes DateTime instance or a date in string format, which will be set as the controls value. Here is the code snippet to set the default value:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.Value("12/12/2012 14:30")
.HtmlAttributes(new { style = "width:230px"})
)

And here is the output of the above code snippet:

image

Formatting controls value:

Previous section we saw how to set the value of the control. The default format in which the date and time is displayed is “MM/dd/yyyy hh:mm tt” i.e. Month, Day, Year, Hour, Minutes and Meridian. Lets say we want to change the format in which the date and time is shown. The control provides the options to modify the format through Format() method. The Format() method takes a string which is nothing but your new format for date and time display. Here is a code snippet to set the format:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.Value("12/12/2012 14:33")
.Format("On MM/dd/yyyy @ hh:mm tt")
.HtmlAttributes(new { style = "width:240px"})
)

Here is the output of the above code change:

image

As you cane see I just provided a format “On MM/dd/yyyy @ hh:mm tt” and this translates the value to “On 12/12/2012 @ 02:33 PM”. So this is a handy setting to keep in mind.

Putting constraints on date selection:

With date picker, one of the common requirement that you will have to take care is to restrict the dates a user can select. You may want to set a minimum date and maximum date restriction on the calendar itself. The date time picker control provides this option through Min() and Max() methods. Both Min and Max methods support two overloads – one takes a string format of a date and another takes an instance of DateTime. Here is the code snippet to put restrictions on the calendar:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.Value("12/12/2012 14:33")
.Min("12/10/2012").Max("12/21/2012")
.Format("On MM/dd/yyyy @ hh:mm tt")
.HtmlAttributes(new { style = "width:240px"})
)

image

As you can see the dates are now restricted and the user can select from only the dates allowed to select.

Setting the Time interval:

The time picker component in this control, by default, sets the time interval between hours to 30 minutes. You have the flexibility to control the interval between the hours by using the Interval() method. The Interval() method takes a integer and will set the interval based on this value. Lets say I want to set the interval to 15 minutes, find below the code snippet to do that:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.Value("12/12/2012 14:30")
.Min("12/10/2012").Max("12/21/2012")
.Interval(15)
.Format("On MM/dd/yyyy @ hh:mm tt")
.HtmlAttributes(new { style = "width:240px"})
)

And here is the output of the above code snippet:

image

As you can see the interval between the hour is now set to 15 minute interval and this is through the Interval() setting we have in the code.

Handling Events:

The date time picker control supports client side event handling. The control exposes 3 events namely Open, Close and Change. Note that all these are client side events and the handlers will be client side event handlers. Here is the code snippet to listen to events and provide the event handlers to those events:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.Value("12/12/2012 14:30")
.Min("12/10/2012").Max("12/21/2012")
.Interval(15)
.Format("On MM/dd/yyyy @ hh:mm tt")
.HtmlAttributes(new { style = "width:240px"})
.Events(e => e
.Open("kdatetimepicker_open")
.Change("kdatetimepicker_change")
.Close("kdatetimepicker_close")
)
)

<script>
function kdatetimepicker_open() {
//Handle the open event
}

function kdatetimepicker_close() {
//Handle the close event
}

function kdatetimepicker_change() {
//Handle the change event
}
</script>

Access control from client side:

So far we have seen how to instantiate and configure settings on the control from server side. And the configuration was done using the Kendo ASP.NET MVC wrapper. Once the control is rendered on the client side what if you need to perform some operation on the DateTimePicker control itself. The Kendo UI JavaScript APIs allow us to grab the control on the client side and access its properties and methods. Let’s say on date change by user, we want to get the newly selected value and prompt it. Here is the code snippet to do that:


@(
Html.Kendo().DateTimePicker()
.Name("kdatetimepicker")
.Value("12/12/2012 14:30")
.Min("12/10/2012").Max("12/21/2012")
.Interval(15)
.Format("On MM/dd/yyyy @ hh:mm tt")
.HtmlAttributes(new { style = "width:240px"})
.Events(e => e
.Change("kdatetimepicker_change")
)
)
<script>
function kdatetimepicker_change() {
var dateTimePicker = $("#kdatetimepicker").data("kendoDateTimePicker");
alert(dateTimePicker.value());
}
</script>

As you can see, we first listen to on change event and in the event handler for change we use jquery selector to get the element by its id and use the jquery data() method to get the Kendo DateTimePicker control. Once we get hold of the control, it supports the value() method which will give us the current selected value. Here is the output of the above code:

image

Summary:

In this post we looked at one more Kendo Wrapper namely DateTimePicker. This control makes a perfect match for scenarios where you need to present both the date and time selection. We saw how easy it was to work with the control from the server side. With just a few settings we can get this control working according to our needs.

How to document Test Script in Test Studio

In this post we will take a look on documentation of Test Steps in Test Studio. On selection of a Test in project, you can see all the steps of the Test.

clip_image002

To create documentation of Test, select Test and from the ribbon select Storyboard

clip_image004

In Storyboard you can see screen short of all the test steps.

clip_image006

In Storyboard on the top you get option to “Export Storyboard as HTML documentation

clip_image008

You will be asked to select path to save extracted document.

clip_image009

After successful extraction, Test Studio will prompt you to view the exported test.

clip_image010

In this way you can create document of a Test in Test Studio. I hope you find this post useful. Thanks for reading.