editable() Function for Sass Metadata in SuiteCommerce

The editable() function is essential for exposing Sass variables within SuiteCommerce, providing functionalities for customization and user interface enhancements. This function is called using a specific structure in comments following variable definitions in your Sass files.

How Does the editable() Function Work?

The editable() function takes a JSON object that includes several properties to define the behavior and appearance of Sass variables:

• type: Required. Determines the variable's type. Accepted values are:
  • color: Utilizes a color picker in the SuiteCommerce Management Tool (SMT).
  • string: Represents a string value (e.g., font style or size).

Note: Only color and string are supported as type values. For numbers or fonts, use a string format.

• label: Optional. Defines a user-friendly name for the variable displayed in the SMT. If omitted, the variable name is shown instead.

• description: Optional. Provides a detailed explanation of the variable.

• options: Optional. An array to limit possible values for dropdown selection in SMT. This is useful to provide predefined choices instead of manual input.

Code Examples

Here are examples of how to declare the editable() function for various variable types:

Exposing a Color Variable

To expose a color variable using inline notation:

$sc-primary-color: red; // editable({"type": "color", "label": "Primary Color"})

Or using block notation:

$sc-primary-color: red; /* editable({
   "type": "color",
   "label": "Primary Color",
   "description": "Used mainly for 'call to action' elements."
})*/

Limiting Selections with Options

You can enhance user experience by specifying options within the editable() function. Here’s how:

Font Weight Example

When declaring font weights:

1$base-font-weight: 200; /* editable({
2    "type": "string",
3    "label": "Font Weight",
4    "options": [
5        {"value": 200, "text": "light"},
6        {"value": 400, "text": "normal"},
7        {"value": 800, "text": "bold"}]
8}) */

Color Example

To display color options instead of allowing free text input:

1$feedback-color: white; /* editable({
2    "type": "color",
3    "label": "Feedback Color",
4    "options": [
5        {"value": "white", "text": "normal"},
6        {"value": "black", "text": "contrast"},
7        {"value": "#ededed", "text": "low contrast"}
8    ]
9}) */

Important Notes

• Comments must immediately follow variable declarations to ensure proper association between the variable and its metadata. Use this structure to prevent processing errors.

Key Takeaways

• The editable() function is crucial for enhancing the user interface in SuiteCommerce.
• It supports specifying variable types, labels, descriptions, and dropdown options.
• Using proper formatting is essential to link variables and metadata correctly in Sass files.