SharePoint Framework (SPFx) – Microsoft Teams Tab

0 61

SPFx ile SharePoint tarafında bir çok geliştirme yaptıktan sonra ufak ufak Microsoft Teams ile neler yapabiliriz? Developmentı nasıl gerçekleştiriyoruz? Microsoft Teams ‘i daha efektif nasıl kullanabiliriz? Elimden geldiğince artık Microsoft Teams odaklı development yapmaya gayret göstereceğim.

Şimdi Microsoft Teams ile ilgili ilk örneğimize geçiş yapalım.

Yeni WebPart Projesi Oluşturma

İlk olarak daha önceki makalelerde gerçekleştirdiğimiz gibi, yeni bir klasör oluşturunuz.

md teams-tab-webpart

Oluşturduğunuz path ‘e erişiniz.

cd teams-tab-webpart

Sonra aşağıdaki komut ile Yeoman Generator çalıştırınız.

yo @microsoft/sharepoint

Bilgileri ihtiyacınıza yönelik doldurunuz.

Tenant deploy yapılması önemlidir, aksi taktirde Microsoft Teams WebPart ‘ınıza erişemeyecektir.


Microsoft Teams tab için gerekli olan assets için “Teams” klasörü oluşturunuz.

Klasörü oluşturduktan sonra Microsoft Teams ‘in yüklemiş olduğunuz resimleri aşağıdaki standart baz alarak isimlendiriniz.

  • [webpartid]_color.png – Tab için küçük resim
  • [webpartid]_outline.png – Tab için büyük resim

Microsoft Teams için kullanılabilir duruma getirmek için WebPart manifest güncelleme

WebPart içerisinde yer alan “*.manifest.json” dosyasını açınız.

Microsoft Teams tab içerisinde kullanmak için “supportedHosts” alanına “TeamsTab” ekleyiniz.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "2438bdea-1aea-4a44-9149-a700985fc4ce",
  "alias": "HelloTeamsTabWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart","TeamsTab"],
  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloTeamsTab" },
    "description": { "default": "HelloTeamsTab description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloTeamsTab"
    }
  }]
}

Microsoft Teams context kullanımı

Aşağıdaki gibi WebPart dosyasını açınız.

Aşağıdaki satırı ekleyiniz.

import * as microsoftTeams from '@microsoft/teams-js';

WebPart içerisine context değişkeni oluşturunuz.

export default class HelloTeamsTabWebPart extends BaseClientSideWebPart<IHelloTeamsTabWebPartProps> {
 // This variable has been added
  private _teamsContext: microsoftTeams.Context;

“onInit()” methodunu aşağıdaki gibi ekleyiniz.

 protected onInit(): Promise<any> {
    let retVal: Promise<any> = Promise.resolve();
    if (this.context.microsoftTeams) {
      retVal = new Promise((resolve, reject) => {
        this.context.microsoftTeams.getContext(context => {
          this._teamsContext = context;
          resolve();
        });
      });
    }
    return retVal;
  }

Eğer aşağıdaki gibi hata alıyorsanız, yani context içerisine “microsoftTeams” objesi görünmüyorsa. Muhtemelen SharePoint Framework versiyonunuz düşüktür. Microsoft Teams desteği için SharePoint Framework v1.8 yüklemeniz gerekmektedir.

SharePoint Framework versiyon yükseltmek

Versiyon yükseltmek için linke tıklayarak önceki makalerimdeki adımları izleyerek güncelleme yapabilirsiniz.

React component güncelleme

React props nesnesini aşağıdaki gibi güncelleyiniz.

export interface IHelloTeamsTabProps {
  title: string;
  subTitle: string;
  siteTabTitle: string;
}

React component aşağıdaki gibi güncelleyiniz.

export default class HelloTeamsTab extends React.Component<IHelloTeamsTabProps, {}> {
  public render(): React.ReactElement<IHelloTeamsTabProps> {
    return (
      <div className={ styles.helloTeamsTab }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>{this.props.title}</span>
              <p className={ styles.subTitle }>{this.props.subTitle}</p>
              <p className={ styles.subTitle }>{this.props.siteTabTitle}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

WebPart “render()” kısmını aşağıdaki gibi güncelleyiniz.

 public render(): void {
    let title: string = '';
    let subTitle: string = '';
    let siteTabTitle: string = '';

    if (this._teamsContext) {
      // We have teams context for the web part
      title = "Welcome to Teams!";
      subTitle = "Building custom enterprise tabs for your business.";
      siteTabTitle = "We are in the context of following Team: " + this._teamsContext.teamName;
    }
    else {
      // We are rendered in normal SharePoint context
      title = "Welcome to SharePoint!";
      subTitle = "Customize SharePoint experiences using Web Parts.";
      siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
    }

    const element: React.ReactElement<IHelloTeamsTabProps> = React.createElement(
      HelloTeamsTab,
      {
        title,
        subTitle,
        siteTabTitle
      }
    );

    ReactDom.render(element, this.domElement);
  }

Tüm işlemlerimiz bu kadar, sonra uygulamayı app olarak SharePoint içerisine yükleyiniz. Deployment ile ilgili önceki makalelerime göz atabilirsiniz.

Deploy işlemini yaparken “Make this solution available to all sites in the organization” işaretleyiniz.

Deployment işlemini başarı ile gerçekleştirdikten sonra ilgili app seçip “Sync to teams” butonuna tıklayınız. Sync etmezseniz Microsoft Teams içerisinde uygulamanız görüntülenmeyecektir.

Microsoft Teams “+” işaretine tıklayıp, WebPart seçiniz.

Karşınıza gelen popup içerisine “Install” butonuna tıklayınız.

Tüm işlemlerimiz bu kadar, aşağıdaki görüntü oluşacaktır.

Okuduğunuz için teşekkür ederim. 🙂

Bunları da beğenebilirsin Yazarın diğer kitapları

Themetf