How can I custom the settings UI?

MarchLiu · September 1, 2024, 3:05pm

In Jupyter Litchi I add the settings page by default schema:

The input for prompt is a input component. I want to make a markdown editor same as the markdown cell, or a textarea. How can I do it ?

krassowski · September 2, 2024, 8:21am

It is possible by registering the form renderer like in:

github.com

jupyterlab/jupyterlab/blob/0b12f664f24da10a6ac04c8a6b7bfde309ed3363/packages/completer-extension/src/index.ts#L482-L492


      
          if (editorRegistry) {
            const renderer: IFormRenderer = {
              fieldRenderer: (props: FieldProps) => {
                return renderAvailableProviders(props);
              }
            };
            editorRegistry.addRenderer(
              `${COMPLETION_MANAGER_PLUGIN}.availableProviders`,
              renderer
            );
          }

or

github.com

jupyterlab/jupyterlab/blob/0b12f664f24da10a6ac04c8a6b7bfde309ed3363/packages/codemirror-extension/src/services.tsx#L149-L210


      
          formRegistry?.addRenderer(`${SETTINGS_ID}.defaultConfig`, {
            fieldRenderer: (props: FieldProps) => {
              const properties = React.useMemo(
                () => registry.settingsSchema,
                []
              ) as any;
              const defaultFormData: Record<string, any> = {};
              // Only provide customizable options
              for (const [key, value] of Object.entries(
                registry.defaultConfiguration
              )) {
                if (typeof properties[key] !== 'undefined') {
                  defaultFormData[key] = value;
                }
              }
          
              return (
                <div className="jp-FormGroup-contentNormal">
                  <h3 className="jp-FormGroup-fieldLabel jp-FormGroup-contentItem">
                    {props.schema.title}

This file has been truncated. show original

but we should make it easier and document better.

krassowski · September 2, 2024, 8:25am

By the way the setting registry forms are using the same underlying mechanism as the metadata forms which are documented in a bit more detail here: extension-examples/metadata-form at main · jupyterlab/extension-examples · GitHub

MarchLiu · September 3, 2024, 4:17pm

Thx! I will try the way.

Topic		Replies	Views
UI preferences survey - please vote - settings editor edition JupyterLab	0	273	April 26, 2023
Custom Panel Extension in the Left JupyterLab Area JupyterLab	12	4677	July 23, 2019
Create extension to provide custom cell Editor JupyterLab help-wanted	2	796	December 6, 2019
How to use CodeMirror in JupyterLab Extension extensions how-to , help-wanted	5	54	August 19, 2024
How to complete interface customization extensions help-wanted	1	489	December 11, 2022

How can I custom the settings UI?

Related Topics