The Magic Box component is used as a planning tool, where users drag & drop boxes between containers.
For example, boxes could represent crates and containers represent delivery trucks, with rows representing fullfilment centers and columns representing shipping dates.
The component is more flexible in its layout than Planner or Calendar, but unlike the more specialized components it offers the end user no filters or date navigation tools out of the box.
In its most basic form the component is laid out as a grid, with boxes placed in the cells. You can use the optional Containers table to customize individual cells in the grid, for example to set border or background color.
You can put multiple containers in the same cell, which makes each container a sub-column inside that cell, and then put boxes into the individual containers. You can use row span to make a container span over more than one grid row.
Drop groups are an advanced, optional feature, used when you have boxes that represent incompatible concepts. Boxes can only interact with boxes and containers assigned to the same drop group. For example, you could have different containers representing parking garages and docks, and boxes representing cars and boats, and then use drop groups to prevent users from putting a car in a dock.
The four drop groups are null, 'a', 'b', and 'c', so in the example above you might put cars and garages into the null group and boats and docks in the 'a' group.
Drop groups should only be used when it is immediately obvious to the end user which boxes and containers are incompatible, as the only visual indication they will get is that the cursor will indicate that a drop is not allowed when dragging a box over a container from another drop group.
The procedure must carefully check the values passed to the Drag and drop call.
An attacker can not inject their own id values: only boxes shown in the component can be dragged and they can only be dropped on containers shown in the component. An attacker can however manipulate any boxes that were shown when they opened the menu item, even if they would no longer be returned if the procedure was called again.
An attacker can forge a drag of any box dropped on any container. The CanDrag, CanReorder, CanDrop, and DropGroup columns are not enforced.
Gets columns, rows, containers, and boxes.
Possible value | Description |
---|---|
BottomToTop | The first box starts at the bottom of the container, and following boxes are placed above it. |
TopToBottom | The first box starts at the top of the container, and following boxes are placed below it. |
Default background color for column's containers. See Colors.
Default color for column's containers's left and right border. See Colors.
Default background color for row's containers. See Colors.
Default color for row's containers's top and bottom border. See Colors.
Container's background color. See Colors.
Container's border color. See Colors.
Only boxes with the same drop group can be dropped into the container. Return NULL or omit the column to use the default drop group. See the section on Drop groups above for details.
Box's background color. See Colors.
Box's border color. See Colors.
Boxes can only be dropped into containers with the same drop group. Return NULL or omit the column to use the default drop group. See the section on Drop groups above for details.
Called when user has dragged and dropped a box.
Possible value | Description |
---|---|
1 | Below |
-1 | Above |
If present, a partial update of the page is made using the boxes contained in this table. Otherwise the whole box view is reloaded.
Note that partial updates can't be used together with ADMIN_FORCE. After the user has clicked OK the whole box view is always reloaded.
Box's background color. See Colors.
Box's border color. See Colors.
Boxes can only be dropped into containers with the same drop group. Return NULL or omit the column to use the default drop group. See the section on Drop groups above for details.
This SQL call may use SoftadminApi.SyncEntity_RaiseChanged.
Called when a sync entity change is raised for the entity and id that the component listens to.
Box's background color. See Colors.
Box's border color. See Colors.
Boxes can only be dropped into containers with the same drop group. Return NULL or omit the column to use the default drop group. See the section on Drop groups above for details.
Allows you to validate the parameters supplied by the user before any other SQL is run in the component. This call is only made if the component has visible parameters, the SQL is a stored procedure, and Validate parameters is checked.
SQL that can have several resultsets that are displayed at top of component.
Sets the text color of <colname> to the specified color. See Colors.
Color to use for the icon specified in <colname>_Icon. See Colors.
Json to generate a row of meters. See the documentation for the Detailview component for more details.
Possible value | Description |
---|---|
Center | Center aligned. |
Left | Left aligned. |
Right | Right aligned. |
Possible value | Description |
---|---|
boolean checkbox | Legacy alias. Use "checkbox" instead. |
boolean dropdown | |
chart | |
checkbox | |
Checkbox tree | |
colorpicker | |
date | |
datetime | |
dropdown | |
file | |
heading | |
heading with checkbox | |
hidden | |
html | |
info text | |
listbox | |
multi-listbox | |
multi-picker | |
multirow | |
password | |
picture | |
radio buttons | |
textarea | |
textbox | |
textbox with autosearch | |
textbox with autosuggest | |
textbox with dropdown | |
textbox with popup | |
time | |
uneditable text |
Possible value | Description |
---|---|
Default | Inherit layout from menu item. |
LabelAbove | Full width, label above. |
LabelLeft | Label to the left. |
NoLabel | Full width, no label. |
Standard | Deprecated. Use LabelLeft instead. |
JavaScript that controls the mandatory status of the field, this overwrites nullchoice if set. This is only available to control types for which the mandatory JavaScript field is visible in the user interface.
Possible value | Description |
---|---|
Hyperlink | |
MailToLink | |
PhoneLink |
InfoSQL can declare JavaScript used by the menu item.
Example
SELECT
'thirdPartyApi.showMap(street, city, country)' AS JavaScript,
StreetAddress AS street,
CityName AS city,
CountryName AS country
FROM
...
Possible value | Description |
---|---|
Current | This is the current step. |
Done | This step has been completed successfully. |
Failed | Something went wrong in this step. |
Future | This step is later on in the process. |
Use this call to restrict which entries a user is allowed to view and edit, and to log which entries a user views.
Access to a menu item is normally controlled through functions and roles alone but some entities need more fine grained control. For example, a user may have access to the View Member menu item for normal members but not for members with a protected identity.
The menu items a user visits are always logged (in ADMINLogMenuItem) but for sensitive data you may need to log exactly what entries are viewed. Do the logging in this call as the common ways of viewing data (grid and InfoSQL) are not allowed to modify the database.
If you bind a scalar function instead of a stored procedure to this call then its name must end with '_GrantAccess'.