---
title: 商品一覧画面
screen: ./product-list.png?highlight=[[620,4,262,41],[3,4,173,40],[1,49,881,484]]
---

# 概要

商品の一覧を確認する画面。
この画面から、商品の追加や編集画面へ遷移する。

```uiflows
[商品一覧画面]
商品の追加
==> 商品追加画面
商品の編集
==> 商品編集画面

[商品追加画面](./product-new.html)
戻る
==> 商品一覧画面
追加
==> 商品一覧画面

[商品編集画面](./product-edit.html)
戻る
==> 商品一覧画面
保存
==> 商品一覧画面
```

# 機能一覧

-   [1.商品検索](#1.商品検索)
-   [2.商品追加ボタン](#2.商品追加ボタン)
-   [3.商品一覧](#3.商品一覧)

# 機能詳細

## 1.商品検索

```uiflows
[テキストボックス]
エンターキー
==> 検索

[検索]
未入力
==> 何も起きない
入力済み
==> IDまたは商品名で検索
```

## 2.商品追加ボタン

```uiflows
[商品追加ボタン]
クリック
==> 商品追加画面

[商品追加画面](./product-new.html)
```

-   商品追加画面へ遷移するのみ。

## 3.商品表示エリア

商品の一覧を表示する。

-   ID 列のリンクをクリックすると、該当商品の[商品編集画面](./product-edit.html)へ遷移する。
-   ヘッダーの三角ボタンで商品一覧の並び替えを行う