Apply widget to home page

kosuketakeuchi0621 · July 18, 2024, 11:15am

Could you please provide me with instructions on how to edit the widgets on the homepage?
I understand that there are preset widgets available on the homepage when opening datagrok.
I would like to know the specific steps to follow in order to configure the widgets.

When deleting a widget below message was shown but I am unable to locate where to make these settings, Tools | Widgets section.

Just for your information, since homepage is common entry for user, eventually I would like to add mine, if possible. For example, output of project-list.js would be useful. However, there would be several stepts to achieve so I would like to hear the first step, how to set widget on homepage.

I appreciate your help in advance.
Kosuke

alex.paramonov · July 19, 2024, 12:24pm

Hi,
You can add your own widget as a part of package code (or as a script)

All you need to do is declare a function with output type widget and tag dashboard
Like this:

github.com

datagrok-ai/public/blob/2e76a30ca11764c269c9e24654eace8e8ca4cf8b/packages/PowerPack/src/package.ts#L44


      
            return new AddNewColumnDialog(call);
          }
          
          
//name: welcomeView
          //meta.autostartImmediate: true
          //output: view home
          export function _welcomeView(): DG.View | undefined {
            return welcomeView();
          }
          
          
//output: widget result
          //tags: dashboard
          export function recentProjectsWidget(): DG.Widget {
            return new RecentProjectsWidget();
          }
          
          
//output: widget result
          //tags: dashboard
          export function communityWidget(): DG.Widget {
            return new CommunityWidget();
          }

The implementation is pretty simple too:

github.com

datagrok-ai/public/blob/2e76a30ca11764c269c9e24654eace8e8ca4cf8b/packages/PowerPack/src/widgets/recent-projects-widget.ts#L5


      
          import * as grok from 'datagrok-api/grok';
          import * as DG from "datagrok-api/dg";
          import * as ui from "datagrok-api/ui";
          
          
export class RecentProjectsWidget extends DG.Widget {
            caption: string;
            order: string;
          
          
  constructor() {
              super(ui.panel());
              this.caption = super.addProperty('caption', DG.TYPE.STRING, 'Recent projects');
              this.order = super.addProperty('order', DG.TYPE.STRING, '1');
              this.getProjects();
            }

Please, let me know if you need any help, or maybe an interactive session to help with your own widget building