Code Vision

Code Vision puts a grey line of links above your SFCC code. Above a controller route you can open or copy its storefront URL, list the places that call it and jump to the cartridges that extend it. Above a hook, step type or custom API function a lens opens its declaration, and the lens in site.xml opens the Cartridge Path Editor. The lenses come from the plugin's own indexes, the same ones behind B2C Entry Points

RoutesHooksStep typesCustom APIsCartridge path

STstorefrontSandbox 01version2

Cart.js

1'use strict';

2

3var server = require('server');

4var BasketMgr = require('dw/order/BasketMgr');

5

Open EndpointCopy Endpoint URL5 usagesappend (2)

6server.get('Show', function (req, res, next) {

7 var basket = BasketMgr.getCurrentBasket();

8 res.render('cart/cart', { basket: basket });

9 next();

10});

11

Open EndpointCopy Endpoint URL3 usages

12server.post('AddProduct', function (req, res, next) {

13 var basket = BasketMgr.getCurrentOrNewBasket();

Cart-Show: 5 usages

Checkout.js:38 res.redirect(URLUtils.url('Cart-Show'));

CheckoutServices.js:112 redirectUrl: URLUtils.url('Cart-Show').toString(),

Product.js:57 cartUrl: URLUtils.url('Cart-Show').toString(),

checkoutLogin.isml:21 <a href="${URLUtils.url('Cart-Show')}">

miniCart.isml:9 <a class="minicart-link" href="${URLUtils.url('Cart-Show')}">

server.append for Cart-Show

app_customCart.js:7 server.append('Show', function (req, res, next) {

int_loyaltyCart.js:12 server.append('Show', function (req, res, next) {

dw.order.calculate

app.loyalty.points.earn → calculate

Open Cart-Show on the active connection in the browser

Copied https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.store/Sites-RefArch-Site/default/Cart-Show

Cartridges that call server.append for Cart-Show

Open the hooks.json declaration in int_loyalty

Open the steptypes.json declaration in int_loyalty

Open schema.yaml

Open script.js

Edit Cartridge Path

Edit Cartridge Path

Esc

storefrontapp_storefront_basecartridgecontrollersCart.jsRefArch (3)LFUTF-8

Lens groups

Each kind of lens is a group in Settings › Editor › Inlay Hints › Code vision. Uncheck a group to hide its lenses and check it to bring them back

The lenses of templates, such as the usage count and Rendered by, are in the ISML group, see ISML navigation

Which files have lenses

Lenses show in the local files of your linked cartridges, see Cartridges & Modules

• Scripts (.js, .ds and .ts), .json files and .yaml or .yml files
• Pipeline XML under cartridge/pipelines
• Route lenses in a script need the file under cartridge/controllers

Files in a node_modules, test, __test__ or __tests__ folder, under cartridge/client or cartridge/static, in a folder whose name starts with a dot, and files with .test. in their name have no lenses. Every lens needs a valid license or trial

Routes

Every route a controller declares gets a row of lenses, in this order

The usage lens shows 0 usages too. An SFRA target lens shows only when another declaration of the route uses that method

Open Endpoint and Copy Endpoint URL

Both build the storefront URL of the route from the active connection and the site selected in the Site Scope widget, for example https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.store/Sites-RefArch-Site/default/Cart-Show. Hover Open Endpoint to see Open Cart-Show on the active connection in the browser. After a copy, a hint shows Copied and the URL

When the URL can't be built, an error hint says why

Usages

The usage lens counts the places in your linked cartridges that reference the route. Hover it to see Show where Cart-Show is used

• Route arguments of calls in scripts, ISML templates and cartridge XML outside cartridge/forms, such as URLUtils.url('Cart-Show'). Which calls count follows the route call rules, so a helper you add in SFCC Route Calls counts too
• <iscomponent pipeline="Cart-Show"> in templates
• The start node a pipeline call node or jump node calls
• <exec pipeline="..." node="..."> in other cartridge XML

Click the lens and a list titled Cart-Show: 5 usages opens. Each row shows the file type icon, the file name and, in grey, the line number and the code on that line. The rows follow the file path. Type to filter them, and press Enter or click a row to open the code at the route. A single usage opens right away, and with none a hint shows No usages of Cart-Show

SFRA extensions

On an SFRA route, the prepend, append and replace lenses count the other declarations of the same route that use that method, such as server.append('Show', ...) in app_custom for the Cart-Show of app_storefront_base. Hover a lens to see Cartridges that call server.append for Cart-Show

Click it and a list titled server.append for Cart-Show opens with the cartridge in bold at the start of each row. A single target opens right away. A target opens at the quote of its route name

The targets follow the cartridge path of the site selected in the Site Scope widget, and cartridges outside that path drop out. With Global scope, or a site without cartridges, every target shows in project order. Targets in the same position follow the cartridge name, then the file path

Pipeline start nodes

Open a pipeline's XML with Show Pipeline Source from the right-click menu of the file. Each named start node gets Open Endpoint, Copy Endpoint URL and the usage lens above its <branch>. Private start nodes get them too. SiteGenesis controller routes get the same three lenses. A start node or SiteGenesis route declared twice in one file gets one row, above its first declaration

Hooks

A script that hooks.json names as a hook script gets a lens above its hook functions

• For a Salesforce hook point, such as dw.order.calculate, the lens sits above the function named after the last part of the hook name, calculate, and reads the hook name, dw.order.calculate
• For a custom hook, every exported function gets a lens with the hook and the function, such as app.loyalty.points.earn → earn

Hover a lens to see Open the hooks.json declaration in int_loyalty, with the cartridge of that hooks.json. Click it and hooks.json opens with the hook's whole entry selected, from { to }

Step types

A module that a step type in steptypes.json runs gets a lens above each function the step type names. It reads the step type ID and the key that names the function, such as custom.Loyalty-SyncMembers → readFunction. A script step that names no function gets its lens on execute, and the click opens its @type-id

A function gets one lens, from the first step type that names it in cartridge order. Hover it to see Open the steptypes.json declaration in int_loyalty, and click it to open steptypes.json at the function name

Custom APIs

The api.json, schema.yaml and script of a custom API link to each other. Each lens opens one file, and its tooltip names it, such as Open schema.yaml

Lenses link files of the same cartridge only

Cartridge path

In a site.xml, the <custom-cartridges> element directly under <site> gets a lens such as Edit cartridge path: RefArch (3), with the site-id of the site, or Site without one, and the number of cartridges on the path. In a preferences.xml, <preference preference-id="CustomCartridges"> gets Edit cartridge path: Business Manager (2)

Hover the lens to see Edit Cartridge Path, and click it to open the Cartridge Path Editor for that path. Unlike the other lenses, this one stays while the IDE indexes

Several lenses on one line

When two lenses of the same kind land on one line, they share it, joined by ·. A script that serves both dw.order.calculate and a custom hook shows dw.order.calculate · app.loyalty.points.earn → calculate above calculate. A shared lens has no tooltip, and a click opens a list of the lenses to choose from

When lenses refresh

• The file you edit updates its lenses as the IDE checks it
• A change elsewhere, such as in a hooks.json, a steptypes.json, an api.json, the routes of another cartridge or a file changed outside the IDE, updates the other open files about 300 ms after the last change. Only the files whose lenses changed redraw
• Choosing another site in the Site Scope widget redraws the lenses of every open file, so the SFRA targets follow the new cartridge path
• The route, hook, step type and custom API lenses hide while the IDE indexes and come back when it finishes

Troubleshooting

Related