编辑资源菜单 - Azure Portal SDK

Published on 4/5/2017 3:05:41 AM

在进行Azure Portal Extension开发过程中,避免不了对资源菜单的扩展,于是菜单内容在./Client/Browser/ViewModels/AssetTypeViewModel.ts中。

getMenuConfig方法中添加一个菜单:

        var yukoItem: MsPortalFx.Assets.MenuItem = {
            id: "yuko",
            displayText: "Yuko Amamiya",
            icon: ClientIcons.Icons.cloudService,
            supplyBladeReference: () => {
                return ... // 稍后将使其跳转到一个新的blade上
            }
        };

找到menuConfig,向指定段中添加上述创建的yukoItem

        var menuConfig = <MsPortalFx.Assets.ResourceMenuConfig>
            {
                overview: overviewItem,
                groups:
                [
                    {
                        referenceId: MsPortalFx.Assets.ManagementGroupId,
                        items: [
                            propertiesItem,
                            yukoItem
                        ]
                    }
                ]
            };

在Client文件夹下创建Book文件夹,在该文件夹下同时创建Templates用于存放html文件,创建ViewModels存放ts文件。此外在Book文件夹下还需要创建Book.pdlBookArea.ts

编辑Book.pdl后,添加一个TemplateBlade段,在该段中分别指向了BookModel.tsBook.html

<TemplateBlade Name="BookModel"
          ViewModel="{ViewModel Name=BookModel, Module=Book/ViewModels/BookModel}"
          Template="{Html Source='Templates\\Book.html'}">
  <ActionBar ActionBarKind="Generic" />
</TemplateBlade>

接下来在Templates文件夹中创建Book.html

<h1>Hello Azure Portal</h1>
<div data-bind="foreach: messages">
    <p data-bind="text: $data"></p>
</div>

ViewModels中创建BookModel.ts

import BrowseArea = require("Browse/BrowseArea")
import ExtensionDefinition = require("_generated/ExtensionDefinition")

import FxViewModels = MsPortalFx.ViewModels;
import Blade = MsPortalFx.ViewModels.Blade;
import Toolbars = MsPortalFx.ViewModels.Toolbars;
import Images = MsPortalFx.Base.Images;
import Forms = FxViewModels.Forms;
import FxConfiguration = MsPortalFx.Composition.Configuration;

import Def = ExtensionDefinition.ViewModels.Shared.BookModel;
import TextBox = MsPortalFx.ViewModels.Forms.TextBox;
import Slider = MsPortalFx.ViewModels.Forms.Slider;
import ActionBar = MsPortalFx.ViewModels.ActionBars.FormActionBar;

export class BookModel
    extends MsPortalFx.ViewModels.Blade
    implements Def.Contract {

    public messages = ko.observableArray<string>();

    public actionBar: MsPortalFx.ViewModels.ActionBars.GenericActionBar.ViewModel;

    constructor(container: MsPortalFx.ViewModels.ContainerContract, initialState: any, dataContext: BrowseArea.DataContext) {
        super();

        this.title("My First action blade");

        this.actionBar = new MsPortalFx.ViewModels.ActionBars.GenericActionBar.ViewModel(container);
        this.actionBar.actionButtonClick = () => {
            this.messages.push(new Date().toString());
        };
    }
}

最后,返回到./Client/Browse/ViewModels/AssetTypeViewModel.ts,将刚刚添加的按钮指向新建的blade中:

return new BladeRefs.BookModelReference();

file

分享到:

Comments

使用微信扫码