Microsoft Teams 어플리케이션 만들기 ②: 어플리케이션 추가 시 설정화면 사용자 정의

19135 단어 MicrosoftTeams
저번 보도 마이크로소프트 Teams의 기본 응용 프로그램의 제작 방법을 소개했다.이번 보도에서 탭에 앱을 추가하고 싶을 때 화면을 설정하면 더욱 사용자 정의가 됩니다!구체적으로 나는 사용자의 선택에 따라 추가된 라벨의 URL을 바꾸고 싶다.
또한 기본적으로저번 보도의 후속이므로 양해해 주십시오.
본 보도는 아래 사이트를 참고하였다.
Create the configuration page for your Microsoft Teams configurable tab
https://msdn.microsoft.com/en-us/microsoft-teams/createconfigpage

① 여러 태그 표시용 사이트 준비


지난번에는 라벨에 고정된 사이트만 표시했을 뿐이다.이번에는 지난번과 달리 사용자의 선택에 따라 라벨 표시용 사이트를 적절하게 변경하고 싶습니다.
따라서 탭 표시에 사용할 사이트가 여러 개 필요하다.지난번과 마찬가지로 어렵기 때문에 스스로 사이트를 준비했다.우선 다음 3개를 준비했다.하나하나가 단순히 문장을 나타내는 것일 뿐이다.
페이지 1
https://teamssampleweb.azurewebsites.net/page1.html

페이지 2
https://teamssampleweb.azurewebsites.net/page2.html

3페이지
https://teamssampleweb.azurewebsites.net/page3.html

② 화면을 설정하는 사이트 변경


이전 글에서는 다음 HTML 코드의 웹 사이트를 설정 화면으로 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src='https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js'></script>

<script type="text/javascript">  

microsoftTeams.initialize();

microsoftTeams.settings.setSettings({
    entityId: "kennSampleApp1",
    suggestedDisplayName: "Sample App1",
    contentUrl: "https://teamssampleweb.azurewebsites.net/index.html",
    websiteUrl: "https://teamssampleweb.azurewebsites.net/index.html"
});

microsoftTeams.settings.setValidityState(true);

</script>

こちらは設定画面のウェブサイトです。
</body>
</html>
이때 코드만 보면 "conteUnrl"(또는 "websiteUrl")은 어떤 상황에서도 "https://teamssampleweb.azurewebsites.net/index.html를 (으)로 설정합니다.
따라서 사용자의 입력을 통해 이'conteUnrl'(또는'websiteUrl')을 적절하게 변경할 수 있다.그렇게 변경된 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="radio" name="content" value="page1.html" onclick="onClick()"> ページ1<br>
<input type="radio" name="content" value="page2.html" onclick="onClick()"> ページ2<br>
<input type="radio" name="content" value="page3.html" onclick="onClick()"> ページ3
</form>

<script src='https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js'></script>

<script type="text/javascript">  

microsoftTeams.initialize();

microsoftTeams.settings.registerOnSaveHandler(function(saveEvent){
    var page = "";
    var radios = document.getElementsByName("content");
    for(var i = 0; i < radios.length; i++){
        if (radios[i].checked) {
            page = radios[i].value;
            break;
        }
    }

    microsoftTeams.settings.setSettings({
        entityId: "kennSampleApp2",
        suggestedDisplayName: "Sample App2",
        contentUrl: "https://teamssampleweb.azurewebsites.net/" + page,
        websiteUrl: "https://teamssampleweb.azurewebsites.net/" + page
    });

    saveEvent.notifySuccess();
});

function onClick() {
    microsoftTeams.settings.setValidityState(true);
}

</script>

こちらは設定画面のウェブサイトです。
</body>
</html>
선택 단추를 추가하고 선택한 선택 단추에 따라'conteUnrl'(또는'websiteUrl')을 변경합니다.다른 변경 사항은 우선 저장 단추가 유효해진 시간 변경입니다.
function onClick() {
    microsoftTeams.settings.setValidityState(true);
}
[저장] 버튼은 라디오 버튼을 누를 때 이러한 함수를 호칭하여 라디오 버튼 중 하나를 누를 때 적용됩니다.이렇게 하면 사용자가 라디오 단추를 누르지 않고 저장 단추를 누르는 것을 방지할 수 있다.
microsoftTeams.settings.registerOnSaveHandler(handler)
또한 상기 코드를 통해 '사용자가' 저장 '단추를 눌렀을 때 호출된 호출 함수' 를 등록할 수 있다.이 리셋 함수를 사용하면 '사용자가' 저장 '단추를 눌렀을 때' 의 선택 단추 상태를 바탕으로 탭 표시에 사용할 사이트를 설정할 수 있습니다.
saveEvent.notifySuccess();
또한 이때 호출 함수에서 상술한 코드를 불러야 한다.호출 함수를 등록하지 않을 때는 필요 없습니다.
여기 코드를 사용해서 아래 주소에 화면을 설정하는 사이트를 준비했습니다.
https://teamssampleweb.azurewebsites.net/config_multi.html

또한 브라우저로 보아도 별다른 의미가 없다.

③ 포장 준비


저번 보도에서 포장에 관한 말은 이미 했으니 간단하게 설명해 주세요.이번에는 다음과 같은 "manifest.json"을 준비했습니다.기본적으로 지난번과 마찬가지로 명칭과 설명이 바뀔 수도 있고 가장 중요한 것은'configuration Url'의 주소를 이전에 설정한 화면의 주소로 바꾸는 것이다.
{
    "$schema": "https://statics.teams.microsoft.com/sdk/v1.0/manifest/MicrosoftTeams.schema.json",
    "manifestVersion": "1.0",
    "version": "1.0.0",
    "id": "%Microsoft App ID%",
    "packageName": "kenn3.samples.sampleapp2",
    "developer": {
        "name": "kenn3",
        "websiteUrl": "https://qiita.com/KenN3",
        "privacyUrl": "https://qiita.com/KenN3",
        "termsOfUseUrl": "https://qiita.com/KenN3"      
    },
    "name": {
        "short": "サンプルアプリ2",
        "full": "ウェブサイトを選択して表示するだけのサンプルアプリ"
    },
    "description": {
        "short": "アプリの解説です。",
        "full": "アプリの解説のロングバージョンです。"
    },
    "icons": {
        "outline": "icon20x20.png",
        "color": "icon96x96.png"
    },
    "accentColor": "#60A18E",
    "configurableTabs": [
        {
            "configurationUrl": "https://teamssampleweb.azurewebsites.net/config_multi.html",
            "canUpdateConfiguration": true,
            "scopes": [
                "team"
            ]
        }
    ],   
    "validDomains": [
        "teamssampleweb.azurewebsites.net"
    ]
}
"id"에서 마이크로소프트 앱 ID를 설정하는 것을 잊지 마십시오.

"manfest.json"이 준비되어 있다면, 아이콘이 약간 변경된 이미지도 준비되어 있습니다...

Zip을 압축해서 포장!
그리고 지난번과 같은 절차에 따라 포장 측면을 팀스 팀에 탑재하면 완성된다.

정상적으로 작동할 수 있는지 시험해 보다


우선 팀 채널에서 라벨을 붙이는 추가 화면을 시도해 보자.

잘 추가됐네.아이콘은 여전히 부끄럽다.이 앱을 누르면...

설정 화면이 떴어요!아직 라디오 버튼을 누르지 않았기 때문에 저장 버튼을 사용할 수 없습니다.그럼 "페이지 1"을 누르면...

저장 버튼을 클릭합니다.

이렇게 하면 안전하게 설정한 것처럼 첫 페이지가 표시됩니다!

나도 다른 라디오 버튼을 시험해 볼게.탭의 설정에서 설정 화면이 다시 호출됩니다.

그럼 이번에는 두 번째 페이지를 선택해서 저장하세요.

이번에는 설정한 대로 두 번째 페이지가 나왔습니다!사용자의 설정을 통해 탭 표시용 사이트가 변경되었는지 확인할 수 있습니다.이번에 간단하게 세 개를 선택했지만 맞춤형 범위는 무한대였다.
Amazon Location Service, Leaflet, AWS Amplify 및 Vue.js를 사용하여 지도 애플리케이션 구축
BOJ 1517 버블 소트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage