여보세요, 제스퍼라고 합니다.👋
나는 최근에 림보라는 회사에서 새로운 일을 시작하여 엠브라코 개발자를 맡았다.나는 최근에 무한 편집을 사용하는 사용자 정의listview를 만드는 법을 배워야만 했다. 나는 여러분과 공유할 것이라고 생각한다.
이 블로그 글은 Umbraco backoffice에서 사용자 정의 목록 보기를 만드는 방법을 보여 줍니다. 예를 들어 사용자 정의 템플릿을 만들어서 표시하지만, 내용 프로그램/부분/대화 메뉴/기타 내용도 만들 수 있습니다.우리 시작합시다!

1단계 - 백그라운드에 간단한 대시보드 만들기

대시보드를 만들려면 새 폴더에 여러 개의 파일을 만들어야 합니다.먼저 App 플러그인에 "CustomDashboard"라는 폴더를 만듭니다.이 폴더에서 다음 파일을 만듭니다.

이 프로세스(Umbraco가 시작할 때 자동으로 Backoffice extensions)를 등록하는 데 익숙하지 않으면 App Plugins 폴더의 내용과 패키지에 등록된 모든 내용을 실행합니다.목록 파일을 추가합니다.
따라서 계기판을 표시하기 위해서는 데이터 패키지를 작성해야 한다.명세서 파일을 선택한 다음 사이트를 다시 시작하십시오!
다음은 각 파일의 초기 내용입니다.
소포.나타내다

{
    "dashboards":  [
        {
            "alias": "myCustomDashboard",
            "view":  "/App_Plugins/CustomDashboard/dashboard.html",
            "sections":  [ "content" ],
            "weight": 15
        }
    ],
    "javascript": [
        "~/App_Plugins/CustomDashboard/dashboard.controller.js"
  ]
}

참고: 섹션을 컨텐트로 설정하고 가중치를 15로 설정하여 시작 패널과 리디렉션 사이에 놓습니다.Read more on default dashboard weights .
계기판.html

<div ng-controller="MyDashboardController as vm">
    <h1>Welcome to my dashboard!</h1>
</div>

계기판.제어기.js

(function () {
    "use strict";

    function DashboardController() {

    }

    angular.module("umbraco").controller("MyDashboardController", DashboardController);

})();

주의: 밑에 있는 컨트롤러를 "My Dashboard Controller"로 등록해서 Umbracos의 이름 공간과 충돌하지 않도록 하겠습니다.
랑/응 우리.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language>
  <area alias="dashboardTabs">
    <key alias="myCustomDashboard">Custom Dashboard</key>
  </area>
</language>

주의: 이 언어 파일은 백오피스에 대시보드 이름을 표시하는 데 사용됩니다.기본적으로 대시보드 이름은 localized이고 주요 별칭은 패키지의 대시보드 세트 별칭입니다.나타내다
이 파일들을 모두 생성하고 저장하면 웹 사이트를 다시 시작합니다. (웹.config에 공간을 추가하는 것은 매우 빠른 방법입니다.) 그리고, 대시보드는listview를 처리할 준비가 되어 있습니다.

2단계 - 컨트롤러에서 데이터를 가져오고 출력

알겠습니다. 리스트뷰를 채울 내용을 가져오십시오.대부분의 경우, 외부에서 데이터를 얻거나, 옹브라코 자체에서 데이터를 수집할 수도 있습니다.
편리하고 빠르기 위해서, 나는 다음 주 내에 발표 예정일의 내용 목록을 얻을 것이다.Backoffice Authorization API 컨트롤러를 만들었습니다.
계기판 컨트롤러.대테러 엘리트

using System;
using System.Collections.Generic;
using Umbraco.Core.Models;
using Umbraco.Core.Services;
using Umbraco.Web.WebApi;

namespace Backoffice.Controllers
{
    public class DashboardController : UmbracoAuthorizedApiController
    {
        private readonly IContentService _contentService;

        public DashboardController(IContentService contentService)
        {
            _contentService = contentService;
        }

        public IEnumerable<IContent> GetContentForReleaseNextWeek ()
        {
            var endDate = DateTime.Now.AddDays(7);

            return _contentService.GetContentForRelease(endDate);                
        }
    }
}

너는 더 많은 것을 읽을 수 있다UmbracoAuthorizedApiControllers in the Umbraco docs
네가 유일하게 알아야 할 것은, 그것은 다른 곳에서 자동으로 권한을 부여받는 것이지, 다른 곳에서 권한을 부여받는 것이 아니다.또한 자동으로 라우팅됩니다~/Umbraco/backoffice/Dashboard/GetContentForReleaseNextWeek.
만약 C# 컨트롤러의 배치 위치에 대해 의문이 있다면, 웹 사이트의 dll로 컴파일하는 단독 라이브러리를 사용하는 것을 권장합니다.다음은 내 설정입니다.

대시보드 각도 컨트롤러에서 이 API에서 데이터를 가져옵니다!
우선, init 함수를 설정하고 싶습니다. 컨트롤러의 끝에 호출한 다음, 템플릿을 불러올 때 바로 실행하고자 하는 함수를 실행할 수 있습니다.그리고 내장된 vm.loading 변수를 설정할 수 있습니다.Api 컨트롤러를 호출하기 위해 Angular$http 서비스를 주입하기를 희망합니다.초기 설정은 다음과 같습니다.

(function () {
    "use strict";

    function DashboardController($http) {

        var vm = this;

        function init() {            
            getContentForRelease();            
        }

        function getContentForRelease() {
            vm.loading = true;
            $http({
                method: 'GET',
                url: '/Umbraco/backoffice/api/Dashboard/GetContentForReleaseNextWeek',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(function (response) {
                console.log(response); // logging the response so we know what to do next!

                vm.loading = false;
            });
        }

        init();

    }

    angular.module("umbraco").controller("MyDashboardController", DashboardController);

})();

우선, 나는 단지 위안일 뿐이다.다음 데이터 구조를 이해하기 위해 응답을 기록합니다.

이제 반환된 데이터를 알았으니 <umb-load-indicator> 함수를 수정합시다.

function getContentForRelease() {
    vm.loading = true;
    $http({
        method: 'GET',
        url: '/Umbraco/backoffice/api/Dashboard/GetContentForReleaseNextWeek',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function (response) {
        console.log(response); // logging the response so we know what to do next!

        if (response.data.length > 0) {
            vm.weHaveRecords = true;
            vm.records = response.data;
        } else {
            vm.weHaveRecords = false;
        }               

        vm.loading = false;
    });
}

그리고 다음과 같은 관점을 가지고 있습니다.

<div ng-controller="MyDashboardController as vm">
    <h1>Welcome to my dashboard!</h1>

    <umb-box ng-if="vm.weHaveRecords">
        <umb-box-content>
            <!-- The following is a super nice way to just get an overview of the data you get and make sure the data is there! -->
            {{vm.records | json}}
        </umb-box-content>
    </umb-box>

    <umb-box ng-if="!vm.weHaveRecords">
        <umb-box-content>
            No records at this point!
        </umb-box-content>
    </umb-box>

    <umb-load-indicator ng-if="vm.loading">
    </umb-load-indicator>
</div>

그리고 데이터를 출력합니다!

3. 더 많은 관련 데이터 얻기

그러면 현재 데이터를 보고listview에 표시할 것을 결정합니다.

따라서 이 데이터를 볼 때listview에 다음과 같은 내용을 포함하는 것이 의미가 있다고 생각합니다.

컨텐츠 이름

데이터에는 유용한 것이 별로 없습니다. 그러나 문제는 다른 데이터가 필요할 수도 있다는 것입니다.

웹 주소

계획 출판일

누가 출판을 안배했는가

빵 부스러기일지도 몰라요?

url 가져오기

현재 Url을 생성할 수 있습니다. 데이터가 getContentForRelease 있고 Id 있기 때문입니다. 만약 모르면 id나guid를 사용하여 고정된 경로의 모든 내용 노드에 접근할 수 있습니다. 따라서 위의 데이터가 있습니다. 이 두 노드를 동시에 접근할 수 있다는 것을 알고 있습니다.Key https://localhost:44303/umbraco#/content/content/edit/202cdc2f-1a45-40f4-a653-a7b321e1c54c그래서 나는 그 중 하나를 URL로 사용할 수 있다.다른 정보는 아직 사용할 수 없으니, 우리가 무엇을 할 수 있는지 봅시다.

계획 게시 날짜 가져오기

이것은 좀 어렵다는 것을 증명하지만, 나는 방법을 하나 찾았다. get it from IContent그래서 API 컨트롤러를 조금 바꾸기로 했습니다.
계기판 컨트롤러.대테러 엘리트

public class DashboardController : UmbracoAuthorizedApiController
{
    private readonly IContentService _contentService;

    public DashboardController(IContentService contentService)
    {
        _contentService = contentService;
    }

    public List<ContentWithScheduledInfo> GetContentForReleaseNextWeek ()
    {
        var endDate = DateTime.Now.AddDays(7);

        var response = _contentService.GetContentForRelease(endDate);

        var contentWithScheduledInfo = new List<ContentWithScheduledInfo>();

        foreach(IContent item in response)
        {
            contentWithScheduledInfo.Add(new ContentWithScheduledInfo
            {
                Content = item,
                ScheduleInfo = item.ContentSchedule
            });
        }

        return contentWithScheduledInfo; 
    }
}

public class ContentWithScheduledInfo
{
    public IContent Content { get; set; }
    public ContentScheduleCollection ScheduleInfo { get; set; }
}

새 컨텐트 출력은 다음과 같습니다.

그래서 https://localhost:44303/umbraco#/content/content/edit/1110에서 우리는 스케줄이 있는 날짜를 포함한다response.data[0].ScheduleInfo.FullSchedule[0].Date. this enum는 0이나 1이기 때문에 0이면 계획을 발표하고 1은 계획을 취소하는 것이다.

오트로

이 박문은 이미 매우 길기 때문에 나는 그것을 적어도 두 부분으로 나누기로 결정했다😄
다음 부분에서 우리는 누가 발표를 계획했는지 알고 목록 보기에 모든 데이터를 표시하며 노드를 클릭할 때 무한 편집기 창에서 내용 노드를 열려고 시도할 것입니다.
만약 당신이 이 글을 좋아한다면, 어떤 피드백, 건의, 나의 해커 코드 개선, 또는 기타 어떤 것도 트위터에 알려주세요 -