Adding Buttons

It is possible to add an extra button to any projection. To do so, add the following line in one of the projections. There must be no space between the opening square bracket [ and button.

// Insurance/src/defs/editor-fragments.edit#L18-L18

[button text="Push me!" boxRole="MyButton-role"]

The text is the text that will be shown on the button. The boxRole defines how the button is linked to an action. For this you need to create a custom action.

Note that in the custom action you need to specify the exact same boxRole as the one that has been supplied with the button in the .edit file. When implementing this custom action, you can use box.node to get the node in the AST associated with the button. For more information see Writing_Actions.

Work is ongoing to expose the built-in actions in the editor core.

Icon Buttons

You can add an icon before or after the text using CSS or SCSS; the text itself is optional.

As an example, buttons are added to a table definition.

// Insurance/src/defs/editor-tables-with-button.edit#L6-L11

InsurancePart{
table [
    Name    | risk               | pay out          | is approved   | action
    ${name} | ${statisticalRisk} | ${maximumPayOut} | ${isApproved} | [button boxRole="MyTableButton-role"]
]
}

To style these buttons the following SCSS code is added.

// Styling/button.css#L9-L31

.MyButton-role::after {
  font-family: 'Material Icons', emoji;
  content: "\e5d2"; // this number is called the icon's code point in Material
  color: green;
  font-size: 25px;
  rotate: 30deg;
}

.MyTableButton-role::before {
  font-family: "Font Awesome 6 Free", emoji;
  font-weight: 900;
  //content: 'plus';
  content: '\\2b'; // this number is called the icon's unicode in Font Awesome
  color: dodgerblue;
  font-size: 16px;
  rotate: 30deg;
}

.MyTableButton-role {
  min-width: 0.5em !important;
  min-height: 0.5em !important;
  border-radius: 50% !important;
}

This is displayed as follows.

Image 'documentation/Documentation-Buttons-screenshot1.png' seems to be missing