Hub
ComponentComponent

Data App Header

PW
Draft Latest edits on 
Drag & drop
Like
Use or download
Nest this component inside another component to display a header in an interactive view. The header displays an image and title which should improve the user experience when opening the interactive view.

You can customize the colors, sizes and padding of certain elements via the component settings. Feel free however to also customize the additional CSS properties by unlinking the component and opening the CSS Editor node.

This component becomes especially useful when deployed in a data app that can be accessed remotely via any web browser. To deploy data apps you need to connect your KNIME Analytics Platform to KNIME Server, then move the workflow adopting the components from the LOCAL to the server mount point via the KNIME Explorer panel. The data app will then be accessible through KNIME WebPortal on the KNIME Server URL address.

Component details

  • Header Title:

    Provide here the text title that is going to show in the header.

  • Background Custom Color (HEX Code):

    HEX color code for custom background color. For example you could input: "#3E3A39". If empty the adopted color should be taken from the other component setting "Background Predefined Color".

  • Titles Custom Color (HEX Code):

    HEX color code for custom text color. For example you could input: "#3E3A39". If empty the adopted color should be taken from the other component setting "Titles Predefined Color".

  • Image (Base64 Data URI Format):

    Image in Base64 Data URI format, that is encoded in a long string. The image is going to show in the left part of the data app header. It usually displays the logo of the organization providing the data app.

  • Background Predefined Color:

    Select from the dropdown a predefined color for the text. If the other setting "Text Custom Color (HEX Code)" is provided, select "custom color".

  • Titles Predefined Color:

    Select from the dropdown a predefined color for the text. If the other setting "Titles Custom Color (HEX Code)" is provided, select "custom color".

  • Titles Left Padding:

    Enter here a number from 0 to 100 to determine the distance between the title and subtitle and the left side of the screen.

  • Image Size:

    Enter here a number from 0 to 100 to determine the size of the image.

  • Header Subtitle:

    Provide here the text subtitle that is going to show in the header below the title.

Used extensions & nodes

This component does not have nodes, extensions, nested components and related workflows