티스토리 뷰

SharePoint/SharePoint 2013

SharePoint 2013 App – 자동 호스트 (Autohosted App) (4)

정홍주 2012. 12. 13. 12:00

 

 SharePoint 2013 App – 자동 호스트 (Autohosted App) (4)

 

여기 글에서는 SharePoint 2013의 자동 호스트 앱의 클라우드 앱 페이지의 모양을 SharePoint 2013의 Chrome Control 형태로 변경해보도록 하겠습니다. 화면에 출력되는 마스터나 레이아웃 페이지에 작업을 하면 전체적인 모양이 적용됩니다.

아래는 Chrome Control 관련한 링크니 참고하시면 도움이 됩니다.

http://msdn.microsoft.com/en-us/library/fp179916.aspx

http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2012/08/02/optimizing-user-experience-for-sharepoint-2013-apps.aspx

http://www.ilovesharepoint.com/2012/07/building-aspnet-mvc-based-sharepoint.html

 

아래에서 한번 적용해보겠습니다. MVC4 웹 응용 프로그램으로 이동하여 Views 폴더의 Shared의 _Layout.cshtml 로 이동합니다.

<body> 부분을 아래 내용으로 수정합니다.

<body style="display: none">

<!-- Chrome control  -->

    <div id="chrome_placeholder"></div>

 

jQuery를 위해 <head> 부분에 CDN을 추가합니다.

@Scripts.Render("~/bundles/modernizr")

      <script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"  type="text/javascript">

    </script>

    <script  src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"  type="text/javascript">

    </script>

 

위 부분에 맨 아래에 다음 스크립트를 추가합니다.

<script type="text/javascript">

 

        var hostweburl;

 

        $(document).ready(function () {

            //SPHostURL 매개변수의 값.

            hostweburl =

                decodeURIComponent(

                    getQueryStringParameter("SPHostUrl")

            );

 

            // SharePoint 2013의 주소를 통해 스크립트 경로 생성

            // web_url/_layouts/15/resource

            var scriptbase = hostweburl + "/_layouts/15/";

 

            // SP.UI.Control.js 스크립트 파일 액세스

            $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)

        });

 

 

</script>

 

getQueryStringParameter와 renderChrome 메서드를 추가로 생성합니다.

</script> 위에 getQueryStringParameter 내용을 추가합니다.

function getQueryStringParameter(paramToRetrieve) {

            var params =

                document.URL.split("?")[1].split("&");

            var strParams = "";

            for (var i = 0; i < params.length; i = i + 1) {

                var singleParam = params[i].split("=");

                if (singleParam[0] == paramToRetrieve)

                    return singleParam[1];

            }

        }

 

위 함수는 SPHostURL에서 값을 잘라내서(?, &,=) 호스트 주소만 반환해주는 내용입니다.

 

renderChrome에 대한 내용으로 아래를 </Script> 위에 추가합니다.

function renderChrome() {

            // 도움말 계정 등의 페이지 표시

            var options = {

                "appIconUrl": hostweburl +"/_layouts/15/images/siteIcon.png?rev=23",

                "appTitle": "Chrome Control MVC",

                "appHelpPageUrl": hostweburl+"Help.html?"

                    + document.URL.split("?")[1],

                //  chrome resource 가 로드된후 호출되는 메서드

                "onCssLoaded": "chromeLoaded()",

                "settingsLinks": [

                    {

                        "linkUrl": hostweburl+"Account.html?"

                            + document.URL.split("?")[1],

                        "displayName": "Account settings"

                    },

                    {

                        "linkUrl": hostweburl+"Contact.html?"

                            + document.URL.split("?")[1],

                        "displayName": "Contact us"

                    }

                ]

            };

 

            var nav = new SP.UI.Controls.Navigation(

                                    "chrome_placeholder",

                                    options

                                );

            nav.setVisible(true);

        }

 

        function chromeLoaded() {

            $("body").show();

        }

 

위 내용은 Chrome Control을 화면에 표시해주며 추가로 도움말, 설정, 사이트 이미지 등을 chrome_placeholder 라는 div 에 표시해주게 됩니다. 

솔루션을 배포하고 결과를 확인합니다.
 

자바스크립트이므로 필요하시다면 브라우저의 F12 개발자 도구를 통해 디버깅도 가능합니다.
 
 

Custom Action, 목록, 리스트 등의 여러 SharePoint 2013 개체와 Client 웹 파트 등에 대한 내용은 다른 SharePoint 2013 Apps 를 다루고 나서 알아보도록 하겠습니다.

 

'SharePoint > SharePoint 2013' 카테고리의 다른 글

SkyDrive Pro 2013  (0) 2013.01.17
SharePoint 2013 App – 공급자 (Provider-hosted App) (1)  (0) 2012.12.18
SharePoint 2013 App – 자동 호스트 (Autohosted App) (3)  (0) 2012.12.06
SharePoint 2013 App – 자동 호스트 (Autohosted App) (2)  (0) 2012.12.04
SharePoint 2013 App – 자동 호스트 (Autohosted App) (1)  (0) 2012.11.30
댓글