News and Announcements icon

Dynamics 365 CommunityForums Commerce forum How can add a click ev...

Commerce forum

How can add a click event to bind a button in custom control?

(0) Share

Report

Report

Posted on by Community Member Microsoft Employee

I want to create a new custom control extend CartViewCustomControlBase in order to scan barcode as below. But It's very strange that the ts code cannot capture the click event of the button. Have anyone tried to do this case and give me some solutions? Thanks in advance.


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>ScanBarcode</title>
    <link href="ScanBarcodeControl.css" rel="stylesheet" />
</head>
<body>
    <script id="CustomerAddEdit_Extension_ScanBarcode" type="text/html">
        <div class="flexGrow75 flexRow row-enter" data-bind="visible:isVisible">
            <button id="scanbarcode" type="button" class="scanbarcode flexGrow100 accentBackground" data-bind="click:scan">
                <h1 class="primaryFontColor marginBottom0 scanlabelFont" data-bind="text:scanLabel"></h1>
            </button>
        </div>
    </script>
</body>
</html>

public scan():void
{
  ...
}

All responses Img

All responses (1)

Answers Img

Answers (0)

Oksana Kovaliova 3,597 on at

Like (0)

Report

RE: How can add a click event to bind a button in custom control?

Hi, below code worked well for me.

Does your solution use applyBindingsToNode function to create a link between HTML and controller?

<head>

<meta charset="utf-8" />

<title>MyControl</title>

</head>

<body>

<script id="Microsot_Pos_Extensibility_Samples_LineDetails" type="text/html">

<div id="myControl">

<button id="myCustomButton" data-bind="click: myCustomButtonClick, visible: true"> My custom button</button>

</div>

</script>

</body>

</html>

export class MyCustomControl extends CartViewCustomControlBase {

public onReady(element: HTMLElement): void { //taken from POS LineDetailsCustomControl sample

ko.applyBindingsToNode(element, {

template: {

name: LineDetailsCustomControl.TEMPLATE_ID,

data: this

}

});

}

public myCustomButtonClick(): void {

//click code here

}

}

Helpful resources

Quick Links

Leaderboard

#1

André Arnaud de Cal... 291,280 Super User 2024 Season 2

#2

Martin Dráb 230,235 Most Valuable Professional

#3

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans