Add input to show or hide custom ID.

frontend/src/app/features/content/pages/content/content-page.component.html

@@ -96,6 +96,11 @@
                 </ng-container>
 
                 <ng-template #noContentMenu>
+                    <button type="button" class="btn btn-more btn-outline-secondary btn-sm me-2" (click)="changeShowIdInput(!showIdInput)">
+                        <span [class.hidden]="showIdInput">+</span>
+                        <span [class.hidden]="!showIdInput">-</span>
+                    </button>
+
                     <sqx-language-selector class="languages-buttons" 
                         (languageChange)="changeLanguage($event)"
                         [language]="language" 
@@ -160,6 +165,7 @@
                     [formContext]="formContext"
                     [languages]="languages"
                     [schema]="schema"
+                    [showIdInput]="showIdInput"
                     [(contentId)]="contentId">
                 </sqx-content-editor>
             </ng-container>

frontend/src/app/features/content/pages/content/content-page.component.scss

@@ -9,6 +9,18 @@
     color: $color-text;
 }
 
+.btn-more {
+    @include absolute(null, null, -.6125rem, 0);
+    @include force-width(1.25rem);
+    @include force-height(1.25rem);
+    background-color: $color-white;
+    line-height: 1;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    z-index: 600;
+}
+
 .nav-tabs2 {
     @include absolute(auto, auto, 0, 5rem);
     flex-wrap: nowrap;

frontend/src/app/features/content/pages/content/content-page.component.ts

@@ -40,6 +40,8 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     public language!: AppLanguageDto;
     public languages!: ReadonlyArray<AppLanguageDto>;
 
+    public showIdInput = true;
+
     public confirmPreview = () => {
         return this.checkPendingChangesBeforePreview();
     };
@@ -65,6 +67,8 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
             appName: contentsState.appName,
             user: { role, ...authService.user?.export() },
         };
+
+        this.showIdInput = !localStore.getBoolean(Settings.Local.HIDE_CONTENT_ID_INPUT);
     }
 
     public ngOnInit() {
@@ -292,6 +296,12 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
         this.contentForm.setEnabled(!this.content || this.content.canUpdate);
     }
 
+    public changeShowIdInput(value: boolean) {
+        this.localStore.setBoolean(Settings.Local.HIDE_CONTENT_ID_INPUT, !value);
+
+        this.showIdInput = value;
+    }
+
     private languageKey(): any {
         return Settings.Local.CONTENT_LANGUAGE(this.schema.id);
     }

frontend/src/app/features/content/pages/content/editor/content-editor.component.html

@@ -10,7 +10,7 @@
             <div [innerHTML]="'contents.versionViewing' | sqxTranslate: { version: contentVersion } | sqxMarkdownInline | sqxSafeHtml"></div>
         </div>
         
-        <div *ngIf="isNew">
+        <div *ngIf="isNew && showIdInput">
             <input class="form-control" placeholder="{{ 'contents.idPlaceholder' | sqxTranslate }}" 
                 [ngModel]="contentId"    
                 (ngModelChange)="contentIdChange.emit($event)" />

frontend/src/app/features/content/pages/content/editor/content-editor.component.ts

@@ -26,6 +26,9 @@ export class ContentEditorComponent {
     @Input()
     public isNew = false;
 
+    @Input()
+    public showIdInput = false;
+
     @Input()
     public contentId!: string;
 

frontend/src/app/shared/state/settings.ts

@@ -16,6 +16,7 @@ export const Settings = {
     Local: {
         ASSETS_MODE: 'squidex.assets.list-view',
         CONTENT_LANGUAGE: (schema: any) => `squidex.schemas.${schema}.language`,
+        HIDE_CONTENT_ID_INPUT: 'squidex.contents.idField',
         DASHBOARD_CHART_STACKED: 'dashboard.charts.stacked',
         DISABLE_ONBOARDING: (key: any) => `squidex.onboarding.disable.${key}`,
         FIELD_ALL: (schema: any, field: any) => `squidex.schemas.${schema}.fields.${field}.show-all`,