MobileUIBuilder220FDW

Builder for constructing UI components on mobile screens -- currently focused on the InfoPane component that displays item details, fields, gauges, and images.

Overview

Object type: Codeunit
Object ID: 73167891
Access: Public
Namespace: Aptean.Mesh.SDUI

The UI builder uses a fluent API where every method returns this for chaining. It is accessed through State.UI() on the MobileRPCState220FDW object and is automatically flushed into the response when State.Serialize() is called.

// Build an InfoPane with image, fields, and a progress gauge
State.UI()
    .InfoPane('Widget Assembly Kit', 'ITEM-001')
    .WithItemImage('ITEM-001')
    .Field('UOM', 'EA')
    .Field('Lot No.', 'LOT-2026-04', true)
    .FieldQtyWithGauge('Progress', 100, 75);

exit(State.Serialize());

tip

You do not need to instantiate MobileUIBuilder220FDW directly. Access it through State.UI() on the MobileRPCState220FDW object.

InfoPane Construction

InfoPane

procedure InfoPane(Description: Text; ItemNo: Text): Codeunit MobileUIBuilder220FDW

Creates a new InfoPane component. This must be called before adding fields, images, or header rows. Calling it again resets the builder.

Parameters:

Name	Type	Description
`Description`	`Text`	Item description displayed as the main title
`ItemNo`	`Text`	Item number displayed as the subtitle

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Example:

State.UI().InfoPane('Steel Bracket 50mm', 'ITEM-1000');

IsInitialized

procedure IsInitialized(): Boolean

Returns true if InfoPane() has been called on this builder instance.

Returns: Boolean

Fields

Field (label and value)

procedure Field(FieldLabel: Text; FieldValue: Text): Codeunit MobileUIBuilder220FDW

Adds a label-value field row to the InfoPane.

Parameters:

Name	Type	Description
`FieldLabel`	`Text`	Display label (e.g., `'Bin'`, `'Location'`)
`FieldValue`	`Text`	Display value (e.g., `'BIN-01'`, `'MAIN'`)

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Field (with highlight)

procedure Field(FieldLabel: Text; FieldValue: Text; Highlighted: Boolean): Codeunit MobileUIBuilder220FDW

Adds a label-value field with optional visual highlight. Highlighted fields draw attention to important values.

Parameters:

Name	Type	Description
`FieldLabel`	`Text`	Display label
`FieldValue`	`Text`	Display value
`Highlighted`	`Boolean`	When `true`, the field is visually emphasized

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Example:

State.UI()
    .InfoPane('Steel Bracket', 'ITEM-1000')
    .Field('Location', 'MAIN')
    .Field('Lot No.', 'LOT-EXPIRED', true);  // Highlighted to draw attention

FieldQtyWithGauge

procedure FieldQtyWithGauge(FieldLabel: Text; TotalQty: Decimal; ScannedQty: Decimal): Codeunit MobileUIBuilder220FDW

Adds a quantity field with a circular progress gauge. The gauge percentage is auto-calculated from ScannedQty / TotalQty. The displayed value is the scanned quantity.

Parameters:

Name	Type	Description
`FieldLabel`	`Text`	Display label (e.g., `'Scanned Qty'`)
`TotalQty`	`Decimal`	The total expected quantity (denominator)
`ScannedQty`	`Decimal`	The current scanned quantity (numerator)

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Example:

// Shows "75" with a 75% filled gauge
State.UI()
    .InfoPane('Widget', 'ITEM-001')
    .FieldQtyWithGauge('Scanned Qty', 100, 75);

FieldWithGauge

procedure FieldWithGauge(FieldLabel: Text; FieldValue: Text; Percent: Integer; Highlighted: Boolean): Codeunit MobileUIBuilder220FDW

Adds a field with a circular progress gauge showing an explicit percentage. Use this when you need full control over the displayed value and gauge.

Parameters:

Name	Type	Description
`FieldLabel`	`Text`	Display label
`FieldValue`	`Text`	Display value (free-form text)
`Percent`	`Integer`	Gauge fill percentage (0--100)
`Highlighted`	`Boolean`	When `true`, the field is visually emphasized

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Images

WithImageUrl

procedure WithImageUrl(Url: Text): Codeunit MobileUIBuilder220FDW

Sets the InfoPane image from a direct URL. If the URL is empty, no image is set.

Parameters:

Name	Type	Description
`Url`	`Text`	The image URL

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

WithItemImage

procedure WithItemImage(ItemNo: Code[20]): Codeunit MobileUIBuilder220FDW

Sets the InfoPane image from the Item master data picture in Business Central. Internally resolves the item's picture URL via the standard BC API endpoint. If the item has no picture, no image is set.

Parameters:

Name	Type	Description
`ItemNo`	`Code[20]`	The item number to fetch the picture from

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Example:

State.UI()
    .InfoPane('Widget Assembly Kit', 'ITEM-001')
    .WithItemImage('ITEM-001')
    .Field('UOM', 'EA');

Header Rows

Header rows appear below the title/subtitle area and above the field list. They display two values with a gauge indicator.

HeaderRow (with explicit percentage)

procedure HeaderRow(Value1: Text; Value2: Text; GaugePercent: Integer): Codeunit MobileUIBuilder220FDW

Adds a header row showing two values with a gauge.

Parameters:

Name	Type	Description
`Value1`	`Text`	Left-side value (e.g., current count)
`Value2`	`Text`	Right-side value (e.g., total count)
`GaugePercent`	`Integer`	Gauge fill percentage (0--100)

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

HeaderRow (with auto-calculated percentage)

procedure HeaderRow(CurrentValue: Text; TotalValue: Text; TotalQty: Decimal; CurrentQty: Decimal): Codeunit MobileUIBuilder220FDW

Adds a header row with an auto-calculated gauge percentage from CurrentQty / TotalQty.

Parameters:

Name	Type	Description
`CurrentValue`	`Text`	Left-side display value
`TotalValue`	`Text`	Right-side display value
`TotalQty`	`Decimal`	Total quantity (denominator)
`CurrentQty`	`Decimal`	Current quantity (numerator)

Returns: Codeunit MobileUIBuilder220FDW -- self, for chaining.

Example:

State.UI()
    .InfoPane('Receipt WH-REC-001', 'ITEM-001')
    .HeaderRow('3 of 10', '10 lines', 10, 3)
    .Field('Status', 'In Progress');

View Field Updates

These methods update fields in an existing view JSON object without rebuilding the entire InfoPane. Use them when you need to update a single value (e.g., after a scan) without losing the rest of the view state.

HasViewField

procedure HasViewField(ViewJObj: JsonObject; FieldLabel: Text): Boolean

Checks if a view object contains a field with the specified label.

Parameters:

Name	Type	Description
`ViewJObj`	`JsonObject`	The view JSON object to search
`FieldLabel`	`Text`	The field label to look for

Returns: Boolean -- true if the field exists.

UpdateViewField

procedure UpdateViewField(var ViewJObj: JsonObject; FieldLabel: Text; NewValue: Text): Boolean

Updates a field value in the view's fields array by matching the label.

Parameters:

Name	Type	Description
`ViewJObj`	`JsonObject`	The view JSON object to update (passed by reference)
`FieldLabel`	`Text`	The field label to match
`NewValue`	`Text`	The new value to set

Returns: Boolean -- true if the field was found and updated.

UpdateViewFieldWithGauge

procedure UpdateViewFieldWithGauge(var ViewJObj: JsonObject; FieldLabel: Text; NewValue: Text; GaugePercent: Integer): Boolean

Updates a field value and its gauge percentage in the view's fields array.

Parameters:

Name	Type	Description
`ViewJObj`	`JsonObject`	The view JSON object to update (passed by reference)
`FieldLabel`	`Text`	The field label to match
`NewValue`	`Text`	The new value to set
`GaugePercent`	`Integer`	The new gauge percentage (0--100)

Returns: Boolean -- true if the field was found and updated.

UpdateViewQtyWithGauge

procedure UpdateViewQtyWithGauge(var ViewJObj: JsonObject; FieldLabel: Text; TotalQty: Decimal; ScannedQty: Decimal): Boolean

Updates a quantity field with an auto-calculated gauge percentage. The displayed value is set to Format(ScannedQty).

Parameters:

Name	Type	Description
`ViewJObj`	`JsonObject`	The view JSON object to update (passed by reference)
`FieldLabel`	`Text`	The field label to match
`TotalQty`	`Decimal`	Total expected quantity (denominator)
`ScannedQty`	`Decimal`	Current scanned quantity (numerator)

Returns: Boolean -- true if the field was found and updated.

Terminal Methods

Build

procedure Build(): JsonObject

Returns the InfoPane as a JsonObject and resets the builder for reuse. Returns an empty JsonObject if InfoPane() was never called. You typically do not call this directly -- State.Serialize() calls it automatically.

Returns: JsonObject -- the assembled InfoPane JSON.

Complete Example

local procedure BuildDetailView(var State: Codeunit MobileRPCState220FDW; WhseReceiptLine: Record "Warehouse Receipt Line")
begin
    State.UI()
        .InfoPane(WhseReceiptLine.Description, WhseReceiptLine."Item No.")
        .WithItemImage(WhseReceiptLine."Item No.")
        .HeaderRow(
            Format(WhseReceiptLine."Qty. Received"),
            Format(WhseReceiptLine.Quantity),
            WhseReceiptLine.Quantity,
            WhseReceiptLine."Qty. Received")
        .Field('Location', WhseReceiptLine."Location Code")
        .Field('Bin', WhseReceiptLine."Bin Code")
        .Field('UOM', WhseReceiptLine."Unit of Measure Code")
        .FieldQtyWithGauge('Scanned Qty', WhseReceiptLine.Quantity, WhseReceiptLine."Qty. Received");

    State
        .SetDocumentNo(WhseReceiptLine."No.")
        .SetLineNo(WhseReceiptLine."Line No.")
        .SetItemNo(WhseReceiptLine."Item No.", false);
end;

Overview​

InfoPane Construction​

InfoPane​

IsInitialized​

Fields​

Field (label and value)​

Field (with highlight)​

FieldQtyWithGauge​

FieldWithGauge​

Images​

WithImageUrl​

WithItemImage​

Header Rows​

HeaderRow (with explicit percentage)​

HeaderRow (with auto-calculated percentage)​

View Field Updates​

HasViewField​

UpdateViewField​

UpdateViewFieldWithGauge​

UpdateViewQtyWithGauge​

Terminal Methods​

Build​

Complete Example​

See Also​

Overview

InfoPane Construction

InfoPane

IsInitialized

Fields

Field (label and value)

Field (with highlight)

FieldQtyWithGauge

FieldWithGauge

Images

WithImageUrl

WithItemImage

Header Rows

HeaderRow (with explicit percentage)

HeaderRow (with auto-calculated percentage)

View Field Updates

HasViewField

UpdateViewField

UpdateViewFieldWithGauge

UpdateViewQtyWithGauge

Terminal Methods

Build

Complete Example

See Also