Everything on this page works without a license and while the IDE indexes. The editor knows ISML tags as tags, so it closes them, pairs them, folds them and moves them as whole blocks
Sandbox 01
version2
homePage.isml
Global scope${ closes itself, a typed } or quote types over the closing one, > on <isif> adds </isif>, and Enter between the tags opens an indented lineTyping
| You type | You get |
|---|---|
${ | ${}, with the caret inside. A typed } types over the closing brace |
> on <isif>, <isloop> and other tags with a body | The end tag after the caret |
> on <iselse> or <iselseif> | The tag lines up with its <isif> |
</ | The end tag of the innermost open ISML tag |
Backspace in an empty ${} | Both braces go |
| Enter between a start tag and its end tag | An indented line between them |
Editing the name of a start tag renames its end tag too. It follows Simultaneous <tag></tag> editing in Settings › Editor › General › Smart Keys › HTML/CSS
Smart Enter (Cmd+Shift+Enter, Ctrl+Shift+Enter) completes the tag you're in: it closes ${ and quotes, adds the required attributes, closes the tag and adds the end tag
Selecting and moving
- Extend Selection (
Alt+Up,Ctrl+W) grows in ISML steps: the expression text, the whole${...}, the attribute value, the attribute, the start tag, the whole tag, the<isif>branch and the whole<isif>chain - With the caret on a tag name, its pair is highlighted. On
<isif>,<iselseif>or<iselse>the whole chain is highlighted, and Move Caret to Code Block Start and End jump along it - Move Statement Up and Down (
Cmd+Shift+Up,Ctrl+Shift+Up) move a multi-line ISML element as one block
Surround With
Select text and press Cmd+Alt+T (Ctrl+Alt+T):
| Surrounder | Result |
|---|---|
| <isif> | <isif condition="${}"> around the text, with the caret in the condition |
| <isif> / <iselse> | The same with an <iselse> branch |
| <isloop> | <isloop items="${}" var="item"> around the text, with the caret in items |
| <isdecorate> | <isdecorate template=""> around the text, with the caret in template |
| <isobject> | <isobject object="${}" view="none"> around the text, with the caret in object |
| <iscomment>, <isscript> | The tag around the text, with the caret after it |
| ${...}, <isprint> | The text as an expression or as <isprint value>, in place |
A selection of whole lines puts the tags on their own lines and indents the body. Any other selection is wrapped where it is
Comments
Comment Line (Cmd+/, Ctrl+/) and Comment Block (Cmd+Alt+/, Ctrl+Shift+/) write <iscomment>, because ISML tags and ${} inside an HTML comment still run on the server. Inside <isscript> they write JavaScript comments. <iscomment> doesn't nest, so commenting a range that holds a comment wraps the parts around it
With Comment template data with HTML comments in Settings › Languages & Frameworks › ISML, lines of plain markup get <!-- --> instead. Lines with ISML tags or ${...} always get <iscomment>
Folding
| Region | Folded |
|---|---|
<isloop> | <isloop product in pdict.products>...</isloop> |
<isdecorate>, <isobject> and other tags with a body | The tag name and its template or object, then ... |
<isif> | The body of <isif> and of each branch, each with its own marker |
<isscript>, <iscomment> | The first line, then ... |
${...} | ${...} |
<iscomment>region Name</iscomment> and <iscomment>endregion</iscomment> mark a custom region. In Settings › Editor › General › Code Folding › ISML, <isscript> blocks folds scripts when a file opens (off) and File header comment folds the first comment (on)
Structure and breadcrumbs
The Structure tool window and File Structure (Cmd+F12, Ctrl+F12) list the ISML tags of the template with a summary of each:
| Tag | Reads as |
|---|---|
<isloop items="${pdict.items}" var="item"> | isloop item in pdict.items |
<isset name="total" ... scope="page"> | isset total (page) |
<isinclude url="${URLUtils.url('Product-Tile', ...)}"> | isinclude url Product-Tile |
<iscache type="relative" hour="24"> | iscache 24h |
<ismodule ... name="productprice"> | ismodule isproductprice |
<isscript> lists the functions and variables it declares. Show Expressions adds the ${...} expressions of each tag. The breadcrumbs under the editor merge HTML and ISML, for example div.product-tile › isloop item › isif item.available › a.name
Intentions
Alt+Enter in a template offers these, in the SFCC/ISML group of Settings › Editor › Intentions:
| Intention | What it does |
|---|---|
| Convert ${...} to <isprint> and back | Switches between an expression and <isprint value> |
| Invert <isif> | Negates the condition and swaps the branches |
| Merge nested <isif> and Split <isif> into nested <isif> | Joins two conditions with &&, or splits them |
| Extract to resource bundle | Moves literal text to a key of the bundle you pick and prints it with ${Resource.msg('key', 'bundle', null)}. A key that already holds the text is reused |
| Declare pdict type | Writes an @pdict line for a member, see Scripting in ISML |
| Introduce template variable | Puts the expression in an <isset scope="page"> on the line above, prints the variable in its place and starts renaming it. Asks whether to replace the same expression further down |
| Inline included template | Replaces an <isinclude> with the template's text |
Refactorings
| Refactoring | What it does |
|---|---|
| Refactor › Extract › Include File... | Moves the selection to a new template under templates/<locale> and includes it |
| Refactor › Extract › Custom Tag... | Moves the selection to a module template and calls it as a tag, see Custom Tags |
Refactor › Inline on an <isinclude> | Puts the included template back in place of the include |
| Rename on a template | Keeps the path style of every reference, with or without a leading / or .isml, and offers to rename the overriding and overridden copies in other cartridges |
New templates
File › New › ISML File opens the New ISML File dialog with these kinds: Template, Page with decorator, Decorator, Modules file, Custom tag template, Email template, JSON template and Page Designer component. A name typed on a cartridge folder goes under templates/default/. The text of each kind is in Settings › Editor › File and Code Templates, with an ISML File Header include
Drag and drop
Drop a template from the Project view into a template to insert an <isinclude> for it. Drop a script or a style sheet to load it: by default the plugin adds assets.addJs() or assets.addCss() in an <isscript>, as SFRA does. Choose Tags in Settings › Languages & Frameworks › ISML › Dropped scripts and styles to insert <script> and <link> tags instead
Spellchecking covers the text of <iscomment> and description attributes such as <isslot description>