Bagikan melalui


Panduan: Memperbarui kontrol pada pita pada waktu proses

Panduan ini menunjukkan cara menggunakan model objek Pita untuk memperbarui kontrol pada pita setelah pita dimuat ke dalam aplikasi Office likasi.

Berlaku untuk: Informasi dalam topik ini berlaku untuk proyek tingkat dokumen dan proyek Add-in VSTO untuk aplikasi berikut: Excel; InfoPath 2013 dan InfoPath 2010; Outlook; Powerpoint; Proyek; Visio; Kata. Untuk informasi selengkapnya, lihat Fitur yang tersedia berdasarkan aplikasi Office likasi dan jenis proyek.

Contoh menarik data dari database sampel Northwind untuk mengisi kotak kombo dan menu di Microsoft Office Outlook. Item yang Anda pilih dalam kontrol ini secara otomatis mengisi bidang seperti Ke dan Subjek dalam pesan email.

Panduan ini mengilustrasikan tugas-tugas berikut:

  • Buat proyek Add-in Outlook VSTO baru.

  • Mendesain grup Pita kustom.

  • Tambahkan grup kustom ke tab bawaan.

  • Perbarui kontrol pada pita pada waktu proses.

Catatan

Komputer Anda mungkin memperlihatkan nama atau lokasi yang berbeda untuk beberapa elemen antarmuka pengguna Visual Studio dalam petunjuk berikut. Edisi Visual Studio yang Anda miliki dan setelan yang Anda gunakan menentukan elemen-elemen ini. Untuk informasi selengkapnya, lihat Mempersonalisasi IDE Visual Studio.

Prasyarat

Anda memerlukan komponen berikut untuk menyelesaikan panduan ini:

Membuat proyek Add-in Outlook VSTO baru

Pertama, buat proyek Add-in Outlook VSTO.

Untuk membuat proyek Add-in Outlook VSTO baru

  1. Di Visual Studio, buat proyek Add-in Outlook VSTO dengan nama Ribbon_Update_At_Runtime.

  2. Dalam kotak dialog Proyek Baru, pilih Buat direktori untuk solusi.

  3. Simpan proyek ke direktori proyek default.

    Untuk informasi selengkapnya, lihat Cara: Membuat proyek Office di Visual Studio.

Mendesain grup Pita kustom

Pita untuk contoh ini akan muncul saat pengguna menyusun pesan email baru. Untuk membuat grup kustom untuk pita, pertama-tama tambahkan item Pita ke proyek Anda, lalu desain grup di Perancang Pita. Grup kustom ini akan membantu Anda menghasilkan pesan email tindak lanjut kepada pelanggan dengan menarik nama dan riwayat pesanan dari database.

Untuk mendesain grup kustom

  1. Pada menu Proyek, klik Tambahkan Item Baru.

  2. Dalam kotak dialog Tambahkan Item Baru, pilih Pita (Visual Designer).

  3. Ubah nama Pita baru menjadi CustomerRibbon, lalu klik Tambahkan.

    File CustomerRibbon.cs atau CustomerRibbon.vb terbuka di Perancang Pita dan menampilkan tab dan grup default.

  4. Klik Perancang Pita untuk memilihnya.

  5. Di jendela Properti , klik panah turun bawah di samping properti RibbonType , lalu klik Microsoft.Outlook.Mail.Compose.

    Ini memungkinkan pita muncul ketika pengguna menyusun pesan email baru di Outlook.

  6. Di Perancang Pita, klik Grup1 untuk memilihnya.

  7. Di jendela Properti , atur Label ke Pembelian Pelanggan.

  8. Dari tab Kontrol Pita Office dari Kotak Alat, seret Kotak Kombo ke grup Pembelian Pelanggan.

  9. Klik ComboBox1 untuk memilihnya.

  10. Di jendela Properti , atur Label ke Pelanggan.

  11. Dari tab Kontrol Pita Office pada Kotak Alat, seret Menu ke grup Pembelian Pelanggan.

  12. Di jendela Properti , atur Label ke Produk yang Dibeli.

  13. Atur Dinamis ke true.

    Ini memungkinkan Anda menambahkan dan menghapus kontrol pada menu pada waktu proses setelah pita dimuat ke dalam aplikasi Office likasi.

Menambahkan grup kustom ke tab bawaan

Tab bawaan adalah tab yang sudah ada di pita Penjelajah Outlook atau Pemeriksa. Dalam prosedur ini, Anda akan menambahkan grup kustom ke tab bawaan, lalu menentukan posisi grup kustom pada tab .

Untuk menambahkan grup kustom ke tab bawaan

  1. Klik tab TabAddins (Bawaan) untuk memilihnya.

  2. Di jendela Properti , perluas properti ControlId , lalu atur OfficeId ke TabNewMailMessage.

    Ini menambahkan grup Pembelian Pelanggan ke tab Pesan dari pita yang muncul dalam pesan email baru.

  3. Klik grup Pembelian Pelanggan untuk memilihnya.

  4. Di jendela Properti , perluas properti Posisi , klik panah turun bawah di samping properti PositionType , lalu klik BeforeOfficeId.

  5. Atur properti OfficeId ke GroupClipboard.

    Ini memposisikan grup Pembelian Pelanggan sebelum grup Clipboard tab Pesan .

Membuat sumber data

Gunakan jendela Sumber Data untuk menambahkan himpunan data yang ditik ke proyek Anda.

Untuk membuat sumber data

  1. Pada menu Data , klik Tambahkan Sumber Data Baru.

    Ini memulai Panduan Konfigurasi Sumber Data.

  2. Pilih Database, lalu klik Berikutnya.

  3. Pilih Himpunan Data, lalu klik Berikutnya.

  4. Pilih koneksi data ke sampel Northwind database Microsoft SQL Server Compact 4.0, atau tambahkan koneksi baru dengan menggunakan tombol Koneksi ion baru.

  5. Setelah koneksi dipilih atau dibuat, klik Berikutnya.

  6. Klik Berikutnya untuk menyimpan string koneksi.

  7. Pada halaman Pilih Objek Database Anda, perluas Tabel.

  8. Pilih kotak centang di samping setiap tabel berikut ini:

    1. Pelanggan

    2. Detail Pesanan.

    3. Pesanan

    4. Produk

  9. Klik Selesai.

Memperbarui kontrol dalam grup kustom pada waktu proses

Gunakan model objek Pita untuk melakukan tugas berikut:

  • Tambahkan nama pelanggan ke kotak kombo Pelanggan .

  • Tambahkan kontrol menu dan tombol ke menu Produk yang Dibeli yang mewakili pesanan penjualan dan produk yang dijual.

  • Isi bidang Kepada, Subjek, dan Isi pesan email baru dengan menggunakan data dari kotak kombo Pelanggan dan menu Produk yang Dibeli .

Untuk memperbarui kontrol dalam grup kustom dengan menggunakan model objek Pita

  1. Pada menu Proyek, klik Tambahkan Referensi.

  2. Dalam kotak dialog Tambahkan Referensi , klik tab .NET , pilih rakitan System.Data.Linq , lalu klik OK.

    Rakitan ini berisi kelas untuk menggunakan Kueri Terintegrasi Bahasa (LINQ). Anda akan menggunakan LINQ untuk mengisi kontrol dalam grup kustom dengan data dari database Northwind.

  3. Di Penjelajah Solusi, klik CustomerRibbon.cs atau CustomerRibbon.vb untuk memilihnya.

  4. Pada menu Tampilan , klik Kode.

    File kode Pita terbuka di Editor Kode.

  5. Tambahkan pernyataan berikut ke bagian atas file kode Pita. Pernyataan ini menyediakan akses mudah ke namespace layanan LINQ dan ke namespace perakitan interop utama Outlook (PIA).

    using System.Data.Linq;
    using System.Data.Linq.Mapping;
    using System.Linq.Expressions;
    using Outlook = Microsoft.Office.Interop.Outlook;
    using System.Data;
    using System.IO;
    using Ribbon_Update_At_Runtime.Northwind40DataSetTableAdapters;
    
  6. Tambahkan kode berikut di CustomerRibbon dalam kelas . Kode ini mendeklarasikan tabel data dan adaptor tabel yang akan Anda gunakan untuk menyimpan informasi dari tabel Pelanggan, Pesanan, Detail Pesanan, dan Produk database Northwind.

    //Declare the Northwind dataset.
    Northwind40DataSet nwDataSet = new Northwind40DataSet();
    
    //Declare the data tables.
    
    Northwind40DataSet.CustomersDataTable customerTable;
    Northwind40DataSet.OrdersDataTable orderTable;
    Northwind40DataSet.Order_DetailsDataTable orderDetailsTable;
    Northwind40DataSet.ProductsDataTable productsTable;
    
    //Declare the data table adapters for each table.
    
    CustomersTableAdapter customerTableAdapter = new CustomersTableAdapter();
    OrdersTableAdapter ordersTableAdapter = new OrdersTableAdapter();
    Order_DetailsTableAdapter detailsTableAdapter = new Order_DetailsTableAdapter();
    ProductsTableAdapter productsTableAdapter = new ProductsTableAdapter();
    
  7. Tambahkan blok kode berikut ke CustomerRibbon kelas . Kode ini menambahkan tiga metode pembantu yang membuat kontrol untuk pita pada waktu proses.

    private RibbonDropDownItem CreateRibbonDropDownItem()
    {
        return this.Factory.CreateRibbonDropDownItem();
    }
    private RibbonMenu CreateRibbonMenu()
    {
        return this.Factory.CreateRibbonMenu();
    }
    private RibbonButton CreateRibbonButton()
    {
        RibbonButton button = this.Factory.CreateRibbonButton();
        button.Click += new RibbonControlEventHandler(button_Click);
        return button;
    }
    
  8. CustomerRibbon_Load Ganti metode penanganan aktivitas dengan kode berikut. Kode ini menggunakan kueri LINQ untuk melakukan tugas berikut:

    • Isi kotak kombo Pelanggan dengan menggunakan ID dan nama 20 pelanggan di database Northwind.

    • Memanggil metode pembantu PopulateSalesOrderInfo . Metode ini memperbarui menu ProductsPurchased dengan nomor pesanan penjualan yang berkaitan dengan pelanggan yang saat ini dipilih.

      private void CustomerRibbon_Load(object sender, RibbonUIEventArgs e)
      {
          customerTable = nwDataSet.Customers;
          customerTableAdapter.Fill(customerTable);
      
          var customerQuery = from customers in customerTable.AsEnumerable().Take(20)
                              select new
                              {
                                  CustomerID = customers.Field<string>("Customer ID"),
                                  CustomerName = customers.Field<string>("Contact Name")
                              };
      
      
          // Execute the query.
          foreach (var item in customerQuery)
          {
              this.comboBox1.Items.Add(CreateRibbonDropDownItem());
              this.comboBox1.Items.Last().Label =
              item.CustomerName + "|" + item.CustomerID.ToString();
          }
          this.comboBox1.Text = this.comboBox1.Items.First().Label;
          PopulateSalesOrderInfo();
      }
      

  9. Tambahkan kode berikut ke kelas CustomerRibbon. Kode ini menggunakan kueri LINQ untuk melakukan tugas berikut:

    • Menambahkan submenu ke menu ProductsPurchased untuk setiap pesanan penjualan yang terkait dengan pelanggan yang dipilih.

    • Menambahkan tombol ke setiap submenu untuk produk yang terkait dengan pesanan penjualan.

    • Menambahkan penanganan aktivitas ke setiap tombol.

      private void PopulateSalesOrderInfo()
      {
          String[] tempArray = comboBox1.Text.Split(new Char[] { '|' });
          menu1.Items.Clear();
      
          orderTable = nwDataSet.Orders;
          orderDetailsTable = nwDataSet.Order_Details;
          productsTable = nwDataSet.Products;
      
          ordersTableAdapter.Fill(orderTable);
          detailsTableAdapter.Fill(orderDetailsTable);
          productsTableAdapter.Fill(productsTable);
      
          var orderQuery = from orders in orderTable.AsEnumerable()
                           where orders.Field<string>("Customer ID") == tempArray[1]
                           select new { OrderID = orders.Field<int>("Order ID") };
      
          foreach (var orderItem in orderQuery)
          {
              menu1.Items.Add(CreateRibbonMenu());
      
              RibbonMenu orderMenu = (RibbonMenu)menu1.Items.Last();
              orderMenu.Dynamic = true;
              orderMenu.Label = orderItem.OrderID.ToString();
              orderMenu.Tag = orderItem.OrderID;
      
              var productQuery = from orderDetail in orderDetailsTable.AsEnumerable()
                                 join product in productsTable.AsEnumerable() on
                                     orderDetail.Field<int>("Product ID")
                                 equals product.Field<int>("Product ID")
                                 where orderDetail.Field<int>("Order ID") ==
                                     orderItem.OrderID
                                 select new { ProductName = product.Field<string>("Product Name") };
      
              foreach (var productItem in productQuery)
              {
                  RibbonButton button = CreateRibbonButton();
                  button.Label = productItem.ProductName;
                  orderMenu.Items.Add(button);
              }
          }
      }
      

  10. Di Penjelajah Solusi, klik dua kali file kode Pita.

    Perancang Pita terbuka.

  11. Di Perancang Pita, klik ganda kotak kombo Pelanggan .

    File kode Pita terbuka di Editor Kode, dan ComboBox1_TextChanged penanganan aktivitas muncul.

  12. Ganti penanganan ComboBox1_TextChanged aktivitas dengan kode berikut. Kode ini melakukan tugas-tugas berikut:

    • Memanggil metode pembantu PopulateSalesOrderInfo . Metode ini memperbarui menu Produk yang Dibeli dengan pesanan penjualan yang terkait dengan pelanggan yang dipilih.

    • Memanggil metode pembantu PopulateMailItem dan meneruskan teks saat ini, yang merupakan nama pelanggan yang dipilih. Metode ini mengisi bidang Kepada, Subjek, dan Isi pesan email baru.

      private void comboBox1_TextChanged(object sender,
          RibbonControlEventArgs e)
      {
          PopulateSalesOrderInfo();
          PopulateMailItem(comboBox1.Text);
      }
      

  13. Tambahkan penanganan aktivitas berikut Click ke CustomerRibbon kelas . Kode ini menambahkan nama produk yang dipilih ke bidang Isi pesan email baru.

    void button_Click(object sender, RibbonControlEventArgs e)
    {
        Outlook.Application application = Globals.ThisAddIn.Application;
        Outlook.Inspector inspector = application.ActiveInspector();
        Outlook.MailItem myMailItem = (Outlook.MailItem)inspector.CurrentItem;
        RibbonButton myCheckBox = (RibbonButton)sender;
        myMailItem.Subject = "Following up on your order";
        myMailItem.Body = myMailItem.Body + "\n" + "* " + myCheckBox.Label;
    }
    
  14. Tambahkan kode berikut ke kelas CustomerRibbon. Kode ini melakukan tugas-tugas berikut:

    • Mengisi baris Ke pesan email baru dengan menggunakan alamat email pelanggan yang saat ini dipilih.

    • Menambahkan teks ke bidang Subjek dan Isi pesan email baru.

      private void PopulateMailItem(string addressToLine)
      {
          Outlook.Application application = Globals.ThisAddIn.Application;
          Outlook.Inspector inspector = application.ActiveInspector();
          Outlook.MailItem myMailItem = (Outlook.MailItem)inspector.CurrentItem;
      
          myMailItem.To = "";
          String[] tempArray = addressToLine.Split(new Char[] { '|' });
          myMailItem.To = tempArray[0] + "@example.com";
          myMailItem.Subject = "Following up on your order";
          myMailItem.Body = "Hello " + tempArray[0] + "," +
              "\n" + "We would like to get your feedback on the " +
              "following products that you recently ordered: ";
      }
      

Menguji kontrol dalam grup kustom

Saat Anda membuka formulir email baru di Outlook, grup kustom bernama Pembelian Pelanggan muncul di tab Pesan di Pita.

Untuk membuat pesan email tindak lanjut pelanggan, pilih pelanggan, lalu pilih produk yang dibeli oleh pelanggan. Kontrol dalam grup Pembelian Pelanggan diperbarui pada waktu proses dengan data dari database Northwind.

Untuk menguji kontrol dalam grup kustom

  1. Tekan F5 untuk menjalankan proyek Anda.

    Outlook dimulai.

  2. Di Outlook, pada menu File , arahkan ke Baru, lalu klik Pesan Email.

    Tindakan berikut terjadi:

    • Jendela Pemeriksa pesan email baru muncul.

    • Pada tab Pesan dari pita, grup Pembelian Pelanggan muncul sebelum grup Clipboard .

    • Kotak kombo Pelanggan dalam grup diperbarui dengan nama pelanggan dalam database Northwind.

  3. Pada tab Pesan dari pita, di grup Pembelian Pelanggan, pilih pelanggan dari kotak kombo Pelanggan .

    Tindakan berikut terjadi:

    • Menu Produk yang Dibeli diperbarui untuk menampilkan setiap pesanan penjualan untuk pelanggan yang dipilih.

    • Setiap submenu pesanan penjualan diperbarui untuk menunjukkan produk yang dibeli dalam pesanan tersebut.

    • Alamat email pelanggan yang dipilih ditambahkan ke baris Ke pesan email, dan subjek dan isi pesan email diisi dengan teks.

  4. Klik menu Pembelian Produk, arahkan ke pesanan penjualan apa pun, lalu klik produk dari pesanan penjualan.

    Nama produk ditambahkan ke isi pesan email.

Langkah berikutnya

Anda bisa mempelajari selengkapnya tentang cara mengkustomisasi UI Office dari topik-topik ini:

  • Tambahkan UI berbasis konteks ke kustomisasi tingkat dokumen apa pun. Untuk informasi selengkapnya, lihat Gambaran umum panel Tindakan.

  • Perluas formulir Microsoft Office Outlook standar atau kustom. Untuk informasi selengkapnya, lihat Panduan: Mendesain wilayah formulir Outlook.

  • Tambahkan panel tugas kustom ke Outlook. Untuk informasi selengkapnya, lihat Panel tugas kustom.