オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

【わかりやすく解説】ナビゲーションメニューと拡張ナビゲーションメニューを設定してみる

こんにちは。
リーデックス野田です。

最近めっきり暑くなってきましたね。出勤されている方も増えてきてるとは思いますが、皆様体調にはお気を付けください。

さて、今回はプリザンターに最近追加された機能を試してみようと思います。ナビゲーションを簡単に変更・追加できるようになりました。初めての方にも理解していただけるよう、わかりやすく解説していきたいと思いますので、ぜひご覧ください。

※2025/01/31に「拡張ナビゲーション」について追記しました。 

ナビゲーションメニューに独自のメニューを追加してみる。

ナビゲーションメニューの「ヘルプ」メニュー配下に、リーデックスのホームページを表示する、「リーデックス」のメニューを追加してみたいと思います。

f:id:nodakoshiro:20210619082137p:plain

メニューを追加する

ナビゲーションメニューを変更するには、NavigationMenu.jsonを編集します。

「Implem.Pleasanter\App_Data\Parameters\NavigationMenus.json」を開いて、ヘルプメニューの設定が記載されているJSON内に下記の通りJSONを追加します。

{
    "ContainerId": "HelpMenuContainer",
    "MenuId": "HelpMenu",
    "Name": "HelpMenu",
    "Icon": "ui-icon ui-icon-help",
    "ChildMenus": [
        {
            "MenuId": "HelpMenu_Reedex",
            "Name": "リーデックス",
            "Icon": "ui-icon ui-icon-home",
            "Url": "https://www.reedex.co.jp/",
            "Target": "_blank"
        },
        ・
        ・
        ・
    ]
}

 

追加後はプリザンターの再起動を行ってください。再起動して、プリザンターにログインすると、ナビゲーションメニューに「リーデックス」と記載されたメニューが表示されました。

f:id:nodakoshiro:20210612173134p:plain

メニューを非表示にする

続いて、先ほど追加した「リーデックス」のメニューを非表示にしてみたいと思います。非表示にするには、「"Disabled": true」の設定を追加します。変更後は同様にプリザンターの再起動を行ってください。

{
    "MenuId": "HelpMenu_Reedex",
    "Name": "リーデックス",
    "Icon": "ui-icon ui-icon-home",
    "Url": "https://www.reedex.co.jp/",
    "Target": "_blank",
    "Disabled":  true
}

 

その他、詳しい設定については、マニュアルもご覧下さい。NavigationMenu.jsonを編集して、メニューの配置やアイコンを変更することも可能です。

pleasanter.org

拡張ナビゲーションメニューを設定してみる

(2025/01/31 小川追記)

ナビゲーションメニューの追加方法は、この他にも「拡張ナビゲーションメニュー」を利用する方法もあります。

拡張ナビゲーションメニューはナビゲーションメニューへのメニューの追加、削除等を行うための拡張機能です。

下記は、ユーザメニューの下に、拡張ナビゲーションメニューを設定した例です。

 

設定ファイルについて

拡張ナビゲーションメニューは、パラメータファイルがあるフォルダ(ディレクトリ)配下にあるExtendedNavigationMenusフォルダの中にJSONファイルとして保存します。

パラメータファイル(のあるフォルダ)とJSONファイルについては、下記ブログ記事をご参照ください。

先ほどの画像のメニューを設定するJSONファイルは下記となります。ファイル名は任意ですが「APIKey.json」として保存しました。

{
    "TargetId": "AccountMenu",
    "Action": "Append",
    "DeptIdList":[2],
    "Disabled": false,
    "NavigationMenus": [
        {
            "ContainerId": "ExtendedAPIKeyContainer",
            "MenuId": "ExtendedAPIKeyMenu",
            "Name": "API設定",
            "ChildMenus": [
                {
                    "Name": "APIKey設定",
                    "MenuId": "ChildMenusAPIKey",
                    "LinkParams": [ "Users", "Editapi" ]
                }
            ]
        }
    ]
}

 

NavigationMenu.jsonでも同じような設定ができるのですが、拡張ナビゲーションメニューでは表示する条件を細かく設定することができる点で違いがあります。

以下、マニュアル「拡張ナビゲーションメニュー」より抜粋します。

パラメータ名 設定例 説明
Disabled false trueの場合は無効化され動作しません。
DeptIdList [1,2,3] 対象となる組織IDを配列形式で指定します。指定しない場合には省略可能です。
GroupIdList [1,2,3] 対象となるグループIDを配列形式で指定します。指定しない場合には省略可能です。
UserIdList [1,2,3] 対象となるユーザIDを配列形式で指定します。指定しない場合には省略可能です。
SiteIdList [1,2,3] 対象となるサイトのサイトIDを配列形式で指定します。指定しない場合には省略可能です。
IdList [1,2,3] 対象となるレコードのIDを配列形式で指定します。指定しない場合には省略可能です。
TargetId "NewMenu" Actionで指定した操作をする時の対象となるIDを指定します。
Action "Append" メニューの追加、削除等の操作を指定します。
変数 説明
Append TargetIdで指定したIDのメニューの後ろにメニューを追加します。
Prepend TargetIdで指定したIDのメニューの前にメニューを追加します。
Remove TargetIdで指定したIDのメニューを削除します。
Replace TargetIdで指定したIDのメニューを置換します。
ReplaceAll メニューをすべて置換します。
NavigationMenus [{…},{…},…] 拡張するメニューの定義を指定します。パラメータ設定の「NavigationMenu.json」を参照ください。

表のようにユーザ、グループ、組織やレコードIDなどを条件として指定することができます。NavigationMenu.jsonでは条件指定できないですが、「この条件のときのみこのメニューを標示したい」といったことができるようになります。

【重要】設定時の注意

ここで1点、「TargetId」指定時に注意すべき点があります。

「TargetId」ですが、ID「#NavigationMenu」配下にあるdivタグ「#XXXContainer」(XXXは任意の文字列)を指定することができるのですが、XXX部分のみを指定する必要があります。

例えば「#NewMenuContainer」の場合、指定する文字列は「NewMenu」となり、「NewMenuContainer」と指定すると正しく反映されませんのでご注意ください。

まとめ

今回はプリザンターのナビゲーションメニューを変更する方法を紹介してみました。今後も少しづつプリザンターに関するお役立ち情報を発信できればと思います。

弊社では、スクリプトやスタイルを利用したカスタマイズについてご支援させていただいております。スクリプトについて相談したい、業務を改善のために実現したい機能がある、や、本記事や過去の記事のスクリプトを応用したい、などありましたら、お気軽にお問合せください。

それでは今回はこの辺で。
最後までお読みいただきありがとうございました。