nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

File view component - documentLibrary

rsocorro

I tried this code,

ngOnInit() {         let nodes: any = this.apiService.getInstance().nodes;         nodes.getNodeInfo('-root-', {             includeSource: true,             include: ['path', 'properties'],             relativePath: '/Sites/swsdp/documentLibrary'        })         .then(node => {             console.log(node);             this.currentFolderId = node.id;             this.changeDetector.detectChanges();         });     }

to set my default folder to be the documentLibrary, but nothing happens, I still need to browse sites, then swsdp to access documentLibrary.

dl.png

Find more posts tagged with

Application Development Framework

Accepted answers

eugenio_romano

I guess you didn't assigned to the document list your new currentFolderId calculated in the init:

<adf-document-list
  #documentList
  [currentFolderId]="currentFolderId">‍‍‍

you have always root as value in the currentFolderId.

All comments

eugenio_romano

Hi Roman can you please post your ts and HTML code well formatted for a better help?

joreun

Hi Eugenio,

I encounter the same problem than Roman.

We are trying the sample that is provided at chapter "setting default folder" in the page DocumenList Component

import { ChangeDetectorRef } from '@angular/core';
import { AlfrescoApiService } from '@alfresco/adf-core';

export class FilesComponent implements OnInit {
    currentFolderId: string = '-my-';
    constructor(private apiService: AlfrescoApiService,
                private changeDetector: ChangeDetectorRef) {
        // ...
    }

    ngOnInit() {
        let nodes: any = this.apiService.getInstance().nodes;
        nodes.getNodeInfo('-root-', {
            includeSource: true,
            include: ['path', 'properties'],
            relativePath: '/Sites/swsdp/documentLibrary'
        })
        .then(node => {
            console.log(node);
            this.currentFolderId = node.id;
            this.changeDetector.detectChanges();
        });
    }
}

I also tried to change the initialisation adding "this.documentList.currentFolderId = node.id;". When debugging the js, the properties are well changed but this has no impact, the root is still displayed. It seems that "this.changeDetector.detectChanges();" has no effect.

Note also that I have used "export class DocumentlistComponent implements OnInit {...}" instead of the proposed sample "export class FilesComponent implements OnInit {...}"
As I am a beginner with Angular, could you indicate what is missing ?

Regards,

Joël

rsocorro

Hi Eugenio, as joreun mentioned below, I am also trying the "Setting default folder" in the DocumentList Component documentation.

This is my file-view.component.html file which i didn't touch at all

<ng-container *ngIf="nodeId">

    <ng-template let-node="node" #sidebarTemplate>
        <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
                <adf-comments [nodeId]="nodeId"></adf-comments>
            </adf-info-drawer-tab>

            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate">
                <adf-content-metadata-card [node]="node"></adf-content-metadata-card>
            </adf-info-drawer-tab>

            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">
                <mat-card>
                    <mat-card-content>
                        <adf-version-manager [node]="node"
                                             (uploadError)="uploadError($event)">
                        </adf-version-manager>
                    </mat-card-content>
                </mat-card>
            </adf-info-drawer-tab>
        </adf-info-drawer>
    </ng-template>

<adf-viewer [nodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">

        <adf-viewer-toolbar-actions>
            <button mat-icon-button>
                <mat-icon>alarm</mat-icon>
            </button>
            <button mat-icon-button>
                <mat-icon>backup</mat-icon>
            </button>
            <button mat-icon-button>
                <mat-icon>bug_report</mat-icon>
            </button>
        </adf-viewer-toolbar-actions>

</adf-viewer>
</ng-container>

rsocorro

and this is my file-view.component.ts default file

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { MatSnackBar } from '@angular/material';

@Component({
    selector: 'app-file-view',
    templateUrl: 'file-view.component.html',
    styleUrls: ['file-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FileViewComponent implements OnInit {

nodeId: string = null;
currentFolderId: string = '-my-';

    constructor(private router: Router,
                private route: ActivatedRoute,
                private snackBar: MatSnackBar,
                private apiService: AlfrescoApiService) {
    }

ngOnInit() {

        this.route.params.subscribe(params => {
            const id = params.nodeId;
            if (id) {
                this.apiService.getInstance().nodes.getNodeInfo(id).then(
                    (node) => {
                        if (node && node.isFile) {
                            this.nodeId = id;
                            return;
                        }
                        this.router.navigate(['/files', id]);
                    },
                    () => this.router.navigate(['/files', id])
                );
            }
        });
    }

    onUploadError(errorMessage: string) {
        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }

and this is my updated file-view.component.ts file that I followed in the documentation

nodeId: string = null;
currentFolderId: string = '-my-';

    constructor(private router: Router,
                private route: ActivatedRoute,
                private snackBar: MatSnackBar,
                private apiService: AlfrescoApiService,
                private changeDetector: ChangeDetectorRef) {
    }

    ngOnInit() {
        let nodes: any = this.apiService.getInstance().nodes;
        nodes.getNodeInfo('-root-', {
            includeSource: true,
            include: ['path', 'properties'],
            relativePath: '/Sites/swsdp/documentLibrary'
        })
        .then(node => {
            console.log(node);
            this.currentFolderId = node.id;
            this.changeDetector.detectChanges();
        });
    }

    onUploadError(errorMessage: string) {
        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }
}

eugenio_romano

Sorry guys I don't see on all those files where you use the <adf-document-list> maybe is better if you create an example sandbox in GitHub in order to have a better global vision or your use case

rsocorro

Hi Eugenio, the tag <adf-document-list> is in the documentlist.component.html file if you're wondering.

documentlist.component.html file

<adf-toolbar>
<adf-toolbar-title>
    <adf-breadcrumb
      class="files-breadcrumb"
      root="Personal Files"
      [target]="documentList"
      [folderNode]="documentList.folderNode">
    </adf-breadcrumb>
</adf-toolbar-title>

<div class="adf-toolbar--spacer"></div>

<adf-upload-button
    [rootFolderId]="documentList.currentFolderId || '-root-'"
    [adf-node-permission]="'create'"
    (success)="uploadSuccess($event)">
</adf-upload-button>

</adf-toolbar>

<adf-document-list
#documentList
currentFolderId="-root-"
(preview)="showPreview($event)"

contextMenuActions="true"
contentActions="true">

<content-actions>
     <content-action
        title="Copy"
        [icon]="'content_copy'"
        [target]="'folder'"
        [handler]="'copy'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Move"
        [icon]="'redo'"
        [target]="'folder'"
        [handler]="'move'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Delete"
        [icon]="'delete'"
        [target]="'folder'"
        [handler]="'delete'"
        permission="update"
        (execute)="myCustomActionAfterDelete($event)">
     </content-action>
   
     <content-action
        title="Copy"
        [icon]="'content_copy'"
        [target]="'document'"
        [handler]="'copy'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Move"
        [icon]="'redo'"
        [target]="'document'"
        [handler]="'move'"
        permission="update"
        (error)="onContentActionError($event)"
        (success)="onContentActionSuccess($event)">
     </content-action>
     <content-action
        title="Delete"
        [icon]="'delete'"
        [target]="'document'"
        [handler]="'delete'"
        permission="delete"
        (execute)="myCustomActionAfterDelete($event)">
     </content-action>
</content-actions>
</adf-document-list>

<adf-file-uploading-dialog></adf-file-uploading-dialog>

documentlist.component.ts file

import { Component, ViewChild, Input } from '@angular/core';
import { NotificationService } from '@alfresco/adf-core';
import { DocumentListComponent } from '@alfresco/adf-content-services';
import { PreviewService } from '../services/preview.service';

@Component({
selector: 'app-documentlist',
templateUrl: './documentlist.component.html',
styleUrls: ['./documentlist.component.css']
})
export class DocumentlistComponent {

@Input()
showViewer: boolean = false;
nodeId: string = null;

@ViewChild('documentList')
documentList: DocumentListComponent;

constructor(private notificationService: NotificationService, private preview: PreviewService) {

}

uploadSuccess(event: any) {
    this.notificationService.openSnackMessage('File uploaded');
    this.documentList.reload();
}

showPreview(event) {
    const entry = event.value.entry;
    if (entry && entry.isFile) {
      this.preview.showResource(entry.id);
    }
}

onGoBack(event: any) {
    this.showViewer = false;
    this.nodeId = null;
}

onContentActionError(event){
   this.notificationService.openSnackMessage('The action cannot be completed. A file with the same name already exists.', 2500)
}

onContentActionSuccess(event){
   this.notificationService.openSnackMessage('The action has been completed.', 2500)
}

myCustomActionAfterDelete(event){
      let entry = event.value.entry;
      let item = "";
      if (entry.isFile){
          item = "File";
      }else if (entry.isFolder){
          item = "Folder";
      }

      this.notificationService.openSnackMessage(`${item} called "${entry.name}" was deleted.`, 2500);
      }
}

eugenio_romano

I hope to understand your probnlem, so as per documentation :

alfresco-ng2-components/document-list.component.md at master · Alfresco/alfresco-ng2-components · GitHub

In order to change the Folder that you want to show in the document list, you need to change the input parameter currentFolderId of the <adf-document-list>.

For example:

<adf-document-list
    [currentFolderId]="'-my-'"
    [display]="'gallery'">
</adf-document-list>‍‍‍‍

You can use as currentFolderId a nodeId or :

Repository aliases

You can use one of the well-known reserved aliases:

-root-
-shared-
-my-

https://github.com/Alfresco/alfresco-ng2-components/blob/master/docs/content-services/document-list.component.md#document-list-aliasesDocument List aliases

The Document List component also provides support for the following reserved aliases:

-trashcan-,
-sharedlinks-
-sites-
-mysites-
-favorites-
-recent-

joreun

Hi Eugenio,
What you indicate only concerns predefined known aliases.
But what we want to acheive is to access a more dynamic path as the example /Sites/swsdp/documentLibrary that is mentionned in the chapter "setting default folder" of wiki DocumenList Component
We do not succes to make this given example working.

Note that Roman and me are testing in 2 different manners :

My personal method is :
-1- Generate the default application by following creating-your-adf-application (so to use the last ADF version 2.5.0)
-2- Apply the proposed wiki modification to the generated src/app/documentlist/documentlist.component.ts
So, in my case, the ngOnInit function is added on the DocumentlistComponent class and not to the FilesComponent class that is mentionned in the wiki.
I don't know if this could my problem.

Concerning Roman, it seems that he uses a different sample (with different ADF version ?) because he tries to add the ngOnInit function on a default existing FileViewComponent class.

I hope that this will better clarify our problems.

eugenio_romano

I guess you didn't assigned to the document list your new currentFolderId calculated in the init:

<adf-document-list
  #documentList
  [currentFolderId]="currentFolderId">‍‍‍

you have always root as value in the currentFolderId.

joreun

You are right Eugenio, changing default code [currentFolderId]="'-my-'" with [currentFolderId]="currentFolderId" has been the solution.

Thank you very much.

Best regards,

Joël

rsocorro

Have you solved your problem regarding this one? because I'm getting an "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '-root-'. Current value: '-my-'." error with that, or is it because we're using different adf version?

rsocorro

never mind got it working now.