Change Google Picker DocsView Title

Question

I am using Google Picker API on my website. This is my code:

this.picker = new google.picker.PickerBuilder().
            addView(new google.picker.DocsView(google.picker.ViewId.DOCS).
                    setIncludeFolders(true).
                    setOwnedByMe(true)).
            addView(new google.picker.DocsView(google.picker.ViewId.DOCS).
                    setIncludeFolders(true).
                    setOwnedByMe(false)).
            addView(google.picker.ViewId.RECENTLY_PICKED).
            addView(new google.picker.DocsView(google.picker.ViewId.DOCS).
                    setStarred(true)).
            setAppId(this.clientId).
            enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
            disableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES).
            setOAuthToken(accessToken).
            setLocale('es').
            setTitle('Selecciona uno o varios archivos').
            setCallback(this._pickerCallback.bind(this)).
            build().
            setVisible(true);

Which is being shown as (names are censored but they are showing as they should):

The issue is the starred DocsView, which has the title "Google Drive". I would like to change it to something of my choice (the rest of the DocsView have default names) or just "Starred" but I just cannot achieve this.

Does someone know how can I change that?

Well, you can add GroupView and set label by `addLabel('Starred')`, but this label is visible when the user clicks 'GoogleDrive' first. — Dawid Loranc, Feb 07 '18 at 15:20
Ye, I have already tried that but that was not what I am trying to do — Aldeguer, Feb 07 '18 at 15:22

score 9 · Answer 1 · answered Jul 01 '18 at 17:27

9

It is not documented, at least not here, but DocsView.setLabel method worked for me. So, try the following:

    new google.picker.DocsView(google.picker.ViewId.DOCS).
      setStarred(true).
      setLabel("Starred")

answered Jul 01 '18 at 17:27

Oleksiy Rudenko

123
1
6

It works on js but in typescript (i.e. with angular 2+), it do not compile on build. – Damien C Mar 24 '21 at 19:52
That's very helpful :) For info for people using TypeScript, compilation can be "cheated" by using that for example : `(docsView as any).setLabel("Tab label");` – Pierre May 25 '23 at 09:16

mootrichard · Answer 2 · 2018-02-08T17:14:37.020

It looks like you're not alone in this! You can see in 2014 someone else had a similar issue: https://groups.google.com/forum/#!topic/google-picker-api/9x5a_VAb73k

I had tested this out extensively myself with different options, and it appears that the field is entirely controlled by Google, because it is in an iFrame.

It seems like a bug on Google's part, particularly since it doesn't do any of the localization (although that might be intended since the product is named "Google Drive").

Until Google changes that, it cannot display anything other than "Google Drive".

Additionally, I attempted to report it, which you can see here: https://issuetracker.google.com/73046870

Change Google Picker DocsView Title

2 Answers2