UiConfig

First, we need to know how DDV creates the UI. DDV has an interface named UiConfig, which is used to configure the layout and the elements includes. And UiConfig can be nested to achieve a complex layout.

Structure

Please refer to Interface UiConfig.

How to configure

Take the mobile edit viewer below as the example to learn how UiConfig is configured.

EditViewer mobile UiConfig

As shown in the figure above, whole layout can be divided into three parts, header, main view and footer.

So simply speaking, the overall UiConfig framework is roughly as follows,

const mobileEditViewerUiConfig = {
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "column",
    className: "ddv-edit-viewer-mobile",
    children: [
        headerUiConfig,
        Dynamsoft.DDV.Elements.MainView, // the view which is used to display the pages
        footerUiConfig,
    ],
};

When type is set to Dynamsoft.DDV.Elements.Layout and flexDirection is column, it means the layout is from top to bottom.
Dynamsoft.DDV.Elements.MainView is one of the default elements DDV provides. Learn more about default elements.

Next, the specific configuration of headerUiConfig, it can be seen that the icons are arranged from left to right, then

EditViewer mobile header UiConfig

{
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "row", // since the default value is "row", this line can be left out.
    className: "ddv-edit-viewer-header-mobile",
    children: [
        Dynamsoft.DDV.Elements.ThumbnailSwitch,
        Dynamsoft.DDV.Elements.Pagination,
        Dynamsoft.DDV.Elements.Download,
    ],
}

Also can know the footerUiConfig is as follows,

EditViewer mobile footer UiConfig

{
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "row", // since the default value is "row", this line can be left out.
    className: "ddv-edit-viewer-footer-mobile",
    children: [
        Dynamsoft.DDV.Elements.DisplayMode,
        Dynamsoft.DDV.Elements.RotateLeft,
        Dynamsoft.DDV.Elements.Crop,
        Dynamsoft.DDV.Elements.Filter,
        Dynamsoft.DDV.Elements.Undo,
        Dynamsoft.DDV.Elements.Delete,
        Dynamsoft.DDV.Elements.Load,
    ],
}

Combining these three parts creates the overall user interface layout.

const mobileEditViewerUiConfig = {
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "column",
    className: "ddv-edit-viewer-mobile",
    children: [
        {
            type: Dynamsoft.DDV.Elements.Layout,
            className: "ddv-edit-viewer-header-mobile",
            children: [
                Dynamsoft.DDV.Elements.ThumbnailSwitch,
                Dynamsoft.DDV.Elements.Pagination,
                Dynamsoft.DDV.Elements.Download,
            ],
        },
        Dynamsoft.DDV.Elements.MainView,
        {
            type: Dynamsoft.DDV.Elements.Layout,
            className: "ddv-edit-viewer-footer-mobile",
            children: [
                Dynamsoft.DDV.Elements.DisplayMode,
                Dynamsoft.DDV.Elements.RotateLeft,
                Dynamsoft.DDV.Elements.Crop,
                Dynamsoft.DDV.Elements.Filter,
                Dynamsoft.DDV.Elements.Undo,
                Dynamsoft.DDV.Elements.Delete,
                Dynamsoft.DDV.Elements.Load,
            ],
        },
    ],
};