+ All Categories
Home > Documents > Sage SalesLogix Master’s...

Sage SalesLogix Master’s...

Date post: 30-Aug-2018
Category:
Upload: nguyennhan
View: 220 times
Download: 0 times
Share this document with a friend
58
Sage SalesLogix Master’s Series Client-Side Coding Techniques CERTIFIED STUDENT CURRICULUM SAGE LEARNING SERVICES Sage SalesLogix v7.5 - SP2 02122010 Version 1.0
Transcript
Page 1: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix Master’s SeriesClient-Side Coding Techniques

CERTIFIED STUDENT CURRICULUMSAGE LEARNING SERVICES

Sage SalesLogix v7.5 - SP202122010 Version 1.0

Page 2: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

NOTICEThis document and the Sage SalesLogix software may be used only in accordance with the accompanying Sage SalesLogix End User License Agreement. You may not use, copy, modify, or transfer the Sage SalesLogix software or this documentation except as expressly provided in the license agreement.

Visit our Web site at www.sageu.com/saleslogix to learn about training classes that are added throughout the year.

Information in this document is intended solely as general information with respect to common business issues and is not to be construed as professional advice. It is always best to consult a tax or accounting professional for all tax and account related questions. THE INFORMATION HEREIN IS PROVIDED “AS IS” AND ALL WARRANTIES ARE EXPRESSLY DISCLAIMED, INCLUDING BUT NOT LIMITED TO ANY WARRANTY: OF MERCHANTABILITY; OF FITNESS FOR ANY PARTICULAR PURPOSE; OF NON-INFRINGEMENT OF ANY PROPRIETARY RIGHT OF ANY THIRD PARTY IN ANY COUNTRY; OTHERWISE ARISING OUT OF ANY PRODUCT, PROPOSAL, SPECIFICATION OR SAMPLE; AND ANY WARRANTY THAT THE DOCUMENT IS ERROR FREE. No license, express, implied, by estoppel or otherwise, to any intellectual property right is granted by this document. Sage Software may make changes to the information in this document at any time, without notice. Recipient is solely responsible for assessing the suitability of the information and assumes all risk of use.

© 2010 Sage Software, Inc. All rights reserved. Sage Software, Sage Software logos, and the Sage Software product and service names mentioned herein are registered trademarks or trademarks of Sage, or its affiliated entities. All other trademarks or registered trademarks are the property of their respective owners.

February 12, 2010 02122010

Page 3: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Contents

ContentsWelcomeAbout the Sage SalesLogix Master’s Series . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Earn an M.S. Degree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Course Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Sage University . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Document Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

The Training Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Lesson 1JavaScript Exploration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Key Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Client-Side Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Spooling Data from the Server to the Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Explore a JavaScript Library (Ext JS) inside Visual Studio . . . . . . . . . . . . . . . . . . . . 11

Create a Custom Project that Spools Static Data from Server to Client . . . . . . . . . . 16

Create a Custom Project that Spools Dynamic Data from Server to Client . . . . . . . 22

Lesson 2JavaScript in SalesLogix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Key Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Client-Side Data Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Custom Smart Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Use Client-Side Code to Control the Client Post-Back . . . . . . . . . . . . . . . . . . . . . . . 29

Use Client-Side Code to Visually Validate Input and Control the Post-Back . . . . . . 34

Create a Custom Smart Part . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Validate Data on a Custom Smart Part . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Debug and Make Client-Side Code More Versatile . . . . . . . . . . . . . . . . . . . . . . . . . 49

© 2010 Sage Software 3

Page 4: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Contents Sage SalesLogix v7.5 - SP2

4 © 2010 Sage Software

Page 5: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Welcome

WelcomeAbout the Sage SalesLogix Master’s Series

Earn an M.S. Degree(M.S.: Master's of SalesLogix, that is!) You've already earned a core SalesLogix certification for Developer, Administrator, or Engineer—now what's next? Continue your education with the SalesLogix Master's Series. Sage University offers six Master's Series courses per year; graduates of a minimum of three courses can claim honors as a SalesLogix Master! No assessment required. To celebrate your mastery, Sage University provides all SalesLogix Masters with a custom achievement logo.

Course FormatMaster's courses focus on a single topic in a one-day, hands-on, virtual classroom setting. Here's what you get:

Electronic curriculum with step-by-step instructions.

Access to trainer-led recorded videos.

Access to a recorded interview with a resident subject matter expert on the topic.

Live trainer assistance through Web chat and teleconference.

Access to training workstation through a virtual lab.

© 2010 Sage Software Certified Student Curriculum 5

Page 6: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Sage University

Contact Sage University to keep your training momentum going long after your training class:

www.sageu.com/saleslogix

[email protected]

888-765-6662

Document Conventions

Throughout this workbook, pay special attention to notes and warnings.Additional

Follow SalesLogix Training on Twitter!

www.twitter.com/sageu_slx

Icon Description

Notes provide supplemental information to the surrounding text.

References provide locations to additional training material or documentation.

Tips provide information that may offer an opportunity for additional exploration.

Warnings provide information that may help prevent potential harm to your system.

6 Certified Student Curriculum © 2010 Sage Software

Page 7: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Welcome

The Training Environment

The environment used in this course supports the following specifications:

Windows 2003 Server SP2

Microsoft SQL Server 2005 Express

Internet Information Services (IIS) version 6.0

Microsoft .NET Framework version 3.5 with ASP.NET enabled

Microsoft ASP.NET 2.0 AJAX 1.0

To configure the training environment

The classroom images you use for your virtual lab need minor configuration before use. Modify the machine name from SRVXX to the number of the training worksation to which you are assigned (SRV01, or SRV02, SRV03, etc.), and then perform additional steps to make sure SData will work.

1. Open the SalesLogix Connection manager, and delete the connection. Add a new connection for SALESLOGIX_EVAL using your machine name.

2. Open the SalesLogix data link (from the Log On screen), and delete the data link. Add a new data for SALESLOGIX_EVAL link using the new connection that uses your machine name.

3. Using the new data link, log on to the SalesLogix Administrator as admin to SALESLOGIX_EVAL.

4. From the Nav Bar, click Users, and then double-click the admin user.

The User Profile window appears.

5. Select the Use Windows Authentication check box, and then browse to find srvxx\webdll. Click Add, and then click OK.

6. When prompted to import data from the windows profile, click No.

7. Click OK.

8. Browse to the deployment folder for the SData portal (C:\inetpub\wwwroot\sdata). Modify the connection.config file to point to your machine name. Repeat this step for the SalesLogix Client portal (C:\inetpub\wwwroot\slxclient).

9. Open a browser, and go to http://localhost:3333/sdata/$system/adapters to make sure SData is working.

© 2010 Sage Software Certified Student Curriculum 7

Page 8: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

8 Certified Student Curriculum © 2010 Sage Software

Page 9: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

Lesson 1JavaScript Exploration

Is there really room for JavaScript in the SalesLogix Web product? Why yes, thanks for asking! Before you look at the nitty-gritty with SalesLogix-specific examples, start by exploring some available JavaScript libraries and become familiar with different ways to move data between the server-side and the client-side—including integrating SData on a client-side application.

This lesson contains the following exercises:

Exercises in this Lesson

Explore a JavaScript Library (Ext JS) inside Visual Studio..........................................11Create a Custom Project that Spools Static Data from Server to Client......................16Create a Custom Project that Spools Dynamic Data from Server to Client.................22

© 2010 Sage Software Certified Student Curriculum 9

Page 10: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Key Concepts

The following summary provides the background you need to know before begin the exercises in this lesson. The terminology used most frequently in this book appears in bold text. If you want to learn more about these terms than what is provided in this summary, simply search for them on the Web or ask your trainer.

Client-Side CodeIn terms of the SalesLogix Web product, client-side code runs on the user’s machine inside the browser. Although you can use other languages, in most cases client-side code for the Web is written in JavaScript. JavaScript is easy to learn, and it provides a clean interface and seamless user experience.

When a user waits for a page to load, it’s usually because the client (browser) must wait for the Web server to process the code of the page or retrieve/send data—this is what we commonly refer to as a “post-back.” Instead of running that code on the server, you can design your applications to handle some of that processing on the client, which would reduce the load time because the request does not need to travel to the server and back

JavaScript LibrariesA JavaScript library is a collection of pre-written JavaScript that you can reference in your code. Using a library is an easy way for a developer to make use of some common—and more complex—functions without having to write them from scratch. JavaScript libraries also provide better cross-platform support for how the code renders in different browsers (Internet Explorer, Firefox, Chrome, and so on).

Although there are many JavaScript libraries available, SalesLogix uses jQuery, Ext JS, and YUI. For purposes of this class, we will incorporate pieces of jQuery and Ext JS.

Spooling Data from the Server to the ClientThe SalesLogix Web product provides a number of ways to retrieve data from the client—using named queries or SData with jQuery. However, this approach might not always be the easiest when we need to run the data on the client in order to use a JavaScript library or run a cool chart, for example. Moreover, as a developer, you are probably much more familiar with writing server-side code.

One approach to this challenge is to write server-side code to retrieve the data (using SData, entity model, or ADO.NET), and then spool out JavaScript to the client. In other words, you can write any JavaScript from the server-side, and send it to the client, provided you write it in the expected format.

10 Certified Student Curriculum © 2010 Sage Software

Page 11: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

Exercise 1.1: Explore a JavaScript Library (Ext JS) inside Visual Studio

To open the library in Visual Studio

1. Extract the ext-3.1.0.zip file from your ClassFiles\MastersSeries\ClientSide folder on your training workstation.

2. Open Visual Studio (Start > All Programs > Microsoft Visual Studio 2008 > Microsoft Visual Studio 2008).

3. Click File > Open Web Site.

The Open Web Site window appears.

4. Browse the File System to Desktop\ClassFiles\MastersSeries\ClientSide\ext-3.1.0, and then click Open.

NOTE: If prompted to convert the project to .NET Framework version 3.5, click No.

The solution explorer should show your ext-3.1.0 folder.

5. Expand the examples > chart folders. Right-click the charts.html file, and then click View in Browser.

Goal: Ext JS is a client-side JavaScript Framework used to create cross-browser, rich Web applications. It contains a lot of useful examples that you can incorporate into your SalesLogix customizations

Open the Ext JS library in Visual Studio.

Familiarize yourself with the code in one of the Ext JS examples to make your Ext JS file.

© 2010 Sage Software Certified Student Curriculum 11

Page 12: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

The file runs off the ASP.NET Development Server.

NOTE: Typically, you should not require a development environment to run client-side code; however, because this example uses Flash, running it locally does not allow us to see the full functionality of the example, which is why we open this example through the Visual Studio interface.

Internet Explorer is set as the default browser. Copy the URL in the browser window, and then open a Firefox browser session. Paste the URL into the Firefox browser. You should see 3 charts on the page.

NOTE: Firefox allows us to also use the Firebug plugin to investigate the code behind very easily. If you want to ensure that Firefox is the default browser in the training environment going forward, from the Tools > Options menu in Firefox, click the Advanced tab, and then select the Always check to see if Firefox is the default browser on startup check box. Then click Check Now, and then click Yes. Click OK.

12 Certified Student Curriculum © 2010 Sage Software

Page 13: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

To modify the example chart files to make your own chart

1. In the Solution Explorer in Visual Studio, double-click the charts.html file and the charts.js file to open them in the workspace.

2. In the charts.html file, remove extra code that we will not need.

a. Delete the code that defines common styles:

<!-- Common Styles for the examples -->

<link rel-"stylesheet" type="... />

b. Delete the code that defines the style sheet:

<style>...</style>

c. Delete the code that defines the heading and the paragraph text:

<h1>Charts</h1>

<p>The js is not minified...</p>

d. Click Save.

3. In the charts.js file, remove extra code that we will not need.

a. Delete the code that defines extra samples for the 2nd chart:

// extra simple

new Ext.Panel ({...});

b. Delete the code that defines extra samples for the 3rd chart:

//more complex with a custom look

new Ext.Panel ({...});

c. Click Save.

4. Toggle back to the charts.html page open in the Firefox browser, and then click Refresh.

© 2010 Sage Software Certified Student Curriculum 13

Page 14: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

You should now only see one chart on the page.

5. Toggle back to the charts.js file to modify the data points.

a. Delete a few rows of data inside the data [] set:

b. Delete the views field and from the data definition:

c. Click Save.

6. Toggle back to the charts.html page open in the Firefox browser, and then click Refresh.

Delete

Delete

14 Certified Student Curriculum © 2010 Sage Software

Page 15: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

You should now only see three points plotted on the chart.

Now you can see how easy it is to manipulate the data in the store as long as you know how to format the data. Let’s make this example even easier by taking the code from the chart.js file, and pasting it directly inside the chart.html file to eliminate the need for the include.

7. In the charts.js file, select the code starting from Ext.chart.Chart.CHART_URL to the final )};.

8. Toggle to the charts.html file, and then delete the <script src="charts.js"></script> reference to the charts.js file.

9. Make a new <script language="javascript"></script> placeholder for the code inside the page’s head, and then paste the code inside the new placeholder.

10. Click Save.

11. Toggle back to the charts.html page open in the Firefox browser, and then click Refresh.

You should see the same chart as before, but behind the scenes, all code resides in one file.

Paste the copied code here.

Delete

© 2010 Sage Software Certified Student Curriculum 15

Page 16: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Make surVisua

Exercise 1.2: Create a Custom Project that Spools Static Data from Server to Client

To create a new Web site project in Visual Studio

1. Open a new instance of Visual Studio (Start > All Programs > Microsoft Visual Studio 2008 > Microsoft Visual Studio 2008).

2. Click File > New > Web Site.

The Open Web Site window appears.

3. For the location, browse the File System to Desktop, and then create a new folder called SDatatoEXTjs. Click OK.

A new folder appears on your desktop with the default Web site files. In Visual Studio, the Default.aspx file opens in the workspace.

Goal: The Ext JS examples keep data and client-side code together. Experiment with ways to separate data from the client-side code—in other words, store data on the server-side, and then spool it out to the client browser before the page loads.

Create a new Web site project in Visual Studio.

Move the data store away from the rest of the client-side code, and instead include it as a string in the page_load of the server-side code.

e to pick l C#.

16 Certified Student Curriculum © 2010 Sage Software

Page 17: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

4. Prepare the Default.aspx file by eliminating some of the default code:

5. Toggle to the other instance of Visual Studio you have open from the previous exercise. (If you closed it, open it in a new instance of Visual Studio now.)

6. Select and copy all the code from the modified charts.html file.

7. Toggle back to the Default.aspx page in the other Visual Studio instance, and then paste the code at the top of the page, directly under the first line of code.

After pasting, you should have two leftover lines of code from the original Default.aspx file at the bottom of the page.

8. Overwrite the <head> tag from the copied code with the leftover <head runat="server"> tag.

9. Paste the leftover <form id="form" runat="server">, and paste it directly below the <body> tag.

Delete

Paste

© 2010 Sage Software Certified Student Curriculum 17

Page 18: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

10. Add a closing </form> tag just above the </body> tag.

11. Click Save.

12. Add the Ext JS library references.

a. Using Windows Explorer, open the ClassFiles\MastersSeries\ClientSide folder.

b. Drag-and-drop the ext-3.1.0 folder on top of the project name in the Visual Studio Solution Explorer.

The entire ext-3.1.0 folder is added to the Solution Explorer in Visual Studio.

c. Within the Default.aspx page, update all of the ext resources to use the new path.

18 Certified Student Curriculum © 2010 Sage Software

Page 19: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

d. Click Save.

13. From the Solution Explorer, right-click the Default.aspx file, and then click View in Browser.

You should now the same chart you used in the previous exercise.

Although we are running the page server-side, the data is

still handled client-side. You can verify this if you open Firebug, and look at the rendering of

the code: None of the server-side code shows up.

Note also that we are still using static (hard-coded) data. We could use this Default.aspx page inside the SalesLogix Client at this point, but first we want to

modify it so it can handle dynamic data.

© 2010 Sage Software Certified Student Curriculum 19

Page 20: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

To spool JavaScript from the Server to the Client

1. Open the Default.aspx page in your SDatatoEXTjs Visual Studio project.

2. Comment out the code for the data store, and then copy it to your Office Clipboard.

3. From the lower, left corner of the workspace, click the Design tab, and then double-click to see the code behind (or just open the Default.aspx.cs file from the Solution Explorer).

You should now have a Page_Load code stub so you can build the data into a string in order to spool it from the server. Keep in mind that the Page_Load fires before anything else gets sent to the browser, before any client-side code runs. Ext JS doesn’t even run until the page is done loading, so we need to first spool the data out and register it with the browser before Ext JS can work with it.

4. Paste the commented data store code into the Page_Load code stub so you can use it for a reference.

The code for the data will go here.

20 Certified Student Curriculum © 2010 Sage Software

Page 21: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

5. Build the string to contain the JavaScript for the data, and then register it on the client.

6. Click Save.

7. Toggle back to the Web browser, and click Refresh.

You should now the same chart loaded with the same data.

This line of code takes the string we pass and registers it on the

client as a client script code block.

For now we are just re-rendering the same data as a string. Later we will build the data using the database or a data store.

This time, the data for the cart comes from the server-side. You can verify this if you open Firebug, and look at the rendering of the code: See a new script tag appears that spools out to the client-side.

© 2010 Sage Software Certified Student Curriculum 21

Page 22: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Exercise 1.3: Create a Custom Project that Spools Dynamic Data from Server to Client

To add an item to the project to help with SData

1. In Visual Studio, right-click the SDatatoEXTjs project from the Solution Explorer, and click Add ASP.NET Folder > App_Code.

2. Right-click on the new App_Code folder from the Solution Explorer, and then click Add Existing Item.

3. In the Add Existing Item window, browse to the ClassFiles\MastersSeries\ClientSide folder, and then double-click the SDataHelper.cs file.

4. From the Solution Explorer, double-click the new SDataHelper.cs file to open it in the workspace.

On your own, inspect the code. It contains several SData helper functions that allows us to talk quickly to an SData feed for this training example.

Goal: Now that you have data separated from client-side code, experiment with ways to use a dynamic data store—in other words, data that is not already hard-coded into the server-side code.

Prepare the project to use SData.

Create the dynamic data store using SData.

Deploy the SData portal, and then test the application.

22 Certified Student Curriculum © 2010 Sage Software

Page 23: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

Expose theProducthrough

Create a dthe SData

Read the fdata set, athrough itJavaScript

Handle the remove thethe last line

s

Register ththe

To create the data store

1. From the ClassFiles\MastersSeries\ClientSide folder, right-click the Code Snippet 1 code file provided by your trainer, and click Edit with Notepad++.

2. Copy the code from Line 21 to the end.

3. Inside the Default.aspx.cs page in the Visual Studio workspace, paste the code inside the Page_Load, overwriting any existing code in the stub from a previous exercise. Here’s what we want to do with this code:

4. Inside the Default.aspx page, change the yField from ‘visits’ to ‘price.’

5. Click Save All.

SalesLogix t table SData.

ata set from feed (XML).

eed into the nd then loop inside the data store.

formatting to comma for in the data et.

e code with client.

Note: Because we are using Products in this new example, we changed one of the variable names to price. We need

to also update this inside the Default.aspx page.

price

© 2010 Sage Software Certified Student Curriculum 23

Page 24: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

The numbpropertie

include dettheir indewhen theyin the SDa

To deploy the Product entity for SData

1. Log on to the Application Architect as admin.

2. From the Project Explorer, expand VFS on SALESLOGIX_EVAL > Entity Model > Packages > SalesLogix Application Entities, and then double-click the Product entity.

The entity opens in the Application Architect workspace.

3. Click the SData tab, and then select the Generate SData Feed check box. Also change the SData Path Name to Products to match the code in your project.

4. Click the Entity tab, and then select the following additional properties to include in the entity: FixedCost, ModifyDate, ModifyUser, ProductGroup, and ProductID.

5. Click Save.

6. From the Application Architect toolbar, click Build Web Platform.

7. When the build completes, open the Deployment Explorer, and then double-click the Core Portals deployment.

8. From the list of deployment targets, right-click the sdata node, and click Deploy Portal.

9. When the deployment completes, minimize the Application Architect.

er of s you ermines x value appear ta feed.

24 Certified Student Curriculum © 2010 Sage Software

Page 25: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 1

To verify SData is working for the Product entity

1. Open Internet Explorer, and go to the following URL:

http://localhost:3333/sdata/slx/dynamic/-/Products

2. In the Log On screen, enter the username of Lee (no password), and then click OK.

The list of products in the SalesLogix database appears in the form of a feed.

© 2010 Sage Software Certified Student Curriculum 25

Page 26: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

To run the application

1. In Visual Studio, click Run.

The solution should build and then open in a new browser tab.

TIP: If you receive any errors in your build, watch the related video for this exercise for some helpful debugging tips. For example, if the data doesn’t return product and price the way you expected, verify the index values you used in the array match the order in which you added items to the Product entity. You can quicky figure out the order in which these index values appear by looking at the payload. (Right-click to view the source of the Product feed shown on the previous page.)

2. Open Firebug to see how the server spooled client-side data (product number and price).

26 Certified Student Curriculum © 2010 Sage Software

Page 27: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

Lesson 2JavaScript in SalesLogix

The SalesLogix Web product provides a lot of options for running server-side code through business rules, but what about client-side code—when and how can you implement it? This lesson introduces you to more specific client-side coding techniques for SalesLogix Web. You will learn how to validate input using JavaScript and jQuery, how to manipulate the post-back of a page, and apply debugging and best practices for integrating the code into the Application Architect.

This lesson contains the following exercises:

Exercises in this Lesson

Use Client-Side Code to Control the Client Post-Back ................................................29Use Client-Side Code to Visually Validate Input and Control the Post-Back ...............34Create a Custom Smart Part .......................................................................................38Validate Data on a Custom Smart Part........................................................................46Debug and Make Client-Side Code More Versatile .....................................................49

© 2010 Sage Software Certified Student Curriculum 27

Page 28: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Key Concepts

The following summary provides the background you need to know before begin the exercises in this lesson. The terminology used most frequently in this book appears in bold text. If you want to learn more about these terms than what is provided in this summary, simply search for them on the Web or ask your trainer.

Client-Side Data ValidationData validation ensures that the data a user enters adheres to a specific rule—for example, making sure a phone number entry uses the right format or a required field contains data. On the server-side, you can use data validation through business rules or other methods. On the client-side, you can also write a function to check the validation on a form field, but you must take additional steps to prevent the page from sending the bad data back to the server anyway. In other words, in order to use client-side data validation, you have to also control the post-back.

To control the post-back for any client-side validation you write, you must also include the word Return in front of any JavaScript call. For example:

OnClientClick="return cmdSave_ClientClick();

Then, based on the result, you can edit the function to tell the client to either continue (return true) or stop (return false). This approach, however, has aflaw in the current version of the SalesLogix product when you return true. As a workaround, you need to actually handle the post yourself by obtaining the client ID of the control that should be posting. We use a tool extension available from Firefox (Firebug) to help with this process.

Custom Smart PartsAs a SalesLogix developer, you can easily edit SalesLogix code in applications other than the Application Architect—for example, Visual Studio. Usually after editing and testing new code, you then import or copy the changes back into the Application Architect. However, at this time you cannot copy the return keyword into the Application Architect. Instead, you would need to manually modify the .ascx file after each deployment or you would need to add the modified page as a custom smart part.

SalesLogix smart parts are generally forms that allow you to provide the UI for interacting with entities. A smart part can exist outside an entity, but is typically associated with one specific entity. A custom smart part, then, is a smart part that is not already in the Application Architect. In terms of client-side code, a custom smart part allows you to validate input by short-circuiting the post-back on the page’s Save button. (You want a custom smart part because you probably don’t want to modify the behavior of the default AccountDetails smart part, for example).

28 Certified Student Curriculum © 2010 Sage Software

Page 29: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

This is jplaceholdJavaScr

validation mlater

Exercise 2.1: Use Client-Side Code to Control the Client Post-Back

To explore the default post-back functionality

1. Log on to the Application Architect as admin.

2. From the Project Explorer, expand VFS on SALESLOGIX_EVAL > Entity Model > Packages > SalesLogix Application Entities > Account > Forms, and then double-click the AccountDetails form.

The form opens in the Application Architect workspace.

3. At the bottom of the form, right-click, and then click Add Row.

4. Inside the newly added row, right-click, and then click Insert > Button.

5. In the Properties window, change the following control properties:

Caption: Validate Client Side

Control Id: cmdClientValidate

OnClientClick: alert(“here”);

6. Click Save.

7. From the Application Architect toolbar, click Build Web Platform.

Goal: Explore the default post-back functionality on a SalesLogix quick form. Then modify the page code to control the post-back on the client-side.

ust a er for ipt or ethod .

© 2010 Sage Software Certified Student Curriculum 29

Page 30: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

8. When the build completes, open the Deployment Explorer, and then double-click the Core Portals deployment.

9. From the list of deployment targets, right-click the SlxClient node, and then click Deploy Portal.

10. When the deployment completes, open a new Firefox browser, and manually browse to http://localhost:3333/slxclient.

11. Log on to the Web Client as admin.

12. Open the Account Detail view for one of the accounts.

30 Certified Student Curriculum © 2010 Sage Software

Page 31: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

13. Right-click the new button, and then click Inspect Element (from Firebug).

You can see how the code rendered in the Client.

14. Click the new button you added.

15. Click OK to the message box.

If you want to compare how the code looks from the page on the server, open the AccountDetails.ascx page in Notepad++ from the C:\Inetpub\wwwroot\slxclient\SmartParts\Account folder. You can note that the control Ids rendered slightly different than the code from the actual page due to the

different containers on the Web page, but it is very close to what appears in the AccountDetails.ascx page.

© 2010 Sage Software Certified Student Curriculum 31

Page 32: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Note that the Client indicates a post-back in the upper, right corner of the screen. This indicates that we’re not actually stopping the form from submitting. In other words, if we had put this validation on the Save button, the save would have still occurred even if some input was invalid. (This is not what we want.)

To short-circuit the post-back on the client-side

1. Open the AccountDetails.ascx page in Notepad++.

TIP: You can find this page in the C:\Inetpub\wwwroot\slxclient\SmartParts\Account folder.

2. Locate the OnClientClick function for the cmdClientValidate control. Add the key word “return” to the value:

3. Locate the cmdClientValidate_ClientClick function at the bottom of the page, and specify what to do with the return:

4. Click Save.

5. Toggle back to the Web Client open in the Firefox browser, and then click Refresh.

You can also see the post-back if you open Firebug, and click the Console tab as you click

on the button.

Use caution for using a value of “true” here instead; otherwise you will prevent post-back from happening at all on the page.

32 Certified Student Curriculum © 2010 Sage Software

Page 33: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

6. Click the Validate Client Side button again, and then click OK to the message box.

This time, no post-back occurs.

NOTE: At this point, if you re-deployed from the Application Architect, you would overwrite any of your changes. Although you could copy the new function back into the OnClientClick property in the Application Architect, you cannot copy the return keyword at this time. So what does this mean? To implement this type of functionality in a production environment, you would need to manually modify the .ascx file after each deployment or you would need to add this page as a custom smart part. (We will create a custom smart part in a later exercise.)

Nothing happens in the upper, right corner of the screen.

Nothing appears in the Console tab of Firebug.

© 2010 Sage Software Certified Student Curriculum 33

Page 34: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Exercise 2.2: Use Client-Side Code to Visually Validate Input and Control the Post-Back

To modify a control’s style properties upon validation

TIP: Watch the related video to see this example extended to the Account Name field.

1. Open the Account Details view in the SalesLogix Web Client in a Firefox browser with Firebug installed.

2. Right-click the Division field, and then click Inspect Element.

Firebug opens and highlights the area you want to inspect.

3. Find the control ID that was used when it was rendered in the Client.

Goal: Validating input on the server-side requires a round trip to the server and back. Explore the options to validate input on the client-side in order to both speed up the process and to visually change the user interface upon validation.

Add a new function to perform validation that the Division field cannot be empty.

If left empty, display a message box using Ext JS and change the control’s background color to red using jQuery.

If filled in, change the control’s background color back to white using jQuery.

This example shows you an easy way to get the Control ID to use it in code. (Take note of the underscores.)

34 Certified Student Curriculum © 2010 Sage Software

Page 35: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

4. Toggle to Notepad++ with the AccountDetails.ascx page open.

5. Scroll to the bottom of the page where the javascript begins for the function you added to the button on the page.

6. Delete the code for the alert and the return from the previous exercise.

Keep note that the other return keyword from the previous exercises should still remain—this keyword short-circuits the post-back, which we still want to use.

Delete

© 2010 Sage Software Certified Student Curriculum 35

Page 36: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

If Division ithe field ruser, and do

If Division color the fiepost back t

7. Using the Code Snippet 2 file provided by your trainer, paste the if/else code inside the function.

8. Click Save.

9. Toggle back to the SalesLogix Web Client Account Details page in Firefox, and then click Refresh.

This is where you would have inserted the Control ID—with underscores—that you copied from Firebug. (The snippet does this for you.)

s empty, color ed, alert the not post back.

is not empty, ld white, and o the server.

In order to complete the post back, note that this time the Control ID uses dollar signs instead of underscores. We follow this syntax because it’s what we see

happening if we inspect the button control in Firefox.

36 Certified Student Curriculum © 2010 Sage Software

Page 37: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

10. Delete the text in the Division box, and then click the Validate Client Side button.

Because the if statement was true (Division field is empty), no post-back occurs.

11. Click OK to the alert message. Enter data in the Division field, and then click the Validate Client Side button again.

Because the if statement was false (Division field is not empty), the application wants to navigate away from the page to complete the post-back.

NOTE: This was a simple example to introduce the pieces needed for this type of validation, but in a real customization example, we would instead want the post-back to occur on the Save button, not from a separate button on the middle of the form. In the next exercise, we’ll implement that very example using a custom smart part.

The Division field turns red, and a sleek-

looking alert box appears to remind the user to enter data into that

field.

The Division

field turns white.

© 2010 Sage Software Certified Student Curriculum 37

Page 38: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Exercise 2.3: Create a Custom Smart Part

To create a new detail form

TIP: If you want to save any changes to AccountDetails page from previous exercises, copy that .ascx file in your deployment folder now; otherwise, you will overwrite those changes when you deploy in this exercise.

1. Log on to the Application Architect as admin.

2. From the Project Explorer, expand VFS on SALESLOGIX_EVAL > Entity Model > Packages > SalesLogix Application Entities > Product.

3. Right-click the Forms node, and then click New Form Wizard.

The New Form Wizard appears.

4. Enter the Detail Form Name as ProductDetails, and click OK.

Goal: Create a new smart part for the Product entity that we can use later to show how you might maintain client-side code inside the Application Architect.

Create a new detail quick form based off the Product entity.

Add a new main view page for the Product entity.

Create a new nav button to launch the ProductDetails page.

Build the Web platform and deploy, and then identify where to apply validation for the next exercise.

38 Certified Student Curriculum © 2010 Sage Software

Page 39: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

The Properties screen appears.

5. Select the FixedCost, Name, and Price properties, and then click Next.

The Details Form Layout screen appears.

6. Leave the default of 3 columns, and then click Next.

We made sure these properties would be available in a previous exercise when we prepared the

Product entity for SData.

© 2010 Sage Software Certified Student Curriculum 39

Page 40: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

7. Click Finish.

8. When the form opens in the workspace, click the form.

9. From the Properties window, click the Ellipses button in the Toolbar property.

The Toolbar Editor appears.

10. Click the Right node, and then click Add > Button.

11. Change the following button properties for ButtonType, Caption, ControlID, Image (Save 16 x 16), and click the Ellipses button on the OnClickAction/Action property.

The Action Item Designer appears.

12. From the left pane, click Business Rule.

Select the Save (16 x

16)

image from the list.

40 Certified Student Curriculum © 2010 Sage Software

Page 41: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

13. Change the BusinessRule property to Save, and then click OK.

14. In the On Client Click property, enter any text as a placeholder that we will modify in the page’s code behind later.

15. Click OK to close the Toolbar Editor.

16. Click Save.

In the current version of the product (v7.5.2), this function does not change the code behind. We’ll

see how this works later...

© 2010 Sage Software Certified Student Curriculum 41

Page 42: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

To add a new page

1. From the Project Explorer, expand Portal Manager > Sage SalesLogix.

2. Right-click the Pages node, and then click New Page Wizard.

The Portal Page Wizard appears.

3. On the Welcome screen, click Main View, and then click Next.

The Select Page Entity screen appears.

4. Click Product, and then click Next.

42 Certified Student Curriculum © 2010 Sage Software

Page 43: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

The New Page Details screen appears.

5. Change the Page Title to Product and the Page Description to Products. Change the Small and Large Images to use the Options_16x16 and Options_24x24 icons.

6. Click Next.

The Select Page Content screen appears.

7. From the Project tab, expand the Product node, and then drag-and-drop the ProductDetails quick form into the MainContent area.

8. Click Next.

The Summary screen appears.

9. Click Finish.

© 2010 Sage Software Certified Student Curriculum 43

Page 44: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

IMPORTANT

To create a Nav button

1. From the Project Explorer, expand the Portal Manager, and double-click the Sage SalesLogix portal.

2. Click the Navigation tab, and expand the Sales node.

3. Right-click the Sales Nav group, and click Add Navigation Item.

A new nav item is added to the bottom of the sales nav group.

4. Click on the new nav item.

5. Change the following properties for Item ID, Title, Description, Small Image, Large Image, and Nav URL.

6. Click Save.

!

Small: Options_24x24

Large: Options_32x32

44 Certified Student Curriculum © 2010 Sage Software

Page 45: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

To build and deploy

1. From the Application Architect toolbar, click Build Web Platform.

2. When the build completes, open the Deployment Explorer, and then double-click the Core Portals deployment.

3. From the list of deployment targets, right-click the SlxClient node, and then click Deploy Portal.

4. When the deployment completes, open a new Firefox browser, and manually browse to http://localhost:3333/slxclient.

5. Log on to the Web Client as admin.

6. Click the Products Nav Bar item.

7. From the list of products, click a product in the list.

The Product Details view appears.

8. Enter a value for Fixed Cost, and then click Save.

9. Delete the value for Fixed Cost, and then click Save.

Notice that you can save without validating entry in the Fixed Cost field. In the next exercise, we will apply validation.

© 2010 Sage Software Certified Student Curriculum 45

Page 46: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Exercise 2.4: Validate Data on a Custom Smart Part

To short-circuit the post-back on a Save

1. Open the ProductDetails.ascx page in Notepad++.

TIP: You can find this page in the C:\Inetpub\wwwroot\slxclient\SmartParts\Product folder.

2. Locate the OnClientClick property for the cmdSave control. Add the key word “return” to the value:

3. Scroll to the bottom of the code.

Goal: Validate input on the client-side for the custom smart part—this time making sure to save the data if validation is successful.

Short-circuit the post-back on the Save button.

If FixedCost is left empty, display a message box using Ext JS and change the control’s background color to red using jQuery.

If filled in, change the control’s background color back to white using jQuery.

This will short-circuit the default post-back so we can manipulate it on our own.

Remember when we put “anything” in the OnClientClick function? It doesn’t actually show up in the page code yet.

We need to add it manually.

46 Certified Student Curriculum © 2010 Sage Software

Page 47: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

If the Fixeempty, chacolor to re

not post

If the Fixenot emptyfield color

and post

4. Inside the <script></script> tags, insert the following code:

5. Toggle back to the Product Details view in the Web Client, and then click Refresh.

6. Remove any data from the Fixed Cost field, and then click Save.

Because the if statement was true (Fixed Cost field is empty), no post-back occurs.

You can find the name of this control by using Firebug to inspect the element in the Web Client.d Cost is

nge field d, and do back.

d Cost is , change to white back.

The Fixed Cost field

turns red, and a sleek-

looking alert box appears to remind the

user to enter data into that

field.

© 2010 Sage Software Certified Student Curriculum 47

Page 48: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

7. Click OK to the alert message. Enter data in the Fixed Cost field, and then click the Save button again.

Because the if statement was false (Fixed Cost field is not empty), the post-back occurs. (You can open Firebug as you test to verify the post-back.)

For additional validation, we could also write additional business rules to make sure Fixed Cost is not above a particular margin from the base Price, for example. Keep in mind, however, that any validation you apply client-side only applies to usage through the Web Client interface. If someone is accessing the data through a third-party application using SData, for example, that validation would not apply. In other words, building business rules into the user interface offers quick response time for the user, but it does not apply to the entity itself.

The Fixed Cost field turns white.

48 Certified Student Curriculum © 2010 Sage Software

Page 49: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

Exercise 2.5: Debug and Make Client-Side Code More Versatile

To use ASP.NET Control ID

To isolate the name of the Control ID, we used Firebug to inspect the element and capture the Control ID as rendered on the client-side. This worked well for our simple example, but a more robust method for working with composite controls is to capture the ASP.NET Control ID.

1. From the Product Details view in the Web Client, right-click, and click View Page Source.

2. Open the ProductDetails.ascx page in Notepad++.

TIP: You can find this page in the C:\Inetpub\wwwroot\slxclient\SmartParts\Product folder.

Goal: Now that you have a custom smart part working with client-side validation outside the Application Architect, explore ways to debug the code, make it reusable for use with other entities, and use it within the Application Architect.

Substitute the client-side Control ID with its ASP.NET equivalent.

Experiment with third-party services like JSLint to debug JavaScript code.

Encapsulate the client-side code into a reusable method.

Create a common file for the reusable method, and import necessary files and references into the Application Architect.

Search for “FixedCost” in the code. You can see how the FixedCost control is rendered as a “composite” control—meaning it has a currency input type that sits on top of (or

overlays) the other control.

© 2010 Sage Software Certified Student Curriculum 49

Page 50: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

3. Change the client-side Control ID to the ASP.NET equivalent:

<$=Name of the control.ClientID%>

4. Click Save.

5. Return to the Product Details view in the Web Client, and click Refresh.

6. Remove the Fixed Cost value, and click Save to test the validation of again.

This time, after you click OK to the alert message, you can see a visible difference of how the background color applies to the underlying control that sits below the input control—you can just see a hint of the color at the top of the control.

Because we’re working with a composite

control, we must retain the “_InputCurrency”

appended to the end of the control name here. Otherwise, we cannot

compare the val().length to 0.

50 Certified Student Curriculum © 2010 Sage Software

Page 51: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

To debug JavaScript code

There are many tools you can use to validate your code. One such example is JSLint (http://www.jslint.com). This tool allows you to copy a chunk of code into their text editor, and it will evaluate the code for any potential errors. For example, you may note that the code snippet provided by your trainer uses a triple === in the .val().length comparison to 0 for the FixedCost field. This recommendation came from JSLint. Let’s see what happens if we try to use a double == instead:

1. From the ClassFiles\MastersSeries\ClientSide folder, open the Code Snippet 2 file in Notepad++.

2. Locate the triple ===, and change to a double ==. Then copy the entire code snippet.

3. Open a new browser tab, and go to http://www.jslint.com.

4. Paste the code snippet into the JSLint text editor, and then click the JSLint button.

An error appears with a suggestion for the fix.

This was just a simple example to show you how to debug JavaScript—especially when working with global variables and comparisons.

© 2010 Sage Software Certified Student Curriculum 51

Page 52: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

Creatmetho

ValidateCmpty. P

variables: sAlias, andThese varthe code

any

Set the reparameterspass into t

To encapsulate the client-side code

If you plan to reuse your custom code on other pages, it’s a good practice to encapsulate it into its own method that uses variables in place of IDs.

1. Open the ProductDetails.ascx page in Notepad++.

2. At the bottom of the page within the <script></script> tags, substitute a new return within the cmdSave_ClientClick function, and then add a new, generic method:

3. Click Save.

4. Return to the Product Details view in the Web Client, and click Refresh.

e a new d called ontrolForE

ass in the sControlID, sMessage. iables make generic for page.

turn and the you want to he function.

52 Certified Student Curriculum © 2010 Sage Software

Page 53: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

5. Remove the Fixed Cost value, and click Save to test the validation of again.

You should see no visible change from the previous exercise because the user experience should remain the same as before you encapsulated the code.

Now you know that your method works, and you can extract it from the page code and include it in a common file.

To use a common file in the Application Architect

1. Using Windows Explorer, browse to C:\Inetpub\wwwroot\SlxClient\jscript.

2. Create a new text file, and then rename it to SimpleValidate.js.

3. Open the SimpleValidate.js file in Notepad++.

© 2010 Sage Software Certified Student Curriculum 53

Page 54: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

4. Cut the ValidateControlForEmpty method from the ProductDetails.ascx, and then page into the new file.

5. Click Save.

This new SimpleValidate.js file must be referenced by the SageSalesLogixCommon.jsb file. This file is used by the JS-Builder, which compresses (or minifies) the code to remove extra spaces, comments, and so on to make the code load faster. We’ll add this reference in the Application Architect rather than manually select the file in JS-Builder.

TIP: If you want to see how JS-Builder works, you can download JSBuilder_v1.1.2.zip from http://code.google.com/p/js-builder. Install the application to see how it collects different javascript files in your deployment directory and compresses it into a single file (SageSaleslogixCommon.jsb). Watch the related exercise video for detailed steps.

54 Certified Student Curriculum © 2010 Sage Software

Page 55: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

Now that the new method exists in a separate file, the ProductDetails.ascx page will no longer work until we get all of these changes back into Application Architect to make the appropriate references.

6. Log on to the Application Architect as admin.

7. From the Project Explorer, expand Portal Manager > Sage SalesLogix > SupportFiles.

8. Right-click the SmartParts folder, and then add a new folder called Product.

9. Right-click the new Product folder, and then click Add Existing Files.

10. Browse to C:\Inetpub\wwwroot\SlxClient\SmartParts\Product. Click the ProductDetails.ascx file, and then click Add.

The file appears as a new smart part under the Product folder in the Project Explorer

11. Right-click the new Product folder, and then add a new folder called App_LocalResources.

12. Right-click the new App_LocalResources folder, and then click Add Existing Files.

13. Browse to C:\Inetpub\wwwroot\SlxClient\SmartParts\Product\ App_LocalResources. Click the ProductDetails.ascx.resx file, and then click Add.

14. From the Project Explorer, expand Portal Manager > Sage SalesLogix > Pages.

15. Double-click to open the Products page in the workspace.

© 2010 Sage Software Certified Student Curriculum 55

Page 56: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

16. Click the ProductDetails smart part, and then click the Ellipses button to redirect the path to the new file.

The Select Smart Part window appears.

17. From the Custom tab, expand the SmartParts > Product node.

18. Click the custom ProductDetails.ascx file, and then click OK.

19. Click Save.

56 Certified Student Curriculum © 2010 Sage Software

Page 57: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Client-Side Coding Techniques Lesson 2

20. From the Project Explorer, expand Portal Manager > Sage SalesLogix > SupportFiles > jscript.

21. Double-click the SageSalesLogixCommon.jsb file to open it in the workspace.

22. Modify the code to add the reference to the SimpleValidate.js in two places:

23. Click Save.

24. From the Project Explorer under the jscript folder, right-click the sage-common folder, and then click Add Existing Files.

25. Browse to C:\Inetpub\wwwroot\SlxClient\jscript\sage-common. Click the SimpleValidate.js file, and then click Add.

26. Click Save.

© 2010 Sage Software Certified Student Curriculum 57

Page 58: Sage SalesLogix Master’s Seriesftp.sagesoftwareuniversity.com/lms/CRM/webdocs/Curriculum/master/... · Sage SalesLogix Master’s Series ... Throughout this workbook, ... or SRV02,

Sage SalesLogix v7.5 - SP2

27. Build the Web Platform, and then Deploy the SlxClient portal.

28. Log on to the Web Client as admin.

29. Open the Product Details view.

30. Remove any data from the Fixed Cost field, and then click Save to test the validation.

You should see no visible change from the previous exercise because the user experience should remain the same as before you encapsulated the code.

31. Click OK to the alert message.

32. Right-click the page, and then click View Page Source.

Note that the reference to the sage-common.js file is included in the page header (which contains the reference to SimpleValidate.js), and that the actual method for the validation does not appear anywhere in the client-side code—only the return appears in the code.

58 Certified Student Curriculum © 2010 Sage Software


Recommended