---
title: Extending options
---
Additional, optional information can be added to options to extend
their use outside of core functionality.
This can be useful when using FreeSewing through a frontend UI.
The extended information can be used by the frontend to affect
how options are presented.
## Add menu structure
Because FreeSewing designs have been written with the expectation that
they will be used primarily through the freesewing.org website,
their options have been extended with menu information.
```js
options: {
// Fit
waistEase: { pct: 2, min: 0, max: 10, menu: 'fit', order: '100' },
seatEase: { pct: 5, min: 0, max: 15, menu: 'fit', order: '200' },
// Style
waistHeight: { pct: 5, min: 0, max: 100, menu: 'style', order: '400' },
lengthBonus: { pct: 0, min: -15, max: 10, menu: 'style', order: '300' },
elasticatedCuff: { bool: true, menu: 'style' },
buttons = { count: 7, min: 4, max: 12, menu: 'style.closure', order: '800' }
extraTopButton = { bool: true, menu: 'style.closure', order: '850' }
}
```
In the above example, the added `menu` attributes provide the
freesewing.org website UI with information about the options
should appear in menus.
- The `waistEase` and `seatEase` options should appear in the `fit`
menu while the other options go in the `style` menu.
- Additionally, the `buttons` and `extraTopButton` options should
appear in a `closure` submenu under the `style` menu.
The optional 'order' attributes provide the UI with information about
the order in which options and menus should appear.
- Within the `fit` menu, `waistEase` should come before `seatEase`.
- Within the `style` menu, options should be in the order
`lengthBonus`, `waistHeight`, `buttons`, `extraTopButton`, and
`elasticatedCuff`.
- The `elasticatedCuff` option does not have an `order` attribute,
so it should appear after the options that do.
- Because the `fit` menu has an option with an `order` value that comes
before any of the `order` values for options in the `style` menu,
the `fit` menu should appear before the `style` menu.
:::note
##### This is not a core feature
To be clear, setting this here does not do anything in core.
It's merely extra metadata you can add on the option to facilitate
frontend integration.
:::
:::note
freesewing.org UI behavior:
- Ordering is performed using an alphabetic, not numeric, sort.
For example, `order` value "99" will be placed _after_ "100" because
"1" comes before "9" alphabetically.
However, "099" will be placed before "100", so using leading zeros
can be helpful when using numbers as `order` values.
- After they have been ordered using `order` attribute, if present,
design options and menus are arranged in alphabetical order by
their names.
- However, the `advanced` menu, if present, is always ordered to
be the last menu, appearing after all the other menus.
:::
## Suppress translation
When using `list` options, we usually we want the different options
in the list to be translated.
But sometimes, there is no need for that, like in this example from Breanna:
```js
options: {
primaryBustDart: {
list: [
'06:00',
'07:00',
'08:00',
'09:00',
'10:00',
'11:00',
'11:30',
'12:00',
'12:30',
'13:00',
'13:30',
'14:00',
'15:00',
'16:00',
'17:00',
],
dflt: '06:00',
doNotTranslate: true,
},
// More here
}
```
As you can see above, you can set the `doNotTranslate` property to `true` and to indicate this.
:::note
##### This is not a core feature
To be clear, setting this here does not do anything in core. It's merely extra
metadata you can add on the option to facilitate frontend integration.
:::
ab3204f9f1