自訂小工具中的互動

即使 JavaScript 不允許，還有其他方法可以允許與返回的 HTML 進行交互。

• 在傳回的 HTML 中的任何元素都可以在 <cwdb-action> 標籤中使用特殊組態加上標籤，它可以在快顯中顯示資訊，要求點按確認，並在選擇該元素時呼叫任何 Lambda 函數。例如，您可以定義使用 Lambda 函數呼叫任何 AWS API 的按鈕。傳回的 HTML 可以設定為取代現有的 Lambda 小工具的內容，或在模態內顯示。

• 傳回的 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— 有效值為 call 和 html，其中前者會叫用一個 Lambda 函數，後者則會顯示包含在 <cwdb-action> 中的任何 HTML。預設為 html。

• 確認— 顯示必須在採取動作之前確認的確認訊息，允許客戶取消。

• 顯示— 有效值為 popup 和 widget，可取代小工具本身的內容。預設值為 widget。

• 端點— 要呼叫之 Lambda 函數的 Amazon Resource Name (ARN)。如果 action 為 call，則必須如此。

• 事件— 定義上一個叫用動作的元素上的事件。有效值為 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> 

此範例為 Next (下一步) 按鈕，可用 Lambda 函數的呼叫取代小工具的內容。

<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>