사용자 지정 위젯의 상호 작용
JavaScript가 허용되지는 않지만 반환된 HTML과의 상호 작용을 허용하는 다른 방법이 있습니다.
팝업에 정보를 표시하고 클릭 시 확인을 요청하며 해당 요소가 선택되었을 때 Lambda 함수를 호출할 수 있는
<cwdb-action>
태그의 특수 구성으로 반환된 HTML의 요소에 태그를 지정할 수 있습니다. 예를 들어 Lambda 함수를 사용하여 AWS API를 호출하는 버튼을 정의할 수 있습니다. 기존 Lambda 위젯의 콘텐츠를 대체하거나 모달 내부에 표시되도록 반환된 HTML을 설정할 수 있습니다.반환된 HTML에 새 콘솔을 열거나 다른 고객 페이지를 열거나 다른 대시보드를 로드하는 링크를 포함할 수 있습니다.
HTML에는 사용자가 해당 요소 위로 마우스를 가져가면 추가 정보를 제공하는 요소에 대한
title
속성이 포함될 수 있습니다.요소에 애니메이션 또는 기타 CSS 효과를 호출할 수 있는
:hover
와 같은 CSS 선택기를 포함할 수 있습니다. 또한 페이지에서 요소를 표시하거나 숨길 수도 있습니다.
<cwdb-action> 정의 및 사용법
<cwdb-action>
요소는 바로 이전 요소에 대한 동작을 정의합니다. <cwdb-action>
의 내용은 표시할 HTML이거나 Lambda 함수에 전달할 파라미터의 JSON 블록입니다.
다음은 <cwdb-action>
요소의 예입니다.
<cwdb-action action="
call
|html
" confirmation="message
" display="popup
|widget
" endpoint="<lambda ARN>" event="click
|dblclick
|mouseenter
"> html | params in JSON </cwdb-action>
action - 유효한 값은 Lambda 함수를 호출하는
call
이거나<cwdb-action>
내에 포함된 HTML을 표시하는html
입니다. 기본값은html
입니다.confirmation - 작업을 수행하기 전에 확인해야 하는 확인 메시지를 표시하며, 이를 통해 고객이 취소할 수 있습니다.
display - 유효한 값은
popup
및widget
으로, 위젯 자체의 콘텐츠를 대체합니다. 기본값은widget
입니다.endpoint - 호출할 Lambda 함수의 Amazon 리소스 이름(ARN)입니다.
action
이call
인 경우 이 값은 필수입니다.event - 작업을 호출하는 이전 요소의 이벤트를 정의합니다. 유효한 값은
click
,dblclick
,mouseenter
입니다.mouseenter
이벤트는html
작업과 함께 사용해야만 합니다. 기본값은click
입니다.
예제
다음은 <cwdb-action>
태그를 사용하여 Lambda 함수 호출을 사용함으로써 Amazon EC2 인스턴스를 재부팅하는 버튼을 생성하는 방법의 예입니다. 팝업에 호출 성공 또는 실패를 표시합니다.
<a class="btn">Reboot Instance</a> <cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:rebootInstance" display="popup"> { "instanceId": "i-342389adbfef" } </cwdb-action>
다음 예는 팝업에 추가 정보를 표시합니다.
<a>Click me for more info in popup</a> <cwdb-action display="popup"> <h1>Big title</h1> More info about <b>something important</b>. </cwdb-action>
이 예는 위젯의 콘텐츠를 Lambda 함수에 대한 호출로 바꾸는 [다음(Next)] 버튼입니다.
<a class="btn btn-primary">Next</a> <cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:nextPage"> { "pageNum": 2 } </cwdb-action>