Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
---
title: "Barcode Generator"
url: /appstore/widgets/barcode-generator/
description: "Describes the configuration and usage of the Barcode Generator widget, which is available in the Mendix Marketplace."
#If moving or renaming this doc file, implement a temporary redirect and let the respective team know they should update the URL in the product. See Mapping to Products for more details.
---

## Introduction

The [Barcode Generator](https://marketplace.mendix.com/link/component/200681) widget generates a barcode or QR code from a string value and displays it in your Mendix web application.

The widget does the following:

* Encodes a static or dynamic string value as a barcode or QR code
* Supports ten linear barcode formats as well as QR codes
* Validates the input value against the selected format before rendering
* Renders the result as a scalable SVG image
* Lets end-users download the generated code as a PNG file
* Supports EAN addons and image overlays on QR codes
* Allows additional styling customizations through Atlas UI

### Features

* Two render modes selected through a single property: linear barcode or QR code
* Per-format input validation with configurable logging
* Optional download button with a customizable caption, file name, and position
* EAN-2 and EAN-5 addon support for EAN barcodes
* Error correction levels and image overlays for QR codes
* Offline capable

## Properties Pane

The Barcode Generator properties are organized into the following tabs:

* [General](#general)
* [Advanced](#advanced)
* [Display](#display)

The following sections describe the available properties and how to configure the widget with them.

### General Tab {#general}

The **General** tab configures the value to encode, the code format, and the download button:

* **Dynamic value** (required) – The string to encode as a barcode or QR code.
* **Barcode Format** (required) – The type of code to generate. Choose **Barcode** to render a standard linear barcode, **QR Code** to render a QR code, or **Custom** to select a specific linear format on the **Advanced** tab.
* **Empty message** – The text shown when no value is provided to encode.
* **Allow download** – When enabled, the widget shows a button that lets end-users download the generated code as a PNG file. Enabling this property reveals the following options:
* **Button text** – The caption shown on the download button.
* **Button aria-label** – The accessible label for the download button, used by assistive technologies.
* **File name** – A custom file name for the downloaded file, without the extension. When empty, the file name is generated automatically based on the format and value.
* **Button position** – The position of the download button relative to the code. Choose **Top** or **Bottom**.

### Advanced Tab {#advanced}

The **Advanced** tab configures format-specific settings for linear barcodes and QR codes.

#### Advanced Barcode Settings

* **Custom Format** (required) – The linear barcode format to generate when **Barcode Format** is set to **Custom**. The available formats are CODE128, EAN-13, EAN-8, UPC, CODE39, ITF-14, MSI, Pharmacode, Codabar, and CODE93.
* **EAN-128** – When enabled, encodes CODE128 as GS1-128 (EAN-128).
* **Flat** – When enabled, renders a flat barcode without guard bars. This option does not work with EAN addons.
* **Last character** – A character rendered after the barcode. This option does not work when **Flat** is enabled or with EAN addons.
* **Mod43** – When enabled, adds a modulo 43 check digit for CODE39.

#### EAN Addons

* **Addon format** (required) – The EAN addon to render next to the main barcode. Choose **None**, **EAN-5**, or **EAN-2**.
* **Addon value** (required) – The value for the addon barcode. Use 5 digits for EAN-5 and 2 digits for EAN-2.
* **Addon spacing** (required) – The space between the main barcode and the addon, in pixels.

#### Advanced QR Code Settings

* **Level** (required) – The error correction level to use. Choose **L**, **M**, **Q**, or **H**, from lowest to highest correction.
* **QR Size** (required) – The size of the QR code box, in pixels. In the Studio Pro preview, the maximum height is 200 pixels; the QR code renders at full size in your application.

#### Development

* **Log Level** (required) – The level of logging when barcode generation fails. Choose **None** for no logging, **Info** to display a generic error message in the user interface, or **Debug** to log detailed information to the developer console.

### Display Tab {#display}

The **Display** tab configures the size and appearance of the rendered code.

* **Display value** – When enabled, shows the encoded value below the code.
* **Show as card** – When enabled, displays the widget with a border, background, and padding.
* **Bar width** (required) – The width of a single bar, in pixels.
* **Code height** (required) – The height of the barcode, in pixels. In the Studio Pro preview, the maximum height is 200 pixels; the barcode renders at full height in your application.
* **Margin size** (barcode, required) – The barcode margin, in pixels.
* **Margin size** (QR, required) – The QR code margin, expressed as a number of module units (QR grid cells). Increasing the margin compresses the QR pattern within the fixed size. The margin is not visible in the preview.
* **Title** (required) – The title of the QR code, used for accessibility.
* **Show title** – When enabled, displays the title on top of the QR code.
* **Overlay image** (required) – When enabled, includes an image overlay on the QR code. Enabling this property reveals the following options:
* **Image source** (required) – The image to display on the QR code.
* **Center image** (required) – When enabled, centers the image on the QR code.
* **Image X position** (required) – The horizontal position of the image.
* **Image Y position** (required) – The vertical position of the image.
* **Image height** (required) – The height of the image, in pixels.
* **Image width** (required) – The width of the image, in pixels.
* **Image opacity** (required) – The opacity of the image, ranging from 0.0 to 1.0.
* **Excavate background** (required) – When enabled, removes the QR code dots behind the image.

## Supported Barcode Formats

The widget supports the following formats:

| Linear | 2D |
| ---------- | ------- |
| CODE128 | QR Code |
| EAN-13 | |
| EAN-8 | |
| UPC | |
| CODE39 | |
| ITF-14 | |
| MSI | |
| Pharmacode | |
| Codabar | |
| CODE93 | |

Each format accepts a specific set of values:

| Format | Accepted input |
| ---------- | ----------------------------------------------------------- |
| CODE128 | Up to 80 characters |
| EAN-13 | 12 or 13 digits |
| EAN-8 | 7 or 8 digits |
| UPC | 11 or 12 digits |
| CODE39 | Up to 43 characters: A–Z, digits, space, and `- . $ / + %` |
| ITF-14 | Exactly 14 digits |
| MSI | Up to 30 digits |
| Pharmacode | Up to 7 digits |
| Codabar | Up to 20 characters: digits, A–D, and `- $ : / . +` |
| CODE93 | Up to 47 characters |
| QR Code | Up to 1200 characters |

{{% alert color="info" %}}
When a value does not match the requirements of the selected format, the widget does not render a code. Set the **Log Level** property to **Info** or **Debug** to surface the reason.
{{% /alert %}}

## Styling

Even without additional configuration, the Barcode Generator widget works out of the box with the necessary styling. Enable the **Show as card** property to display the code inside a bordered, padded container with a background.

For further customization or personalization, installing [Atlas UI](/howto/front-end/get-started/) is required.
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,16 @@ The Make It Native app allows developers to preview, test, and debug native mobi
Depending on your app's Mendix version, you must use a different version of the Make It Native app:

* Mendix 11:
* **11.11.0 - 11.x.x** — Use the latest version of Make It Native ([Android](https://play.google.com/apps/testing/com.mendix.developerapp.mx10), [iOS](https://testflight.apple.com/join/bQfLf27w))
* **11.6.x** - MTS version of Make It Native ([Android](https://play.google.com/store/apps/details?id=com.mendix.developerapp.mx10), [iOS](https://apps.apple.com/us/app/make-it-native/id6450037464))
* **11.11.0 - 11.x.x** — Use the latest version of Make It Native ([Android](https://play.google.com/store/apps/details?id=com.mendix.developerapp.mx10), [iOS](https://apps.apple.com/us/app/make-it-native/id6450037464))
* **11.6.x** - MTS version of Make It Native ([Android](https://play.google.com/apps/testing/com.mendix.developerapp.mx10), [iOS](https://testflight.apple.com/join/bQfLf27w))

* **Other** – [Creating a Custom Developer App](/refguide/mobile/distributing-mobile-apps/building-native-apps/how-to-devapps/) or [Building Your Own Make It Native App](https://github.com/mendix/make-it-native)

For information on which mobile operating systems are supported by the Mendix native mobile apps, see the [Mobile Operating Systems](/refguide/system-requirements/#mobile) section of *System Requirements*.

### Direct Download Links {#direct-links}

Download the latest version (current MTS) of Make It Native using these QR codes:
Download the latest version (current LTS 11.12) of Make It Native using these QR codes:

| Android | iOS |
| :-----------------------------------------------------------------------: | :---------------------------------------------------------------: |
Expand All @@ -80,7 +80,7 @@ Download the latest version (current MTS) of Make It Native using these QR codes

The latest version of Make It Native app receives monthly updates, and is compatible exclusively with the latest minor release of Mendix. We recommend using this version only if you intend to update your application regularly.

To access the LTS version of Make It Native, you must join our official beta testing programs on the Apple App Store and use Github Releases for the Android APK. To do so, click the [relevant links above](#get-min-app) and follow the instructions.
To access the MTS version of Make It Native, you must join our official beta testing programs on the Apple App Store and use Github Releases for the Android APK. To do so, click the [relevant links above](#get-min-app) and follow the instructions.

Note that it is not possible to install both **LTS** and **MTS** versions on the same device.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,10 @@ Select this option to use the modernized version of the App Explorer. You must r

Select this option to use the modernized (web) Runtime console. You must restart Studio Pro to use this feature.

### Debug Windows

Select this option to use the modernized Debugger pane, which includes the new Breakpoints, Debugger, and Variables panes. You must restart Studio Pro to use this feature.

### Errors Pane

Select this option to use the modernized version of the Errors Pane. You must restart Studio Pro to use this feature.
Expand All @@ -301,6 +305,10 @@ Select this option to use the modernized version of the Errors Pane. You must re

This setting is enabled by default. The editor allows the user to write rich text statements and get instant feedback on their validity. In Studio Pro, it is often used to write an expression for a decision or to write an XPath expression for data filtering.

### Find Results

Select this option to use the modernized Find Results pane. You must restart Studio Pro to use this feature.

### GraphQL {#graphql}

You can publish data as a GraphQL service. When you enable this feature, you can indicate that a published OData service [also supports GraphQL](/refguide/published-odata-services/#supports-graphql).
Expand All @@ -309,22 +317,24 @@ You can publish data as a GraphQL service. When you enable this feature, you can

Select this option to use the modernized version of the JavaScript action editor. You must close all open JavaScript actions to use this feature.

### Maia

Select this option to use a custom AI provider for Maia.

### Mapping Editor

This setting allows you to set the beta version as the default editor.

### Project Loading

Select this option to enable optimizations during project loading.

### System Texts Editor

This option allows you to use the web version of the system texts editor. It is enabled by default.

If Translation Generator is also enabled, you can use it in this editor. For more information, see the [Generating Translation for System Texts](/refguide/translation-generator/#translate-system-text) section in *Translation Generator*.

### Workflow

In Studio Pro 11.8, select **Enable workflow event sub-processes (beta)** to allow adding [event sub-processes](/refguide/workflow-event-sub-processes/) to your workflow in the workflow editor.

In Studio Pro 11.9 and above, this option is removed. Workflow event sub-processes are in general availability and enabled by default.

## Read More

* [Upload to Version Control Server](/refguide/upload-to-version-control-dialog/)
32 changes: 24 additions & 8 deletions content/en/docs/refguide/modeling/menus/view-menu/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,6 @@ This pane has two levels, so when you zoom into a changed document, you can revi

The [Comparison pane](/refguide/comparison-pane/) shows the differences between a selected historical revision and your current working state, which allows you to see what documents, elements, and properties changed.

### History {#history-pane}

The non-blocking History pane shows commits in your repository and allows you to search and navigate to modified documents without closing the history view.

### Connector {#connector}

The **Connector** pane displays elements that can be connected to the currently selected element. For example, when you select a button, the **Connector** shows microflows that you can drag onto the button to connect them.
Expand All @@ -91,19 +87,23 @@ The **Documentation** pane displays the documentation for the currently selected

The [Errors pane](/refguide/errors-pane/) displays the [errors](/refguide/consistency-errors/), warnings, and deprecations that exist in your app.

### Extensions

The **Extensions** pane allows you to manage the extensions installed in your app. For more information on extensions, see [Get Started with the Web Extensibility API](/apidocs-mxsdk/apidocs/web-extensibility-api-11/getting-started/).

### Find Results

This pane displays the results of the latest find action. You can search for text, usages of an element (for example, an attribute), and unused items.

There are two **Find Results** panes. If you lock the results of the first pane, the second one is used for subsequent find operations until you unlock the first one.

### Integration {#data-hub}
### History {#history-pane}

The [Integration pane](/refguide/integration-pane/) enables you to browse the [Catalog](/catalog/) and use registered data sources that are available for your organization in your app development. You can add [external entities](/refguide/external-entities/) and [external actions](/refguide/call-external-action/) to your app via this pane and see entities and data sources already consumed in your app.
The non-blocking History pane shows commits in your repository and allows you to search and navigate to modified documents without closing the history view.

### OpenAPI Documentation {#api-documentation}
### Integration {#data-hub}

The **OpenAPI Documentation** pane displays the auto-generated OpenAPI documentation for the currently opened [Published OData service](/refguide/published-odata-services/) or [Published REST service](/refguide/published-rest-service/). This allows you to preview the REST operations that will be available once your app is published.
The [Integration pane](/refguide/integration-pane/) enables you to browse the [Catalog](/catalog/) and use registered data sources that are available for your organization in your app development. You can add [external entities](/refguide/external-entities/) and [external actions](/refguide/call-external-action/) to your app via this pane and see entities and data sources already consumed in your app.

### Maia

Expand All @@ -113,6 +113,14 @@ The **Maia** pane displays the Maia Chat interface where you can ask questions a

For details on using Mendix Marketplace components in your app modeling, see [How to Use Marketplace Content](/appstore/use-content/).

### MCP Settings

The **MCP Settings** pane allows you to connect Maia to External Model Context Protocol (MCP) servers. For more information, see [Maia MCP Client](/refguide/maia-mcp/).

### OpenAPI Documentation {#api-documentation}

The **OpenAPI Documentation** pane displays the auto-generated OpenAPI documentation for the currently opened [Published OData service](/refguide/published-odata-services/) or [Published REST service](/refguide/published-rest-service/). This allows you to preview the REST operations that will be available once your app is published.

### Page Explorer

[Page Explorer](/refguide/page-explorer/) gives a quick overview of the page layout and allows you to view and edit nested containers in the [Design mode](/refguide/page/#design-mode).
Expand All @@ -131,6 +139,14 @@ The **Toolbox** pane displays the tools that can be used in the current editor.

The **Toolbox** has a tile view showing larger icons and a list view showing a list of elements. You can switch between the tile and list view modes in the lower-right corner of the **Toolbox**.

### Updata Assistant

{{% alert color="info" %}}
This feature is currently in beta. For more information, refer to [Release Status](/releasenotes/release-status/).
{{% /alert %}}

The **Update Assistant** pane scans the Java code in your app for deprecated APIs. For more information, see [Update Assistant](/refguide/update-assistant/).

### Widget Developer Console

This console helps you debug the configuration code of your widget that is responsible for conditionally visible properties, custom consistency checks, and **Structure mode** preview. This console shows logs from the `getProperties`, `getPreview`, `check`, and `getCustomCaption` functions, which can be defined inside the configuration module. For more information, see the [Widget Developer Console](/apidocs-mxsdk/apidocs/pluggable-widgets-config-api/#widget-dev-console) section of *Configuration Module API for Pluggable Widgets*.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -180,12 +180,6 @@ If the host app uses CSP, make sure its policy allows JavaScript to load from th

Cross-site cookies must be enabled in the browser when the Mendix application is hosted on a different domain from the host application.

## Known Issues

### Optional Parameters

Omitting a parameter that is marked as optional from the `parameters` object will result in the fallback page being shown instead of the default value being passed.

## Read More

* [Mendix Client](/refguide/mendix-client/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: "Registering Workstation Clients"
url: /mendix-workstation/register/
description: "Describes how to register and pre-configure multiple Workstation Clients."
weight: 35
weight: 40
---

## Introduction
Expand Down
Loading
Loading