Zum Hauptinhalt springen

File-Cover Customizing

Customizing​

Diese Anleitung beschreibt, welche Möglichkeiten es gibt, das React-File-Cover-Gadget anzupassen.

warnung

Voraussetzung ist die Library-Version verstionNext oder höher.

tipp

Eine nähere Beschreibung der einzelnen Optionen, die an das Gadget übergeben werden können, ist unter RequestCoverProps zu finden.

Sektionen überschreiben​

Über das options-Objekt, das an das Gadget übergeben wird, können über das Attribut sectionOverwrites einzelne Sektionen überschrieben bzw. durch eigenes HTML ersetzt werden. Das Gadget ist folgendermaßen unterteilt:

Sektionen

export type SectionOverwrites = {
    titleSection?: string; // Sektion 1
    progressSection?: string; // Sektion 2
    commentsSection?: string; // Sektion 3
    infoSection?: string; // Sektion 4
    fileInfoSection?: string; // Sektion 5
    processInfoSection?: string; // Sektion 6
    vendorSection?: string; // Sektion 7
    verificationSection?: string; // Sektion 8
};

Sektionen hinzufügen​

Zudem gibt es die Möglichkeit, über das Attribut sectionTemplates jeweils nach den Sektionen 1-4 einen eigenen HTML-String einzufügen, ohne den vorhandenen Inhalt zu überschreiben:

export type SectionTemplates = {
    titleSection?: string; // zwischen Sektion 1 und 2
    progressSection?: string; // zwischen Sektion 2 und 3
    commentsSection?: string; // zwischen Sektion 3 und 4
    infoSection?: string; // unter Sektion 4
};
tipp

Als Wert wird jeweils ein HTML-String übergeben werden. Für komplexeres HTML bietet es sich an, das HTML mithilfe einer Handlebars-Template im Portalscript zu rendern und als String zu übergeben (Siehe Beispiel). Wird ein leerer String übergeben, wird die entsprechende Sektion nicht angezeigt.

Beispiel​

Dieses Beispiel zeigt, wie man die Freigabeinformationen ausblenden und eine eigene Sektion hinzufügen kann.

1. Handlebar-Template als Custom Property questions.handlebars anlegen​

<div class="cover-section-group">
    <div id="questions" class="cover-section">
        <div class="cover-section-header">
            <h2>Rückfragen</h2>
        </div>
        <div class="cover-section-body">
            <ul class="list flex auto">
                <li id="comment">
                    <label>Rückfragen</label>
                    {{#each questions}}
                    <p>{{date}} - {{text}}<br /></p>
                    {{/each}}
                </li>
            </ul>
        </div>
    </div>
    <style>
        #questions {
            margin: 15px 10px;
        }
        #questions #reasonReject {
            color: darkblue;
        }
        #questions .cover-section-header,
        #questions .cover-section-body {
            border-left: 5px solid darkblue;
        }

        #questions .cover-section-header h2 {
            color: darkblue;
        }

        #questions .cover-section-body li > p {
            margin-left: 8px;
            font-size: 12px;
            margin-top: 0px;
        }
    </style>
</div>

2. Template im Portalscript Gadget_ou.cust.ptpREQ.fieltype.field.cover rendern und als String übergeben​

/* ... some code above */
function getHtmlTemplate() {
    const customProperty = context.getCustomProperties("questions.handlebars").first();
    return customProperty ? customProperty.value : "";
}

const questionsData = {
    questions: [
        {
            date: "07.03.2024 13:16",
            text: "Antwort von: One Unity Admin: Rückfrage beantwortet",
        },
        {
            date: "06.03.2024 11:13",
            text: "Rückfrage von: Dale Cooper an: Phillip Jeffries",
        },
    ],
};

const questionsTemplate = getHtmlTemplate();
const compiler = new TemplateCompiler(questionsTemplate);
const questionsHtml = compiler.compile(questionsData);

/* Die Sektion 8 (Freigabeinformationen) wird ausgeblendet */
options.sectionOverwrites = {
    verificationSection: "",
};

/* Nach der Sektion 2 (Fortschritt) wird die neue Sektion eingefügt */
options.sectionTemplates = {
    progressSection: questionsHtml,
};

return createReactGadget({
    gadgetName: "RequestCover",
    gadgetOptions: options,
});
/* ... some code below */

3. Ergebnis​

Custom-Cover

Progress-Gadget​

Um die Erscheinung des Fortschritt-Gadgets zu ändern, können bestimmte CSS-Variablen über das Attribut options.customStyles überschrieben werden:

    customStyles?: {
        gadgetPrimaryColor?: string;
        progress?: {
            gadgetAnimationSpeed?: string;
            iconsSize?: string;
            iconsSizeXXL?: string;
            inactiveColor?: string;
            iconColor?: string;
            errorBackgroundColor?: string;
            errorBorderColor?: string;
        };
    };

Beispiel​

Im Skript Gadget_ou.cust.ptpREQ.fieltype.field.cover:

/* ... some code above */
        options.customStyles = {
            gadgetPrimaryColor: "darkblue",
            progress: {
                inactiveColor: "lightblue",
                iconColor: "rebeccapurple",
            },
        };

        return createReactGadget({
            gadgetName: "RequestCover",
            gadgetOptions: options,
        });
/* ... some code below */

Ergebnis:

Custom-Cover